The legendary exam, with 10,000 takers last year, is back! Worldwide HTML5 Exam is now available on PC and Smartphone.

English
- English
- 한국어
- 中文
- 日本語

or

Colorful Dots

Follow

2010-06-20 05:08:20

License: MIT License

Fork: 0

Fav: 0

View: 707

Play
Stop
Reload

Smart Phone

Readme
JavaScript 149 lines
HTML 1 lines
CSS 1 lines

Colorful Dots
jQuery v1.4.2

function newFilledArray(len, val) {
  var rv = new Array(len);
  while (--len >= 0) {
      rv[len] = val;
  }
  return rv;
}

var CellSize = 12; 
var CellsAcross = 55; 
var CellsDown = 55; 
var BrushSize = 4; 
var BrushStrength = 1; 
var Calm = 320;        // The higher this is, the longer it seems to take to turn chaotic

var CellVal = newFilledArray(CellsAcross*CellsDown, 0); 
var CellIndex = 0;

var InteractiveDots = ({
  initialize: function(canvas, rate) {
    var this_ = this;
    this.canvas = canvas;
    this.width = CellsAcross * CellSize;
    this.height = CellsDown * CellSize;
    setInterval(function(){ this_.draw(); }, rate); 
    
    this.draw();
  },
  draw: function() { 
    var this_ = this;
    var ctx = this.canvas.getContext('2d');
    
    ctx.clearRect(0,0,this.width, this.height); 
    
    for (var i = 0; i < CellsAcross; i++) { 
      for (var j = 0; j < CellsDown; j++) { 
                 CellIndex = (CellIndex+1)%(CellsAcross*CellsDown); 
                 
                 var   below      = (CellIndex+1)%(CellsAcross*CellsDown); 
                 var   above      = (CellIndex+(CellsAcross*CellsDown)-1)%(CellsAcross*CellsDown); 
                 var   left       = (CellIndex+(CellsAcross*CellsDown)-CellsDown)%(CellsAcross*CellsDown); 
                 var   right      = (CellIndex+CellsDown)%(CellsAcross*CellsDown); 
        
        var   aboveright = ((CellIndex-1) + CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); 
        var   aboveleft  = ((CellIndex-1) - CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); 
        var   belowright = ((CellIndex+1) + CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); 
        var   belowleft  = ((CellIndex+1) - CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); 
        
        var CellVectorX   = (CellVal[right]-CellVal[left]);  
        var CellVectorY   = (CellVal[above]-CellVal[below]); 
        
        var hue = ((CellVal[CellIndex])*2.1)%360;        
        
        var NeighbourMix = Math.pow((CellVal[left]*CellVal[right]*CellVal[above]*CellVal[below]*CellVal[belowleft]*CellVal[belowright]*CellVal[aboveleft]*CellVal[aboveright]),0.125); 
        CellVal[CellIndex] = ((((Math.sqrt(1*CellVal[CellIndex]))*(Math.sqrt(NeighbourMix*1)))/1)+0.5)%Calm;  
        this_.drawCell(i+2, j+2, hue, CellVectorX, CellVectorY, ctx);     
      } 
    } 
  },
  drawCell: function (x, y, hue, VectorX, VectorY, ctx) {  
           try {
             ctx.beginPath();  
             
             ctx.fillStyle = 'hsl(' + hue + ',100%,70%)'; 
             
             var xPos = x*CellSize+CellSize*0.7*(VectorX/Math.pow(((VectorX * VectorX) + (VectorY * VectorY)),0.35)) -27;
             var yPos = y*CellSize+CellSize*0.7*(VectorY/Math.pow(((VectorX * VectorX) + (VectorY * VectorY)),0.35)) - 20;
             
             ctx.arc(xPos, yPos, 3, 3, Math.PI*3, false); 
             ctx.fill();
             ctx.closePath();  
           } catch(e) {
             //console.log(e)  
           }
  }, 
  mouseDragged: function(mouse) { 
           var mouseX = mouse.x;
           var mouseY = mouse.y;
           var ctx = this.canvas.getContext('2d');
    
    for (var i = 1-BrushSize; i < BrushSize; i++) { 
      for (var j = 1-BrushSize; j < BrushSize; j++) {   
        this.drawCell(mouseX / CellSize + i, mouseY / CellSize + j, 100, 100,100,0,0, ctx); 
        CellVal[this.getCellIndex (mouseX/CellSize + i,mouseY/CellSize + j)]         =  100;  
      } 
    } 
    
  },         
  getCellIndex: function(x, y) { 
    var index = Math.floor((x%CellsAcross) * CellsDown + (y%CellsDown)); 
    if (index > this.numberofCells) { return this.numberofCells; }
    else if (index < 0) { return 0; } else { return index; }
    
  } 
});

