Callie’s Page


This is my blog from my first semester at ITP. I have since switched to a Notion blog which you can view here.


Fall 2024


Intro to Physical Comp:



Intro to Comp Media:



Hypercinema:






Week 8 → Parts of a Whole


I liked the demo in class where we sampled a pixel region using get() and then moved it across the screen - I thought it was a pretty cool effect and was wondering what more I could do with that idea. 

I wanted to create a “starburst” effect, where clicking the mouse samples a region of pixels that then appear to disperse across the screen. I thought this could be a cool effect for photos with pops of color in them (a field of flowers, for example) so that the colors could be sampleed and amplified across the entire photo. 



Here’s the result: 





I like how over time the pixels of the photo become abstracted into an entirely new composition, and depending on the regions that the user samples the end results can look completely different: 





Clicking the mouse samples the color of a 15 px by 15 px area. The pixel information is pushed to an array 
function mousePressed() {

  let sampleSize = 15;
  for (let dx = -sampleSize; dx <= sampleSize; dx++) {
    for (let dy = -sampleSize; dy <= sampleSize; dy++) {
      let x = mouseX + dx;
      let y = mouseY + dy;

      if (x >= 0 && x < flower.width && y >= 0 && y < flower.height) {

        // Get color at the sampled pixel using get()

        let color = flower.get(x, y);

    ...
In the draw loop, the effect of the pixels rippling outward is created by assigning the rgb values of the sampled pixels to the image pixels, “overwriting” them to look like a moving line. 






let [r, g, b, a] = ripple.color;

      let index = (int(ripple.x) + int(ripple.y) * flower.width) * 4;
      flower.pixels[index] = r;
      flower.pixels[index + 1] = g;
      flower.pixels[index + 2] = b;
      flower.pixels[index + 3] = a; // Full opacity

Chat GPT helped me come up with the math on this one, but each pixel object in the array basically has an assigned random angle and an x and y velocity to send it on a diagonal path outwards. In the draw loop, the x and y of the ripple object is incremented continuously by the velocity. 



let angle = random(TWO_PI);

     let speed = 1.5;

     let maxDistance = random(50, width);           

     vx: cos(angle) * speed,

     vy: sin(angle) * speed,





I experimented with some other sizes and effects of the ripple “chunks,” and some created interesting effects. 





I could definitely get much more sophisticated with what the pixel pattern is doing instead of just creating simple lines. What if the lines curved, or got thicker, or less opaque? I may keep experimenting.