2010-09-03 1st

termat

2010-09-03 03:19:17

License: MIT License

Fork: 0

Fav: 0

View: 272

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 74 lines
HTML 5 lines
CSS 0 lines

2010-09-03 1st

var ctx;
var x,y;
var list=new Array();
function init(){
  var canvas = document.getElementById('canvas');
  canvas.onmousemove=function(e){
        x=e.pageX;
        y=e.pageY;};
  ctx=canvas.getContext('2d');
     var timer = setInterval('update()', 10);
}
function update(){
  ctx.globalAlpha=0.9;
  var b=new Ball();
  b.x=x;
  b.y=y;
  b.vx=8.0*Math.random()-4.0;
  b.vy=8.0*Math.random()-4.0;
  list.push(b);
  ctx.clearRect(0,0,480,480);
  for(var i=0;i<list.length;i++){
    b=list.shift();
    b.x +=b.vx;
    b.y +=b.vy;
    ctx.fillStyle=b.color;
    ctx.beginPath();
    var r=dist(x,y,b.x,b.y);
    ctx.arc(b.x, b.y,r/2.5,0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    if(b.x<-r/2.5||b.x>430+r/2.5)continue;
    if(b.y<-r/2.5||b.y>430+r/2.5)continue;
    if(list.length<200)list.push(b);
  }
}
 
function dist(x0,y0,x1,y1){
  var x=(x0-x1);
  var y=(y0-y1);
  return Math.sqrt(x*x+y*y);
}
 
function hsv(d) {
  var h=(d%360.0)/60.0;
  var i = Math.floor(h);
  f = h - i;
  q = (1 - f);
   switch(i) {
    case 0:
      return [255,f*255,0];
    case 1:
      return [q*255,255,0];
     case 2:
      return [0,255,f*255];
    case 3:
      return [0, q*255,255];
    case 4:
      return [f*255, 0,255];
    default:
      return [255, 0, 255*q];
  }
}
 
var ix=0;
 
var Ball=function(){
  this.x=0;
  this.y=0;
  this.vx=0;
  this.vy=0;
  c=hsv(ix);
  ix=ix+10;
  this.color="rgb("+c[0]+","+c[1]+","+c[2]+")";
};

2010-09-03 1st

var ctx; var x,y; var list=new Array(); function init(){ var canvas = document.getElementById('canvas'); canvas.onmousemove=function(e){ x=e.pageX; y=e.pageY;}; ctx=canvas.getContext('2d'); var timer = setInterval('update()', 10); } function update(){ ctx.globalAlpha=0.9; var b=new Ball(); b.x=x; b.y=y; b.vx=8.0*Math.random()-4.0; b.vy=8.0*Math.random()-4.0; list.push(b); ctx.clearRect(0,0,480,480); for(var i=0;i<list.length;i++){ b=list.shift(); b.x +=b.vx; b.y +=b.vy; ctx.fillStyle=b.color; ctx.beginPath(); var r=dist(x,y,b.x,b.y); ctx.arc(b.x, b.y,r/2.5,0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); if(b.x<-r/2.5||b.x>430+r/2.5)continue; if(b.y<-r/2.5||b.y>430+r/2.5)continue; if(list.length<200)list.push(b); } } function dist(x0,y0,x1,y1){ var x=(x0-x1); var y=(y0-y1); return Math.sqrt(x*x+y*y); } function hsv(d) { var h=(d%360.0)/60.0; var i = Math.floor(h); f = h - i; q = (1 - f); switch(i) { case 0: return [255,f*255,0]; case 1: return [q*255,255,0]; case 2: return [0,255,f*255]; case 3: return [0, q*255,255]; case 4: return [f*255, 0,255]; default: return [255, 0, 255*q]; } } var ix=0; var Ball=function(){ this.x=0; this.y=0; this.vx=0; this.vy=0; c=hsv(ix); ix=ix+10; this.color="rgb("+c[0]+","+c[1]+","+c[2]+")"; };<body onload="init()"> <table border="1"><tr><td> <canvas id="canvas" width="430" height="430"></canvas> </td></tr></table> </body>

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/LUWb/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/termat/LUWb" title="2010-09-03 1st">2010-09-03 1st - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

2010-09-03 1st

tags

Tweet

twitter