Converting Processing sketch to a P5.js sketch

After completing the processing example. I start to look at how I can place this within a website. I found Daniel Shiffman has tutorial videos using P5.js. It uses the javascript language as well but it uses also has an HTML file to draw the canvas in a web browser rather and a Java applet running on its own.

I thought it would be the best way to start.

I downloaded an example, The files needed for this to work, are the javascript p5 libraries to reference the code used within the sketch.

It also included an HTML index file so the web Browser can load the used files.

In the header of the HTML files, it is important to add the sketch file and libraries used. Such as the example files.

You must include the libraries and assets in the folder the website will be hosted so all the javascript sketch and website works.

Converting from processing to P5.js is not straight forward. Below is example from the p5.js website to change from processing syntax to p5.js syntax.

function setup() change from void setup() to function setup() {
createCanvas(640, 360); change from size() stroke(255); is the same noFill(); is the same }

function draw() change from void draw() { background(0); is the same for (var i = 0; i < 200; i += 20) change from int i to var i {
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); is the same } }

Fortunately, there is a website that tries to convert a processing sketch into a P5.sketch which makes this stypes much easier.