xxxxxxxxxx
53
/************************************************************************
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() ) ;
}