Processing is a flexible software sketchbook and a language for learning how to code. It’s Java-like - but simpler, and can run embedded on a web page.
p5*js is an implementation / “interpretation” of Processing.
Both are very simply ways to learn to draw graphics and create visualisations - my Wa-Tor implementation was built in it. It’s imperative rather than declarative like D3 - which is better, but I found it had much steeper learning curve.
Example
This is how to host it on an Astro page (explaining the extra is:inline
.)
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script is:inline>
function setup() {
createCanvas(400, 400);
}
function draw() {
fill(255);
ellipse(mouseX, mouseY, 80, 80);
}
</script>