Knolling Process: Tiger Mini Rice Cooker

Time Difference Clock

Clock with timeDifference variable. Able to manually insert the time difference to the code to get the time of anywhere you want to know the time of.

Although the modifications to this code are not extensive, I wanted to take the time to figure out how the code works. The code gets values from the computer clock and translates it from a numerical value to radian values so that it can rotate visually around a center of the display window. My modification is a simple one where I added a float variable, timeDifference, so that the user can change the time difference of a location they want to know the time of. The timeDifference variable is added to the existing code before the code translates it to radian values. I also made the second's hand red.

Clock code modification

I first changed the size of the actual popup from a rectangle down to a square that just barely fit the minute ticks- no point in having horizontal space wasted on the screen, only the essentials! 
I then made the background fill from (80) to (500), promoting a simpler color scheme and allowing the user to focus on what’s important; I didn’t see the point in the inclusion of an ugly off-grey circle. 
Next, I altered the thickness of the different hands on the clock. I felt like there wasn’t enough differentiation between them, so I made the second hand half as thick, kept the minute hand the same, and the hour hand 1.5x heavier; now it’s a lot easier to differentiate between them!
Finally, just for fun, I made the actual minute ticks 5x larger; I feel like it “completes” the look for whatever reason. 
/** * Clock.  *  * The current time can be read with the second(), minute(),  * and hour() functions. In this example, sin() and cos() values * are used to set the position of the hands. */
int cx, cy;float secondsRadius;float minutesRadius;float hoursRadius;float clockDiameter;
void setup() {  size(360, 360);  stroke(255);    int radius = min(width, height) / 2;  secondsRadius = radius * 0.72;  minutesRadius = radius * 0.60;  hoursRadius = radius * 0.50;  clockDiameter = radius * 1.8;    cx = width / 2;  cy = height / 2;}
void draw() {  background(0);    // Draw the clock background  fill(500);  noStroke();  ellipse(cx, cy, clockDiameter, clockDiameter);    // Angles for sin() and cos() start at 3 o'clock;  // subtract HALF_PI to make them start at the top  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;   float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;    // Draw the hands of the clock  stroke(255);  strokeWeight(.5);  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);  strokeWeight(2);  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);  strokeWeight(6);  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);    // Draw the minute ticks  strokeWeight(10);  beginShape(POINTS);  for (int a = 0; a < 360; a+=6) {    float angle = radians(a);    float x = cx + cos(angle) * secondsRadius;    float y = cy + sin(angle) * secondsRadius;    vertex(x, y);  }  endShape();}
x

Processing Experimentation: Exploding Puppy

From the original demo "Explode" by Daniel Shiffman, the program takes an image and divides it into tiny pixel squares that create an explode effect outwards in the z-axis as the user moves the mouse laterally across the artboard. 

 

In my edit, I wanted to emphasize the "explosiveness" of the motion and increased the z distance of the pixels. I also changed the pixel size and shape to circles from squares, adjusted the artboard and position of the photo, as well as changing the image to a picture of a puppy. 

However, I noticed that in the demo above, the pixels that are in the darkest part of the image (the puppy's nose) were the last to leave the artboard. Curious, I explored how I could manipulate the order in which the pixels would "explode." The expression in line 31 tells us that as the user moves their mouse at a certain y-coordinate, it manipulates the pixels based on it's brightness. The brightness is affected by how much light is in a hue and the color values range from 0 to 255. Taking that in mind, I tried subtracting the expression by 255. The outcome was exactly as shown below.

The exploding effect worked inversely; the brightest colored pixels leaving the artboard last.