var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
var circles = [];
var lines = [];
var xoff = 0;
var angle = 0;
class Circles{
constructor(x, y, rad, color){
this.x = x;
this.y = y;
this.anchx = x;
this.anchy = y;
this.rad = rad;
this.color = color;
}
getLine(){
return new Lines(this);
}
move(){
// move the center of rotation
// to the center of the sketch
translate(width/2, height/2);
// rotate around the center of the sketch
rotate(40);
}
render(){
noStroke();
fill(80);
ellipse(this.x, this.y, this.rad, this.rad);
}
}
class Lines{
constructor(circle){
this.circle = circle;
}
render(){
stroke(0);
line(width/2, height/2, this.circle.x, this.circle.y);
}
}
function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight);
canvas.parent("canvas");
for(let i = 0; i < 9; i++){
circles.push(new Circles(width/3, height/2, 150, 80));
lines.push(circles[i].getLine());
}
}
function draw() {
background(50);
ellipse(width/2, height/2, 300, 300);
lines.forEach( (x) => {x.render();});
circles.forEach( (x) => {x.render(); x.move();});
}
This is the result when i run it. First i don’t know why it is displaying like this because i put the translate()
with width/2 and height/2, it should be rotating with the axis at the middle of the screen. So i would like some help on displaying this “circles” array around the big circle, and also rotating them. Also the lines are’nt being drawn, just one and it is even in front of the big circle.
