A quick data visualization of immigrant populations to the US – made with using p5.js (and other tools 😈).
Planet Music is a sound visualizer on the moon! The current version has a set playlist of 6 songs that can be activated with the media player buttons. The space scene reacts to the sound using a fast Fourier transform (FFT). Here is a sample video:
Try it for yourself here (Notes: please allow ~20 seconds to load. Currently not optimized for mobile)
I’m fascinated by the way sound and images combine, and how we perceive them. I like concerts because the music is accompanied by visual compliments, whether it is lighting, dancing, or (increasingly) digital images and videos on the big screens.
In the big leagues, these visualizations are high-quality animations, often specifically designed for the song that is playing. One that always comes to mind is the animation that accompanied Tiesto’s ‘Escape Me’ during his Kaleidoscope world tour. It was many years ago, and this was the best video I could find:
Amazing production, the visuals really complimented the song; but what about music in the mid-leagues or little-leagues? Is it possible to entertain and engage people with more accessible stuff? This is the avenue I would like to explore for this final project.
My goal is to create a dynamic music visualizer – an accessible sketch that detects something in the music data and provides visual feedback in real (or near-real) time.
Made a spooky foray into video and sound manipulation with p5.js
Friday night! The perfect time for expanding on the API-to-LED work from last week. The improvement now offers a more diverse set of information and utilizes duplex serial communication.
The result is that now we can now use a toggle-switch to see the 1-hour price change of either Bitcoin or Ethereum in the form of LED lights. The position of the attached toggle switch determines which currency is being shown.
The programming also features a p5 sketch that reflects the information being sent through the serial.
For example, in the video below Ethereum has had a modest positive 1 hour price change (0.06%), so it lights up the green LEDs a teeny bit. At the same time, Bitcoin has had a larger, negative price change (-1.16%), so it lights up the red LEDs quite a bit.
The simple joy of making one single LED light turn on returns this week with the first step towards linking the IRL, moving, ever-changing internet to an Arduino.
Using serial communication and an API call, the green and red lights indicate if the price of Ethereum – a popular cryptocurrency – has gone up or down in the past hour, as per Coin Markets Cap.
What is more, this light shines with different intensity depending on the degree to which the price has changed (i.e. bigger increase = brighter green light).
The dice theme continues this week with a p5 program that lets you roll a variety of dice and observe the historical distribution of your rolls.
Play with it here (best done on a computer, not mobile).
Inspired by D&D and my general fascination with stats – this is designed as an interactive and informational tool to observe what distributions can be expected. Compare, for example…
Computational Media is super cool to me for a couple reasons:
I like what we have done so far in p5 because its a very WSYIWG approach to programming. Instead of having to print() every line and interpret it, you can visually see what changing a function or number is doing to your program. Yet I look forward to the challenge of this no longer being available, just now equipped with a new understand of how the computer works, and being able to navigate the internet for the answers I need more efficiently (i.e. how to google like a programmer.
Hi ICM class.
Many many years ago, my friends and I created a “logo” for our “squad” called The Muffin Men. The logo itself is a muffin that reflects the sentiment of the name: funny & cute, but maybe serious?
You can see one (pixelated) rendition of the logo at the top of the page. For this week’s exercise I created the muffin in p5 and it looks like this:
To do this I utilized the p5 Shape reference page and made the muffin out of shapes primarily including the curveVertex() function to make the curves you see around the muffin top. To make the eyes, I tried a different curve function called quadraticVertex(), which I like much better.