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 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.
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 experiments
There are many experiments and projects like ART×JS AT FFCONF to discover other here.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversay of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- 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.
- BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks.
- CODING⯌ART AT RENDER CODING⯌ART at Render 2017 was part of my series of talks + live coding aiming to inspire new web developer artists.
- COPTER CRUISE A simple Commanche-like that won the 20lines 'Terrain' contest at the OzoneAsylum in July 2004
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.