# Help with sine waves

https://editor.p5js.org/johnbeesley/sketches/UBFN-z8ob

i have this sketch ^ and its going all well, but i cant figure out how I can make the circles go different ways, and make a sine wave.

i have the sine wave out of all the circles but im trying to figure out how I can create a sine wave from those circles.

if yall could help that’d be swell

1 Like

You have 400 circles, did you know?

You really only need 17.

``````var xSpacing
var yV;
let circles = []

function setup() {
xSpacing = 25;
yV = new Array(floor(400, xSpacing));

createCanvas(400, 400);

for (let i = 0; i < 17; i++) {
var xV = i * xSpacing;
circles.push(new Circle(xV, 600, 30, 30, 50));
// print(i);

}
}

function draw() {
background(220);

for (let i = 0; i < circles.length; i++) {
circles[i].show();
circles[i].move();
}
}

class Circle {
constructor(x, y, r, one, two) {
this.x = x;
this.y = y;
this.r = r;
this.one = one;
this.two = two;
}

show() {
ellipse(this.x, this.y, this.r, this.r);
}

move() {
this.y = sin(frameCount / this.one) * this.two + 200

}
}
``````

Here, I gave each circle and id, which is which number it is along the line of circles.

Then I made the y position depend on the id as well.

``````var xSpacing
var yV;
let circles = []

function setup() {
xSpacing = 25;
yV = new Array(floor(400, xSpacing));

createCanvas(400, 400);

for (let i = 0; i < 17; i++) {
var xV = i * xSpacing;
circles.push(new Circle(i, xV, 600, 30, 30, 50));
// print(i);

}
}

function draw() {
background(220);

for (let i = 0; i < circles.length; i++) {
circles[i].show();
circles[i].move();
}
}

class Circle {
constructor(id, x, y, r, one, two) {
this.id = id;
this.x = x;
this.y = y;
this.r = r;
this.one = one;
this.two = two;
}

show() {
ellipse(this.x, this.y, this.r, this.r);
}

move() {
this.y = sin(this.id*TWO_PI/17.0 + frameCount / this.one) * this.two + 200

}
}
``````
1 Like

oh wow thats actually crazy, thank you!