For this week, I wanted to manipulate a random logo I designed from before. I referred to one of the class exercises from last week before adding my own spin on the sketch. I wanted to create something that conveyed a sense of “digital corruption”.
Logo for reference
Building the Sketch
I started by loading my logo image and setting up the canvas to match its dimensions using img.width and img. height. The core idea was to divide the image into a grid of tiles, sample the color at the center of each tile using img.get(), and then redraw that tile as a solid rectangle. This creates the pixelation effect.
The tricky part was making it interactive and visually interesting. I added mouse interaction so that clicking and holding reveals the pixelated version, while releasing returns to the original. I also mapped the mouse X position to control tile size (left side = smaller pixels, right side = chunkier blocks) and mouse Y to control color shifting.
To push it further, I added sine wave distortions that create a glitchy, organic movement across the pixelated blocks. Each tile also rotates slightly based on its position and an animated glitchAmt variable, which gives the whole thing a chaotic, digital-decay aesthetic.
Final Results + Reflections
I'm really happy with how this turned out. The contrast between the original black and white image and the corrupted pixelated version creates this interesting "alternative reality" effect. Moving your mouse around while holding down reveals different levels of distortion, which feels almost like you're controlling how much the image glitches out.
The hardest part was definitely getting the color channel shifts and wave distortions to feel right. I had to play around with the math a lot to get something that looked intentional rather than just random noise. The sin() function ended up being super useful for creating that organic, pulsing movement.
If I were to iterate on this, I'd love to experiment with different distortion modes or maybe add some chromatic aberration where the RGB channels separate more dramatically. I also think it would be cool to have the pixelation gradually increase over time rather than being instant.
Corruption I
Corruption II
You can view the sketch here: https://editor.p5js.org/mmcclane1/sketches/I0XF4EV_x