Project Description

My home page - check out the bouncing animals.

I have been hacking parts of my web-site. In May 2024, I started rebuilding the home page using PixiJS.

It has been interesting & took some time; additionally, I opted to use Node.js with Typescript & Webpack. It took some time to get it configured and to build nicely. Like one thing, I did not want to have all the assets appearing in the root folder. The page is set up such that the HTML is over top of the HTML canvas where PixiJS is doing it's stuff. I wanted to keep the project organized & modular with multiple Typescript modules & having a css page.

Once that was done, I could focus on creating a little animated scene in PixiJS. This involved loading textures, creating sprites & doing some animation in the ticker callback to update the page.

Working with PixiJS was familiar & also different. I know enough now to do more with it 👍🏽.

// Listen for animate update
app.ticker.add((time) => {
  // Continuously rotate the container!
  // * use delta to create frame-independent transform *
  container.rotation -= 0.01 * time.deltaTime;

  UpdateWorld(app, time);
  UpdateAnimals(app, time);
});

I created a starter project & made it public in GitHub.