Skip to content

Instantly share code, notes, and snippets.

@ashworth-zach
Created November 17, 2019 17:59
Show Gist options
  • Save ashworth-zach/6643a82f67b35e0d4eb0e31e670f9965 to your computer and use it in GitHub Desktop.
Save ashworth-zach/6643a82f67b35e0d4eb0e31e670f9965 to your computer and use it in GitHub Desktop.
circle thing
<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>
//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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment