Knolling an Electronic Drumset

Map no map

I opened the example file "Map", hoping to be able to do something with interactive maps like Google Maps. However, all I could do with the example to see an orange circle scale and fade as I move my cursor around. It wasn't the map I was looking for but still fun to explore what it can do. I made small changes to the code:
1) changed the canvas size
2) changed the movement variable from mouseX to mouseY
3) changed the color of the circle
4) change the position of the circle

void setup() {
  size(800, 600);
  noStroke();
}
// changed the canvas size
void draw() {
  background(0);
  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
  float c = map(mouseY, 0, width, 0, 175);
  // changed from mouseX to mouseY. I want the shape to scale based on
  // the vertical movement of my cursor
  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
  float d = map(mouseX, 0, width, 40, 300);
  fill(125, c, 100);
  // changed the color. exoeriment of RGB values and how it displays on screen
  ellipse(width/4, height/4, d, d); 
}
  // changed the position of the circle

Pulsating Recursion

For this assignment I modified the Recursion example, as shown below:

/**
 * Recursion.
 *
 * A demonstration of recursion, which means functions call themselves.
 * Notice how the drawCircle() function calls itself at the end of its block.
 * It continues to do this until the variable "level" is equal to 1.
 */

void setup() {
  size(640, 360);
  noStroke();
  noLoop();
}

void draw() {
  drawCircle(width/2, 280, 6);
}

void drawCircle(int x, int radius, int level) {                 
  float tt = 126 * level/4.0;
  fill(tt);
  ellipse(x, height/2, radius*2, radius*2);   
  if(level > 1) {
    level = level - 1;
    drawCircle(x - radius/2, radius/2, level);
    drawCircle(x + radius/2, radius/2, level);
  }
}


I liked the idea of recursion but I wanted to add some dynamic elements: Here's my final code:

/**
 * Pulsating Recursion.
 *
 */

int rspeed = 2;
int xspeed = 1;
int r;
int x;
int y = height/2;

void setup() {
  size(640, 360);
  noStroke();
}

void draw() {
  background(130);

  rspeed = changeSpeed(0,150,r, rspeed);
  xspeed = changeSpeed(-200,200,x,xspeed);

  r = r+rspeed;
  x = x+xspeed;

  drawCircle(width/2+x, r, 10,y);
}

int changeSpeed(int min, int max, int input, int inputSpeed){
  if(input > max || input < min){
    inputSpeed = inputSpeed*-1;
  }
  return inputSpeed;
}

void drawCircle(int x, float radius, int level,int y) {             
  float tt = 60 * level/4.0;
  fill(tt);
  ellipse(x, y+120, radius*2, radius*2);   
  if(level > 1) {
    level = level - 1;
    drawCircle(x, radius/1.2, level,y);
  }
}

To do this, I added a loop that incremented the radius and x-position of the recursive circles. To increment these values I created a function called changeSpeed that makes it easy to modify the dynamics of the pulsating circles. While the initial recursive pattern was cool, I modified it to be more simple, so that it acted like a pulse. To do this, I made all the circles concentric and added several more layers of recursion.

Knolling a Hairdryer

Knolling a Guitar Tuner

Horizontal Hues

This original code allows processing to generate a series of vertical rectangles depends on the width of the rectangle and the width of the screen. By tracking the change of X coordinate of the mouse, it generates new rectangles with different hues and then overlay on top of the older ones.

In my modified code,  I changed the background color from Black to white by alternating the RBG value. I  also modified the code to generate horizontal rectangles instead of vertical ones. Moreover, it now tracks the Y coordinate of the mouse and populates hue values base on that coordinate.

Modified Code: 

// Change from int barWidth to barHeigth, and change the int to a value that can be divided by the screen height. 
int barHeight = 72;
int lastBar = -1;

void setup()
{
  size(640, 360);
// change HSB ( Hue, Saturation, and Brightness) of the color now depending on canvas width
  colorMode(HSB, width, width, width); 
  noStroke();
// background color change from black to white 
  background(255);
}

void draw()
{
//change from mouseX to mouseY, now the int whichBar is depended on the Y coordinate of the mouse.
  int whichBar = mouseY / barHeight;
  if (whichBar != lastBar) {
    int barY = whichBar * barHeight;
// change fill mouseX to mouseY now the hue will depend on the Y coordinate of the mouse
    fill(mouseY, width, width);
//change the rects from vertical to horizontal  
    rect(0, barY, width, barHeight);
    lastBar = whichBar;
  }
}

Original Code: 

int barWidth = 20;

int lastBar = -1;

void setup() 

{

  size(640, 360);

  colorMode(HSB, height, height, height);  

  noStroke();

  background(0);

}

void draw() 

{

  int whichBar = mouseX / barWidth;

  if (whichBar != lastBar) {

    int barX = whichBar * barWidth;

    fill(mouseY, height, height);

    rect(barX, 0, barWidth, height);

    lastBar = whichBar;

  }

}

Rectangles and Vanishing Lines

Here is the original code:

size(640, 360);
background(0);

int gridSize = 40;

for (int x = gridSize; x <= width - gridSize; x += gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    noStroke();
    fill(255);
    rect(x-1, y-1, 3, 3);
    stroke(255, 100);
    line(x, y, width/2, height/2);
  }
}

Here is my remixed code:

void setup(){
size(640, 360);
background(255);

int gridSize = 60;
int halfGrid = 30;
int fullGrid = 90;
}
void draw(){

 int gridSize = 60;
 int halfGrid = 30;
 int fullGrid = 90;

  background(0);
  rect(mouseX, mouseY, 15,15);
  line(mouseX + 15/2, mouseY + 15/2, width/2, height/2);

  for (int x = gridSize; x <= width - gridSize; x+= gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    noStroke();
    fill(0,255,255);
    rect(x , y , 15, 15);
    stroke(255, 45, 10);
    line(x+15/2, y+15/2, width/2, height/2); 
  }
  }

//failed attempts at other experiments:
// here I was trying to add more rectangles in between the current animation that could shift together along x axis
  for (int x = fullGrid; x<= width + halfGrid ; x += gridSize) { //not sure why it stops making rectangles in the middle here
  for (int y = fullGrid; x<= height - fullGrid; x += gridSize){  // also not sure why it doesn't go down y axis here
    fill(255, 0, 0);
    rect(x, y, 20, 20);
 
  }
  }
}

What I changed:
I was able to change the colors, sizes, whereabouts, and strokes of the rectangles in the original code, as well as add my own rectangle attached to a line that would follow the mouse around. I tried and failed to add another section of rectangles (the red ones) that would appear in between the blue rectangles and be able to have all of them slide together along the x axis. However, I couldn't even get the rectangles to go across the whole width I wanted.