This sketch = https://editor.p5js.org/Anne-Laure/sketches/JVZGJQuEF

​

Source 3.6 Graphing Sine Wave - Nature of Code

https://www.youtube.com/watch?v=JLAc9hMtcxk

​

we want an array of dots oscillating together, with a slight difference

​

Previous sketch : https://editor.p5js.org/Anne-Laure/sketches/MZjesITNK

Next sketch :     https://editor.p5js.org/Anne-Laure/sketches/JvsbgQAtr

************************************************************************/

​

let angles = [] ;

let angleV = [] ; 

let r = 18 ;

​

function setup() {

  createCanvas(600, 400);

  let total = floor( width / ( r*2 ) ) ; // an integer

  // create all the angles for every spots

  for ( let i = 0; i < total + 1 ; i++ ) {

    angles[ i] = map( i, 0, total, 0, 2*TWO_PI ) ;

    angleV[ i] = 0.01 + i / 100 ;

  }

}

​

function draw() {

  background(0);

  translate( 300, 200 ) ;

  // fill( 252, 238, 33 ) ;

  noFill() ;

  strokeWeight(6) ;

  stroke( 252, 238, 33 ) ;

  // strokeWeight( 4 ) ;

  beginShape() ;

    for ( let i = 0; i < angles.length ; i++ ) {

​

      // sinus a valeur entre -1 et 1 on veut le voir entre -200 et 200

      let y = map( sin( angles[i] ), -1, 1, -150, 150 ) ;

​

      // we translated the center and the canvas

      let x = map( i, 0, angles.length, -300, 300 ) ;

      // line( x, 0, x, y) ;

      circle( x, y, r ) ;

      vertex( x, y ) ;

      angles[i] += 0.02 ;

      // angles[i] += angleV[i] ;

    }  

  endShape() ; 

  // console.log( frameRate() ) ;

}