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.

Other recent projects

There are many experiments and projects like ART×JS AT FFCONF to discover other here.

• FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
• VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
• BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
• JS1K 2017 INVITATION JS1k 2017, the yearly 1kb JavaScript contest, is about to start and kuvos asked me at FFConf if I would like to make an invitation demo again. Hell yes! on January 25th, 2017
• ASTRA ASTRA is a JavaScript odyssey in 1002 bytes for Assembly 2016 on August 6th, 2016
• MINICRAFT Tribute to MINECRAFT, voxel flyby in 252 bytes of HTML5 on November 2nd, 2013
• HYPERSONIC MANDELBULB A hasty invalid JS1k entry using webGL+Audio. Possibly the first one. on March 6th, 2013
• MAGIC A cute little intro for the Magic BBS made in 3.5kb for MSDOS on April 11th, 1997

Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.