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 AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary 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.
- HYPERSONIC MANDELBULB A hasty invalid JS1k entry using webGL+Audio. Possibly the first one.
- OOMA The winning bootsector of Outline 2005, featuring two images zooming with experimental music in a valid 480bytes Atari bootsector.
- FIRE Warming up with a 32 bytes fire effect for MSDOS after a few years break from the demoscene for studies and work.
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.