circle thing

circle-thing.markdown

circle thing

A Pen by Zach Ashworth on CodePen.

License.

index.html

<form action="" id="form">
  <label for="count">Count: </label>
  <input type="range" max="300" min="0" value="4" step="1" name="count">
</form>
<canvas id="canvas"></canvas>

script.js

//THIS CODE IS UGLY AND HARD TO READ (good luck)
//get variables from dom
let form = document.getElementById("form");

var canvas = document.getElementById("canvas");
//setting width and height of canvas
canvas.width = 750;
canvas.height= 750;
var ctx = canvas.getContext("2d");
//declare center of main circle globally
let center = [canvas.width / 2, canvas.height / 2];
//same with radius
let radius = 350;
//count is the number of smaller inner circles
let count = 4;
//multiplier is incremented every time the circle moves
//it is used to keep the inner circles rotating inside
let multiplier = 0;

var cicles=[];
//not implemented yet
// let lastPosition = {x:0,y:0};

//run initialization 
init();
//this just runs the draw() function on a 20 ms interval
function init(){
  //draw() 5/s
  setInterval(draw,20);
}

function draw(){
  //set count to equal the dom variable
  count = Number(form.count.value);
  const circle={"c":{"x":0,"y":0},"p1":{"x":0,"y":0},"p2":{"x":0,"y":0},"p3":{"x":0,"y":0},"p4":{"x":0,"y":0}};

  //close possible open path
  ctx.closePath();
  //reopen new path
  ctx.beginPath();
  //set line colors
  ctx.fillStyle="black";
  ctx.strokeStyle="black";
  
  //increment multiplier to keep inner circles moving
  multiplier +=.008;
  
  //clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  //draw large circle
  ctx.moveTo(center[0]+radius,center[1]);
  ctx.arc(center[0], center[1], radius, 0, 2 * Math.PI);
  
  for(let i = 1;i<count+1;i++){
    //calculate start angle
    let baseAngle = 360 / count;
    //multiply based on value, and multiplier
    let finalAngle = baseAngle * (multiplier+i);
    //convert to radians
    let radians = finalAngle * Math.PI / 180;
    //find x and y (center coordinates) of inner circle(i)
    x = (radius/2) * Math.cos(radians);
    y = (radius/2) * Math.sin(radians);
    
    //caculate diagnal 
    let bAngle = 360 / count;
    //multiply based on value, and multiplier
    let fAngle = bAngle * (multiplier+i+(count*.25));
    //convert to radians
    let radian = fAngle * Math.PI / 180;
    //find x and y (center coordinates) of inner circle(i)
    x2 = (radius/2) * Math.cos(radian);
    y2 = (radius/2) * Math.sin(radian);
    
    //storing canvas adapted coordinates
    let circle = {x:center[0]+(x),y:(y)+center[1],radius:radius/2};
    ctx.strokeStyle="black";
    
    //draw y axis pointer
    ctx.moveTo(circle.x,circle.y);
    ctx.lineTo(center[0],circle.y+y);
    
    //draw diagonal pointer
    ctx.moveTo(circle.x,circle.y);
    ctx.lineTo(circle.x+x2,circle.y-y2);
    
    ctx.moveTo(circle.x,circle.y);
    ctx.lineTo(circle.x-x2,circle.y+y2);
    
    //draw x axis pointer
    ctx.moveTo(circle.x,circle.y);
    ctx.lineTo(circle.x+x,center[1]);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    if(count<80){
      ctx.strokeStyle="red";
      //draw indicators where points touch the red lines
      ctx.moveTo(center[0],circle.y+y)
      ctx.arc(center[0],circle.y+y,5,0,2*Math.PI);
      ctx.moveTo(circle.x+x,center[1])
      ctx.arc(circle.x+x,center[1],5,0,2*Math.PI);
      ctx.moveTo(circle.x+x2,circle.y-y2)
      ctx.arc(circle.x+x2,circle.y-y2,5,0,2*Math.PI);
      ctx.moveTo(circle.x-x2,circle.y+y2)
      ctx.arc(circle.x-x2,circle.y+y2,5,0,2*Math.PI);
      
      
      
      ctx.stroke();
      ctx.closePath();
      ctx.strokeStyle="black"
    }
    ctx.beginPath();

    ctx.moveTo(circle.x+circle.radius,circle.y);
    
    ctx.arc(circle.x,circle.y,circle.radius,0,2*Math.PI);
 }
 ctx.stroke();
 if(count<100)
   {
      drawRedline();  
     
   }

}
function drawRedline(){
  //Draw inner red lines
  ctx.strokeStyle="black";
  ctx.closePath();
  ctx.beginPath();
  ctx.strokeStyle="red";
  ctx.moveTo(center[0],center[1]+radius);
  ctx.lineTo(center[0],center[1]-radius)
  ctx.moveTo(center[0]-radius, center[1])
  ctx.lineTo(center[0]+radius, center[1])
  x = (radius) * Math.cos(0.785398);
  y = (radius) * Math.sin(0.785398);
  ctx.moveTo(center[0]-x, center[1]+y)
  ctx.lineTo(center[0]+x, center[1]-y)
  ctx.moveTo(center[0]+x, center[1]+y)
  ctx.lineTo(center[0]-x, center[1]-y)
  ctx.stroke();  
}