Back to blog
Jun 09, 2024
2 min read

Processing

Processing and p5js : easy way to draw and animate on a web page.

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>