Help with sine waves

p5.js Coding Questions
1

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
2

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
  
  
  }
}
3

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
4

oh wow thats actually crazy, thank you!