Simple P5JS-BS5 Template

A P5JS-BS5 Framework: Stage

A simple 'F4' Template
F4
Power(JS), Style(CSS), Structure(HTML), Flexibility(BS5)

F4?! Yeah! The 'Fantastic Four' (HTML, CSS, JavaScript and Bootstrap5) are used in this p5js template!

Use it as a launching pad for your own work.

What is P5JS?

It is a free online framework that makes it easier to do animations with JavaScript!

Make sure that the links to p5js and Bootstrap5 are up-to-date after you use the template. Versions can make a difference.

Quick Template for CHS p5JS Exercises:

CodeHS offers the ability to write P5JS (Processing) Apps without needing a traditional HTML/CSS framework.

We've created a simple template for most of the start-up work you might need in that ecosystem:

var myWidth, myHeight;
var myCanvas;
var myGray;
var fr;

function setup(){
    print("...setup...");
    myWidth = myHeight = 400;
    myCanvas = createCanvas(myWidth, myHeight);

    colorMode(HSB, 360, 100, 100);
    myGray = color(0, 0, 95);

    background(myGray);
    angleMode(DEGREES);
    fr = 60;
    frameRate(fr);

    noStroke();
}//end setup

function draw(){
    print("...draw...");
    noLoop();
}//end draw

...loading...