Nature of Code: Walker

Introduction

Recently, I purchased Daniel Shiffman book The Nature of Code and wanted to share my experimentation here. You might already know Daniel for his YouTube channel named The Coding Train.

If you want to give it a try, you can just read it online, no need to purchase the paper version.

Daniel uses p5.js in his book, but I decided to implement this using Pixi.js instead. Pixi.js is a fast 2D rendering engine built on WebGL, and it integrates much more naturally into a modern web project like this one.

The walker example with Pixi.js:

Walker

Code

Now that I have this setup, I can also show some code, which is also pretty neat. Below is the render function of my Walker class:

app.ticker.add(() => {
  walker.tick(app.screen.width, app.screen.height);

  gfx.clear();
  gfx.rect(0, 0, app.screen.width, app.screen.height).fill({ color: BG_COLOR });

  const currentFrameCount = walker.frameCount;
  for (const circle of walker.circles) {
    const alpha = walker.alphaIncrement * (walker.n - (currentFrameCount - circle.frameCount));
    const hue = circle.frameCount % 360;
    gfx.circle(circle.x, circle.y, walker.radius).stroke({ color: `hsl(${hue}, 100%, 50%)`, alpha, width: 1 });
  }
});

Anyway, that was just a fun little example. I’ll go back to reading the book now.

Cheers! 👋