My First Ludum Dare- Fussy Kitty

Ludum Dare is a global game jam where people all over the world try to build a game over the course of a weekend.


Multiplayer Christmas Lights!

I've always wanted to make something with arduino and the challenge is normally finding a project I'm interested in. I always thought christmas lights would be a good use for it, since they're literally just led's. However I wanted to do something custom rather than something that had been done over and over. I also wanted to make something the kids could have fun playing with. What I ended up making was a multiplayer webapp game that changes the color of the lights.


PixiJS Filters

Filters allow you to apply post processing effect on objects. These allow you to apply many different pixel based effects similar to filters in tools like photoshop, such as blur.


PixiJS Graphics API

For dynamically drawing content PixiJS has a Graphics display object with a drawing API. This allows us to draw 2D graphics with commands similar to the 2D canvas API. The graphics object needs to be added to the stage like any display object.


PixiJS Sprites

Sprites are display objects that render a texture. They take a single texture as a parameter. Like all display objects they need to be added to our stage in order to render.


PixiJS Texture Loading

PixiJS stores all its textures inside a texture cache which can be accessed in PIXI.utils.TextureCache. To load textures into the cache you need to use a loader. This can be done by creating a new Loader instance or by utilizing a pre-made shared loader.


PixiJS Renderer, Ticker & Stage

In the last post I showed you how to get up and running quickly in PixiJS. In this episode I want spend some time diving a bit deeper into the basics of PixiJS. To do this we have to look a bit at the history of PixiJS to understand where it's been and where it's heading.


PixiJS Getting Started

To download the latest version of PixiJS you can check the releases tab of the github repository here.

Because of browser security restrictions loading local assets directly will result in CORS errors. We'll need to get around this in PixiJS because you can't do much without loading textures. The easiest way to avoid this is to run your code on a server. You can run a local server if you have python installed by opening terminal navigating to your project directory and running python -m SimpleHTTPServer 8000 which will run a local server at localhost with the port defined: localhost:8000. Now simply loading this page should run the index.html file at your project directory without any issues. If you are on python version 3 you should use python3 -m http.server 8000

The quickest way to get started with PixiJS is with a helper class called PIXI.Application. This class combines and abstracts a bunch of common utilities used when making content with PixiJS.

const app = new PIXI.Application({
  view: canvas,
  width: window.innerWidth,
  height: window.innerHeight

PixiJS Introduction

PixiJS is a 2D Graphics Rendering framework for the web.  It was created by Matt Groves to normalize the canvas and webgl APIs into a simple scene graph originally modeled loosely on the Flash API.  Its primary focus has always been on performance so that it is really fast.  Because of this it is primarily a webGL rendering surface with canvas 2d fallback.

To get PixiJS and read more about it you can visit its website  There they have download links examples and other resources for learning as well as a link to the github repository to keep up to date with its development.

Check out the Bunny Mark performance test to get an idea of how fast Pixi is.

You can find the code used for the video intro below.

See the Pen Pixi.js Intro by CJ Gammon (@cjgammon) on CodePen.


Three.js Models Update

In my post on Loading Models in Three.js I was using version 79. Three.js is now at version 100 and some changes have been made to how models are loaded. In this video I describe how to export glTF models from Blender and import them into Three.js. You can read the documentation on loading models into three.js here.