p5js

codeswing.json

{
  "scripts": [],
  "styles": [],
  "scriptType": "module",
  "template": "true"
}

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js" integrity="sha512-4P0ZJ49OMXe3jXT+EsEaq82eNwFeyYL81LeHGzGcEhowFbTqeQ80q+NEkgsE8tHPs6aCqvi7U+XWliAjDmT5Lg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app"></div>

script.mjs

// import p5 from "https://cdn.skypack.dev/p5";
import chroma from "https://cdn.skypack.dev/chroma-js";

const mySketch = p => {
    let maxSize = 500;
    let wspeed = 1.66;
    let hspeed = 1.33;
    let w = 0;
    let h = maxSize;
    let r = 0;

    // Calling p5.js functions, using the variable 'p'
    p.setup = () => {
        // Creating a canvas using the entire screen of the webpage
        p.createCanvas(window.innerWidth, window.innerHeight);
        p.strokeWeight(5);
        p.background(255);

        console.log("p5.js setup function executed!");
    };

    p.draw = () => {
        // Clear the frame
        p.background(255, 50);

        // Draw an ellipse
        p.translate(p.width / 2, p.height / 2);
        p.rotate(r);
        p.fill(0, 1);
        p.stroke(5);
        p.ellipse(0, 0, w, h);

        // Updating rotation and increment values
        r = r + 0.015;
        w = w + wspeed;
        h = h + hspeed;
        if (w < 0 || w > maxSize) wspeed *= -1;
        if (h < 0 || h > maxSize) hspeed *= -1;
    };

    p.windowResized = () => {
        p.resizeCanvas(window.innerWidth, window.innerHeight);
    };
};

new p5(mySketch, document.getElementById("app"));

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}