termat/colorcircle.markdown

## colorcircle.markdown

      
    Raw
  

              colorcircle.markdown
            
          
    ColorCircle

A Pen by termat on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Color Circle</title>
</head>
<body>
<table border="1"><tr><td>
<canvas id="canvas" width="400" height="400"></canvas>
</td></tr></table>
</body>
</html>

## script.js
var ctx;
var x,y;
var r=2;
var tx=-999;
var ty=-999;
var list=new Array();
var width=400;
var height=400;
window.onload = function() {
  init();
};
function init(){
  var canvas = document.getElementById('canvas');
  canvas.addEventListener('mousemove',
      function(e){
        if(tx==-999){
          x=e.pageX;
          y=e.pageY;
        }
    },false);
  ctx=canvas.getContext('2d');
     var timer = setInterval('update()', 10);
}
function touchDown(event) {
  x=event.touches[0].pageX;
  y=event.touches[0].pageY;
}
function touchMove(event) {
  x=event.touches[0].pageX;
  y=event.touches[0].pageY;
}
function touchUp(event) {
  x=-999;
  y=-999;
}
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,width,height);
  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();
    r=dist(x,y,b.x,b.y);
    ctx.arc(b.x, b.y,r/3,0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    if(b.x<-r/3||b.x>width+r/3)continue;
    if(b.y<-r/3||b.y>height+r/3)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]+")";
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Color Circle</title>
	</head>
	<body>
	<table border="1"><tr><td>
	<canvas id="canvas" width="400" height="400"></canvas>
	</td></tr></table>
	</body>
	</html>
	var ctx;
	var x,y;
	var r=2;
	var tx=-999;
	var ty=-999;
	var list=new Array();
	var width=400;
	var height=400;
	window.onload = function() {
	init();
	};
	function init(){
	var canvas = document.getElementById('canvas');
	canvas.addEventListener('mousemove',
	function(e){
	if(tx==-999){
	x=e.pageX;
	y=e.pageY;
	}
	},false);
	ctx=canvas.getContext('2d');
	var timer = setInterval('update()', 10);
	}
	function touchDown(event) {
	x=event.touches[0].pageX;
	y=event.touches[0].pageY;
	}
	function touchMove(event) {
	x=event.touches[0].pageX;
	y=event.touches[0].pageY;
	}
	function touchUp(event) {
	x=-999;
	y=-999;
	}
	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,width,height);
	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();
	r=dist(x,y,b.x,b.y);
	ctx.arc(b.x, b.y,r/3,0, 2*Math.PI, true);
	ctx.closePath();
	ctx.fill();
	if(b.x<-r/3\|\|b.x>width+r/3)continue;
	if(b.y<-r/3\|\|b.y>height+r/3)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(xx+yy);
	}

	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]+")";
	};