Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
  <title>CreativeJS graphics playground</title>
  <style>
    canvas { border : 1px lightgray solid; }
    body { margin :0; }
  </style>
  </head>
  <body>
    <script src="http://code.seb.ly/js/creativejs.js"></script>
    <canvas id="creativejs" width='400' height='400'></canvas>
  </body>
</html>
  
 
var canvas = document.getElementById('creativejs'),
    c = canvas.getContext('2d');
var angle = 0; 
var xPositions = []; 
var yPositions = []; 
function draw()  { 
  
  
  c.clearRect(0,0,400,400);
  
  c.save();
  
  c.strokeStyle = rgba(1,1,1, 0.5); 
  c.line(90,0,90,400);
  c.line(0, 310,400,310);
  
  c.strokeStyle = 'green'; 
  c.strokeRect(0, 210,190,190);
  
  c.translate(90,310);
  c.strokeCircle(0,0,80); 
  
  
  var x = Math.cos(radians(-angle)) * 80;
  var y = Math.sin(radians(-angle)) * 80;
  var xcurve, ycurve; 
  
  c.strokeStyle = 'red'; 
  c.rotate(radians(-angle)); 
  
  c.strokeCircle(80,0,3); 
  
  c.line(0,0,80,0);
  
  c.restore();
  
  xPositions.push(x); 
  yPositions.push(y); 
  if(xPositions.length>210) xPositions.shift(); 
  if(yPositions.length>210) yPositions.shift(); 
  
  c.save(); 
  
  c.translate(90,0);
  
  c.strokeCircle(x,210,5);
  
  c.beginPath(); 
  //c.moveTo(x, 210); 
  
  for(var i =0; i<xPositions.length; i++) { 
     ycurve = i + 210-xPositions.length;  
     xcurve = xPositions[i]; 
     c.lineTo(xcurve, ycurve,1);
    
  }
 c.stroke();  
 c.restore();
  
  c.save(); 
  
  c.translate(90,310);
  c.strokeCircle(100,y,5);
 c.beginPath(); 
  
  for(i = 0; i<yPositions.length; i++) { 
     xcurve = 310-i - (210-yPositions.length); 
     ycurve = yPositions[i]; 
     c.lineTo(xcurve, ycurve);
    
  }
  
 c.stroke();
 c.restore();
  
  
  angle+=4;
  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sebpro
0viewers