[Welle
- The line moves and change colours, when your voice is loud.
It is crossmedia environment, the waves continue to the next device. - The starting point was to create an animation that works across different devices (cross device animation). For the animation I wanted to deepen my knowledge p5.js libary of javascript, furthermore it was important to me that the animation triggers an interaction with the user or the viewer.
In the first drafts I worked with music, so that I could better narrow down the spectrum of the visualization and find a style of design that is also interesting across multiple screens. I replaced the music with the microphone to get the desired interaction with the viewer. Instead of the wave being affected by the high and low tones or the volume of the music, the volume of the sounds or voice of the viewer was modeled.
The rectangles of the wave become larger due to the higher volume and colors become more reddish. The placement of the wave is controlled by chance and the length of the wave adjusts to the device. For screens of the same size, the wave moves, across all devices continuously. For different devices, each wave gets its own length.
I guess that the solution with Heroku (Cloud Application Platform) is not quite optimal, because there is often a delay in drawing the wave, but in the current phase (Corona) there are many influences, like slow internet, which complicate the optimization analysis. In addition, it was difficult to find a better technical solution in this short module, but this would be an optimization point of the animation.
MODUL + TASK:
WEB 2
briefing: develop a crossmedia environment and make an interesting animation for it
WHEN + DURATION:
4th Semester Digital Ideation, 2 weeks
SOFTWARE:
node, socket
p5js.orgFURTHER INFORMATION
Link to Welle page →
[Fadenkreuz
It is a drawing tool in the shape of a crosshair and in given colours
MODUL + TASK:
Kick Start Programming
briefing: create with P5 * js a interesting picture in the size of a post card
WHEN + DURATION:
1rst Semester Digital Ideation, 3 days
SOFTWARE:
p5js.orgFURTHER INFORMATION
works only for Desktop