Week 9: Live Coding with Hydra

This week I'm using Hydra and p5live to create visuals

HYDRA

Pixelated Oscillator 

In this first sketch, I'm combining an oscillator with pixelate. Pixelate draws hard edges between each color strip, making them blocky. Colorama along with modulateRepeat causes the strips of color to move left and right across the canvas while altering the width of each strip. This creates a wave-like motion. The movement is fast until the screen breaks away to another oscillator that shows a slower moving, wider strip of colors before reverting back to chaos. It's interesting to watch the pace, width, and colors change, especially when the break-away happens in one frame which is very jarring.  

Scaled Kaleidoscope

In this second sketch, I'm scaling the kaleid effect. I start with a star-like shape that begins large and spins clockwise. The edges of the shape move constantly with modulateRepeatX. If that wasn't trippy enough, I'm using scale to shrink the shape into tiny grains of noise before it pops back up to its original size. The colors cycle and are inverted. 

P5LIVE

'HYDRA' Text

This is one of the templates in p5live that I was messing around with. The position of your cursor on the canvas affects the thickness of the text. The higher up your cursor is, the thinner the text and the lower down your cursor is, the thicker the text. It’s fun to make interactive text based elements in p5live.

Hydra Inspired Kaleidoscope

This sketch is inspired by the second sketch I made with Hydra. It also starts off using a template from p5live. I simplified the shape, making it more circular and replaced the wavy cloud-like edges with the shape to be more grainy and noisy. Instead of spinning around, I’ve made this sketch scale inward so you can watch the colors take turns scaling into nothingness.

I prefer Hydra for coding live visuals. It’s a nice break from the P5JS sketches we’ve been doing. With just a few lines of code, I find it easier to make abstract, chaotic visuals with Hydra.