// require https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js

// require https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.js

​

const ball = {

  x: 100,

  y: 0,

  size: 20,

  speed: 0,

}

​

const GRAVITY = 1;

const FRICTION = 0.9;

let isDown = true;

let isRight = true;

​

const PUSH_RIGHT = 2;

​

const pane = new Tweakpane.Pane();

​

let attackLevel = 1.0;

let releaseLevel = 0;

​

let attackTime = 0.001;

let decayTime = 0.2;

let susPercent = 0.2;

let releaseTime = 0.5;

​

let env;

let triOsc;

​

​

function setup() {

  createCanvas(400, 400);

  pane.addMonitor(ball, 'speed', {view:"graph"});

  pane.addMonitor(ball, 'speed');

​

  env = new p5.Envelope();

  triOsc = new p5.Oscillator('triangle');

  triOsc.amp(env);

  triOsc.freq(220);

​

}

​

function draw() {

  background(0);

  noFill()

  stroke("white")

​

  ball.y += ball.speed;

  if( isRight ){

    ball.x += PUSH_RIGHT;

  }else{

    ball.x -= PUSH_RIGHT;

  }

  if( isDown ){

    ball.speed += GRAVITY;

  }else{

    ball.speed -= GRAVITY;

  }

  if( ball.y >= height ){

    isDown = false;

    ball.speed *= -1 * FRICTION; 

    hit();

  }

  if( ball.speed < 0 ){

    isDown = true;

  }

  if( ball.x >= width ){

    isRight = false

    hit(false)

  }else if( ball.x <= 0 ){

    isRight = true;

    hit(false)

  }

  circle( ball.x, ball.y, ball.size );    

}

​

const hit = ( isFloor = true ) => {

  const A = abs( map( ball.speed, 0, 20, 0, attackTime ) );

  const D = abs( map( ball.speed, 0, 20, 0, decayTime ) );

  const S = abs( map( ball.speed, 0, 20, 0, susPercent ) );

  const R = abs( map( ball.speed, 0, 20, 0, releaseTime ) );

​

  triOsc.start();

  env.setADSR(A, D, S, R);

  env.play();

  fill("red")

}