Using only the HTML5 canvas tag and Javascript, two pulsing circles are drawn along with a sine wave. the Math.sin() function is used to pulsate the radius and color of both circles.


View Source
Back to IM2490 Week 2
[ Processing.js Experiments ]

var ctx;
// CIRCLE 1 VARS
var dx = 6-(Math.random()*12); var dy = 6-(Math.random()*12);
var y = 250; var x = 250;
var r = 20+Math.random()*80;
// CIRCLE 2 VARS
var dx2 = 6-(Math.random()*12); var dy2 = 6-(Math.random()*12);
var y2 = 250; var x2 = 250;
var r2 = 20+Math.random()*80;

var x3 = 0;
var y3 = 300;

var i = 1;
function draw(){
  ctx = myCanvas.getContext('2d');
  ctx.fillStyle = "rgba(0,0,0,0.008)";
  ctx.fillRect(0,0,800,600);
  // CIRCLE 1
  ctx.beginPath();  
  ctx.fillStyle = "rgba(0,"+Math.round(Math.sin(i*0.25)*255)+",255,0.25)";
  r += Math.sin(i*0.25);
  ++i;
  ctx.arc(x,y,r,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
  if( x < 5+r || x > 795-r) {
    dx = -dx;   
  }
  if( y < 5+r || y > 595-r ) {
    dy = -dy;
  }            
  x += dx;
  y += dy;
  // CIRCLE 2
  ctx.beginPath();  
  ctx.fillStyle = "rgba(0,255,"+Math.round(Math.sin(i*0.125)*255)+",0.25)";
  r2 += Math.sin(i*0.125);
  ++i;
  ctx.arc(x2,y2,r2,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
  if( x2 < 5+r2 || x2 > 795-r2) {
    dx2 = -dx2;   
  }
  if( y2 < 5+r2|| y2 > 595-r2 ) {
    dy2 = -dy2;
  }            
  x2 += dx2;
  y2 += dy2;
  //console.log(x,y);
  ctx.beginPath();
  ctx.strokeStyle = "rgb(255,255,255)";
  ctx.moveTo(x3,y3);
  ctx.lineTo(x3,y3+(Math.sin(i*0.0125)*180));
  x3 += 1;
  if ( x3 > 959 ) {
    x3 = 0;
  }
  ctx.closePath();
  ctx.stroke();
} 
// call a function repeatedly at a set interval
setInterval(draw,33); 

[top]