ART×JS AT FFCONF

452 words ~ 2-4 minsMathieu 'p01' Henri on November 11th, 2016

ART×JS at FFconf

ART×JS was the closing talk at FFconf 2016. The goal was to bring new developer artists to the web by abusing standards and developing a visual understanding of mathematics.

Explaining the fast way to do HSL in RGB color space. - Photo by Seb Lee-Delisle

HSL to RGB conversion is really simple when you look at the color wheel and see the 3 distinct splashes of red, green and blue, one third of a circle apart. You can see it illustrated in the slides below.

Slides, LIVE coding sessions & video

Here are the slides of the talk, the outcome of the LIVE coding session on day one and day two, and the video taken on the second day.

FFConf

FFconf is a lovely conference created and curated by Remy Sharp of JSbin and HTML5 fame. It runs in the Duke of York, twice this year on November 10th and 11th. The lineup was incredible. I still can't believe Remy allowed me on stage with them: I learnt so much about new CSS features, the back stories of emojis, modularity, devops, devtools, accessibility, progressive web apps, ...

A phrase that came again and again at FFConf, beside that Space Jam rocks, was:

It doesn't have to be perfect. Just a little better than yesterday.

And little by little we are all moving in the right direction. Without fear.

ART×JS : intro, setup & goals

This talk was about creating art using code and not being afraid of mathematics, imperfections or twisting standards. During the first 10 minutes I tried to show a few tricks in these areas and lower the barrier people often feel with mathematics and audio/visuals projects.

Then came 30 minutes of LIVE coding to create an audio/visual animation featuring Conway game of life simulation with procedural music, synchronizing the visuals and audio.

When coding on stage, I like to use for the most simple setup possible: a text editor, no libraries, a browser tab pointing to the file straight from the file system and the devtool opened to spot any parsing or execution error.

To save some precious I prepared a boilerplate with a canvas element, a short list of MIDI notes and the basic oscillators to create the music later.

The idea was to go through the thought process and use the most basic setup to show the audience how accessible and rewarding creative coding can be.

Feedback

The audience was really positive about the minimal setup and the result at the end of both sessions. Thirty minute is a short time but I hope this spiked your curiosity and made creative coding more accessible.

Let me know if you have any questions or comments.