// 

// Jared Donovan, 2022

// 

// Illustrates how sin can animate movement and color. Includes

// sliders that the user can adjust frequency and amplitude.

​

let sldAmp;

let sldFreq;

let sldShift;

​

// Draws a sin wave across the screen based on the x position.

function setup(){

  createCanvas(400, 400);

  sldAmp = createSlider(0, 50, 10);

  sldFreq = createSlider(1, 1000, 50);

  sldShift = createSlider(0, 200, 0);

}

​

function draw(){

  background(200);

  noStroke();

  fill(0);

  let px = 0;

  let py = 0;

​

  // Iterate across the width of the canvas.

  for (let x = 0; x <= width; x += 5) {

    // Calculate a y value based on the current x.

    // Divide by 50 to stretch the wave horizontally.

    // Value of y will be between -1 and 1.

    //let shift = sldShift.value();

    let shift = frameCount;

    let freq = sldFreq.value();

    let samp = (shift + x) / freq;

    // let samp = mouseX + x;

    let y = sin(samp);

​

    // Scale value of y up to -35...35

    let amp = sldAmp.value();

    y *= amp;

​

    // Draw a rectangle at x, y. Add 50 to y to center vertically.

    noStroke();

    rect(x, 50 + y, 2, 4);

    stroke(0);

    line(x, 50 + y, px, 50 + py);

    px = x;

    py = y;

  }

  fill(255);

  stroke(0);

  let x1 = width / 2;

  let y1 = height / 2;

  let freq = sldFreq.value();

  let samp = frameCount / freq;

  let yOff = sin(samp);

  let amp = sldAmp.value();

  yOff *= amp;

  y1 += yOff;

  let c = map(yOff, -50, 50, 0, 255);

  fill(c);

  circle(x1, y1, 50);

}