var evtHandlers = ({
  mouse: {
             x: 0,
             y: 0
           },
  initialize: function(viz, canvas){
    this.viz = viz;
    this.canvas = canvas;
    this.canvasPosition = jQuery(this.canvas).position();
    
    this._ev_handlers();
  },
  remove: function(){
    jQuery('body').unbind();  
  },
  _ev_handlers: function(){
    var this_ = this;
    var canvas = jQuery(this.canvas);
    jQuery('body').mousemove(function(evt){
           this_.mouse = {
             x: evt.clientX - this_.canvasPosition.left,
             y: evt.clientY - this_.canvasPosition.top - jQuery(window).scrollTop()
           };
      if (this_.viz.drag) {
        this_.viz.mouseDragged(this_.mouse);
      }                   
    });
    jQuery('body').mousedown(function(evt){
      this_.mouse = {
        x: evt.clientX - this_.canvasPosition.left,
        y: evt.clientY - this_.canvasPosition.top + 
        jQuery(window).scrollTop()
      };                 
      this_.viz.mouseDragged(this_.mouse);    
      this_.viz.drag = true;
    });
    jQuery('body').mouseup(function(){
               if (this_.viz.drag) {
                 this_.viz.drag = false;
               }
      else {
        this_.viz.drag = false;
      }
    });
  }
});

var canvas = document.getElementById('main');
evtHandlers.initialize(InteractiveDots, canvas);
InteractiveDots.initialize(canvas, 83);

Colorful Dots

