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:

Attractor

Cat

Circles(Phi)

Color tiles (Randomness)

Fractal tree(L-system)

Animated Grid

Lissajous figure

Noise (2DPerlin)

Voronoi

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

The source code is available here.

 

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

Better Client-side storage for popup window

Recently I was asked to create a popup window for a website, the requirements were as follows:

  1. A popup box is to show up a few seconds after the page loads.
  2. Users will be able to dismiss the popup box and the box will not show again for the user for 6 hours.
  3. There will be a different popup box for each page (the site has a few hundred pages), and they show and hide independently.

Continue reading Better Client-side storage for popup window

ReactJS Animation done in two ways

This is an old post and react has changed the way it handles animation since

The React way

ReactJS provides a high-level API: ReactCssTransitionGroup to perform CSS3 Transition based animation. By using ReactCSSTransitionGroup, you get a class change when an item is entering, has entered, is leaving, and has left.

Continue reading ReactJS Animation done in two ways

Setting up Gulp for Front End Develoment

Gulp vs Grunt

I recently made the switch from Grunt to Gulp and I’m pretty happy with it. The difference between Gulp and Grunt is in their setting of tasks. People say that Grunt is “configuration over code” and Gulp is “code over configuration”.  In Grunt each task needs to be configured independently, for example:

Continue reading Setting up Gulp for Front End Develoment