JSFiddle - React, Tailwind, and code Playground

by Yorrick Bakker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>

JavaScript

var x = 0;
var y = 0;
var grav = new p5.Vector(0, 13, 0);
var bounce = new p5.Vector(0, -13, 0);
var isbounce = false;
var ymax = 0;

function setup() {
    createCanvas(600, 400);
}

function draw() {
    console.log(ymax, isbounce);
    background(0);
    fill(255);
    ellipse(200, y, 50, 50);

    if (y < 376 && isbounce == false) {
        y += grav.y;
    }
    if (y >= 376) {
        isbounce = true;
    }
    if (isbounce == true) {
        y += bounce.y;
        if (y == ymax) {
            isbounce = false;
            ymax++;
        }
    }
}