function newFilledArray(len, val) { var rv = new Array(len); while (--len >= 0) { rv[len] = val; } return rv; } var CellSize = 12; var CellsAcross = 55; var CellsDown = 55; var BrushSize = 4; var BrushStrength = 1; var Calm = 320; // The higher this is, the longer it seems to take to turn chaotic var CellVal = newFilledArray(CellsAcross*CellsDown, 0); var CellIndex = 0; var InteractiveDots = ({ initialize: function(canvas, rate) { var this_ = this; this.canvas = canvas; this.width = CellsAcross * CellSize; this.height = CellsDown * CellSize; setInterval(function(){ this_.draw(); }, rate); this.draw(); }, draw: function() { var this_ = this; var ctx = this.canvas.getContext('2d'); ctx.clearRect(0,0,this.width, this.height); for (var i = 0; i < CellsAcross; i++) { for (var j = 0; j < CellsDown; j++) { CellIndex = (CellIndex+1)%(CellsAcross*CellsDown); var below = (CellIndex+1)%(CellsAcross*CellsDown); var above = (CellIndex+(CellsAcross*CellsDown)-1)%(CellsAcross*CellsDown); var left = (CellIndex+(CellsAcross*CellsDown)-CellsDown)%(CellsAcross*CellsDown); var right = (CellIndex+CellsDown)%(CellsAcross*CellsDown); var aboveright = ((CellIndex-1) + CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); var aboveleft = ((CellIndex-1) - CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); var belowright = ((CellIndex+1) + CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); var belowleft = ((CellIndex+1) - CellsDown +(CellsAcross*CellsDown))%(CellsAcross*CellsDown); var CellVectorX = (CellVal[right]-CellVal[left]); var CellVectorY = (CellVal[above]-CellVal[below]); var hue = ((CellVal[CellIndex])*2.1)%360; var NeighbourMix = Math.pow((CellVal[left]*CellVal[right]*CellVal[above]*CellVal[below]*CellVal[belowleft]*CellVal[belowright]*CellVal[aboveleft]*CellVal[aboveright]),0.125); CellVal[CellIndex] = ((((Math.sqrt(1*CellVal[CellIndex]))*(Math.sqrt(NeighbourMix*1)))/1)+0.5)%Calm; this_.drawCell(i+2, j+2, hue, CellVectorX, CellVectorY, ctx); } } }, drawCell: function (x, y, hue, VectorX, VectorY, ctx) { try { ctx.beginPath(); ctx.fillStyle = 'hsl(' + hue + ',100%,70%)'; var xPos = x*CellSize+CellSize*0.7*(VectorX/Math.pow(((VectorX * VectorX) + (VectorY * VectorY)),0.35)) -27; var yPos = y*CellSize+CellSize*0.7*(VectorY/Math.pow(((VectorX * VectorX) + (VectorY * VectorY)),0.35)) - 20; ctx.arc(xPos, yPos, 3, 3, Math.PI*3, false); ctx.fill(); ctx.closePath(); } catch(e) { //console.log(e) } }, mouseDragged: function(mouse) { var mouseX = mouse.x; var mouseY = mouse.y; var ctx = this.canvas.getContext('2d'); for (var i = 1-BrushSize; i < BrushSize; i++) { for (var j = 1-BrushSize; j < BrushSize; j++) { this.drawCell(mouseX / CellSize + i, mouseY / CellSize + j, 100, 100,100,0,0, ctx); CellVal[this.getCellIndex (mouseX/CellSize + i,mouseY/CellSize + j)] = 100; } } }, getCellIndex: function(x, y) { var index = Math.floor((x%CellsAcross) * CellsDown + (y%CellsDown)); if (index > this.numberofCells) { return this.numberofCells; } else if (index < 0) { return 0; } else { return index; } } }); var evtHandlers = ({ mouse: { x: 0, y: 0 }, initialize: function(viz, canvas){ this.viz = viz; this.canvas = canvas; this.canvasPosition = jQuery(this.canvas).position(); this._ev_handlers(); }, remove: function(){ jQuery('body').unbind(); }, _ev_handlers: function(){ var this_ = this; var canvas = jQuery(this.canvas); jQuery('body').mousemove(function(evt){ this_.mouse = { x: evt.clientX - this_.canvasPosition.left, y: evt.clientY - this_.canvasPosition.top - jQuery(window).scrollTop() }; if (this_.viz.drag) { this_.viz.mouseDragged(this_.mouse); } }); jQuery('body').mousedown(function(evt){ this_.mouse = { x: evt.clientX - this_.canvasPosition.left, y: evt.clientY - this_.canvasPosition.top + jQuery(window).scrollTop() }; this_.viz.mouseDragged(this_.mouse); this_.viz.drag = true; }); jQuery('body').mouseup(function(){ if (this_.viz.drag) { this_.viz.drag = false; } else { this_.viz.drag = false; } }); } }); var canvas = document.getElementById('main'); evtHandlers.initialize(InteractiveDots, canvas); InteractiveDots.initialize(canvas, 83); <canvas id="main" height="440" width="440"></canvas>body { background-color: white; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

URL
http://zamiang.com

I am investigating interfaces, interaction techniques, and visualization methods that help people understand their lives through exploring their own personal information.

Check out my current projects: Poyozo: http://mypoyozo.com Atomate: http://atomate.me Eyebrowse: http://eyebrowse.csail.mit.edu

twitter: @zamiang

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/4rIA/js"></script>

QR Code

Discussion

Questions on this code?

Tags