p5.js and HTML

Niamun

Hi Im doing a web page with HTML and the notpad for my computer class, but it seems like very simple and has lack of stetic, so i want to use p5.js for making the web page and use processing for the banners and decoration, there's a way i can make a website using this both?

GoToLoop

• There are 3 main languages to make web pages: HTML, CSS & JS.
• But among them, only HTML is obligatory.
• W/o a kickstart ".html" file, neither CSS nor JS work!
• Both HTML & JS can add DOM elements to a web page.
• HTML adds elements via <tags> inside ".html" files.
• However, JS can dynamically add & remove elements w/ much more flexibility!
• p5.js is a library focused on the <canvas> element: https://p5js.org/reference/
• But p5.js can add elements to the DOM too: https://p5js.org/reference/#/libraries/p5.dom

Niamun

So with p5js i can do it?

GoToLoop

• You can do it w/ raw JS too. Or some other DOM library like jQuery.
• p5.js is best for adding animations or even simple 2D games to a web page.
• As an example, p5.js' home page always has some cool animation in the background: https://p5js.org/
• And you can find lots more in https://OpenProcessing.org & http://p5js.SketchPad.cc/sp/padlist/all-portfolio-sketches, etc.

Niamun

Do you know a tutorial where they explain how to put that animation to a web?

GoToLoop

You mean a background animation like the 1 in https://p5js.org/? :-/
Sorry, dunno. But I've found this Wikipedia article about CSS property z-index: ^#(^
https://en.Wikipedia.org/wiki/Z-index

GoToLoop

Here's the "index.html" for that p5.js animation sketch:
https://p5js.org/assets/p5_featured/browning/index.html

You can hit CTRL+U in order to view its source. *-:)