Cycloid

var d = 100 //diameter

var a = 0 // angle

var s = false // is the cirle drawing?

var xp = 10 //x position

var incr = 10

var osc

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES)

  osc = new p5.Oscillator()

  osc.setType('square')

 }

​

function draw() {

  noFill()

  if(!s) stroke(0, 10)

  if(s) noStroke()

  translate(xp, height/2)

  ellipse(0, 0, d, d)

  if(xp > width) xp=0

  xp += incr

  a += incr

  push(); 

  rotate(a);

  stroke('red')

  translate(0, d/2);

  ellipse(0, 0, 5, 5);

  pop();  

  if(d==100) osc.stop()   // if you find the initial radius, you made it! no sound

  osc.amp(0.3)

}

​

function keyReleased() {

  if (key==' ') s = !s    // space bar make you disappear/appear the circle

  if (key=='c') background(255) //make the background clear

  if (key=='r') {  // remove everything and go back to initial value

   background(255)

   d=100

  } 

  if(keyCode === UP_ARROW) { //up arrow for making the circle bigger & frequency higher

    d += incr

    osc.start()

    osc.freq(d*10)

  }

  if(keyCode === DOWN_ARROW) { //down arrow for making the circle smaller & frequency lower

    d -= incr

   osc.start()

   osc.freq(d*10)

  }

}

​