Doing generative art in D3

I gave a talk recently at CampJS on doing generative art in D3. The talk focused on creating generative art using D3.js from the following aspects:

  • Colour, noise, texture and shapes
  • Randomness, algorithms and interactive processes
  • Generated typography and animated brushes for custom artwork

Here are the demos I had:




Color tiles (Randomness)

Fractal tree(L-system)

Animated Grid

Lissajous figure

Noise (2DPerlin)


When I have time I’ll write separate blog posts about the algorithms used in each example.

The source code is available here.


My first robot!

An ant robot called miniMia
An ant robot called miniMia

I made my first robot following an example from the book Make: Arduino Bots and Gadgets . It is able to walk forward and backward, and detect obstacles and turn left and right accordingly.

It uses:

  1. Arduino Uno
  2. Mini servo * 2
  3. Metal clothes hanger * 1
  4. Ultrasonic sensor * 1
  5. Hot glue gun
  6. Blu Tack

The schematic is fairly simple:


And source code for the bot is available here.

Here is a video of it in action. The movement is a bit glitchy, I couldn’t adjust the legs into the best angle for movement.

Chloe & Miro

Recently I was asked by a few people about an illustration project I did a few years ago, so I think I will put some of them here, the name of the project is “Chloe and Miro”, the tools used were crayons, markers, water colours, colour pencils, etc.

When I was doing these drawings, I just started learning doing web development. How time flies!

And I didn’t have a cat then, Miro was my imaginary friend. Now I do have a cat! Her name is Mia and I love her!

8 Continue reading Chloe & Miro

Configuring and running Angular Protractor Tests

Recently I’ve been working on a digital party invites project. It’s written in Angular and both Unit testing and E2E testing. It uses firebase as the backend.

The unit testing part is easy, I use Karma with Jasmine, the setup was quite straight forward, you can read more about it here. However, I found the e2e testing with Protractor was quite a bit more complicated, here is how I did it.

Continue reading Configuring and running Angular Protractor Tests