Processing: Making MousePress, DirectionalLight More Magical

MousePress

Knowing that I wanted to experiment with interactions that involve visual feedback throughout the quarter, I chose the Processing example called MousePress. As the program runs, the user’s moving cursor leaves behind a trail of uniform, black crosses. However, as the mouse is pressed, the crosses left by the cursor are white.

In my experimentation for this assignment, I kept in mind the imagery of “fairy dust” as my goal for the new visual output. As the program runs, the cursor no longer leaves behind a constant stream of crosses unless the mouse is pressed. However, this does not mean that the draw() function is not running the entire time my mouse moves. Rather, the draw() function simply has noStroke() unless the mouse has been pressed. I also altered the code so that the visual output was no longer uniform. By randomizing the colors, stroke weight, stroke length, and opacity, the output becomes a series of diverse crosses that stream out of the cursor’s path. I accomplished this by defining the range of random RGB+Opacity values for stroke color between 0 and 255, and maintaining the cross shape by defining a random, but uniform width "int r" for each cross drawn.

I had hoped to complete the effect by making these crosses “twinkle,” or at least appear askew in different angles, but I was unsuccessful in my experimentation. I would be curious to learn how to randomly rotate the output of the draw() function without completely upsetting the canvas’s axis. Eventually, I would also like to be able to leave a stream of drawings that would continue to animate even after being drawn.

Original code of example is as follows:

/**

 * Mouse Press. 

 * 

 * Move the mouse to position the shape. 

 * Press the mouse button to invert the color. 

 */

void setup() {

  size(640, 360);

  noSmooth();

  fill(126);

  background(102);

}

void draw() {

  if (mousePressed) {

    stroke(255);

  } else {

    stroke(0);

  }

  line(mouseX-66, mouseY, mouseX+66, mouseY);

  line(mouseX, mouseY-66, mouseX, mouseY+66); 

}

My code for "fairy dust" is as follows:

void setup() {

  

  size(640, 640);

  smooth();

  frameRate(40);

  fill(126);

  background(40);

}

void draw() {

  if (mousePressed) {

    strokeWeight(random(0,20));

    stroke(random(0,255),random(0,255),random(0,255), random(0,200));

  

} else {

    noStroke();

  }

  int r = int(random(60));

  line(mouseX-r, mouseY, mouseX+r, mouseY);

  line(mouseX, mouseY-r, mouseX, mouseY+r); 

}

Directional Light

For my second experiment, I explored the lighting examples and borrowed elements from the Mixture example to use in the Directional code. 

This was mainly because I was fascinated by how light reflected off of the rotating surfaces present in Mixture, as opposed to the static spheres in Directional, but I still wanted to focus on one light source rather than the mix of colored lights. To accomplish this, I replaced one of the spheres in the Directional code with a box(), (which would reflect light differently,) and then pasted this bit of code from Mixture:

  rotateY(map(mouseX, 0, width, 0, PI));

  rotateX(map(mouseY, 0, height, 0, PI));

This makes the x-axis upon which both shapes rest (as well as the shapes themselves) rotate according to the position of the cursor. The unintentional (but pleasantly surprising) result ended up appearing as though the sphere was orbiting around a rotating cube. I also added some visual pizzazz by having the light change color according to the direction of the light, AKA the cursor’s X and Y position. This was achieved by defining directionalLight as follows:

directionalLight(255-mouseX, 200, 255-mouseY, -dirX, -dirY, -1); 

In future experimentation, I would like to see how I could use the directional light to cast shadows from one shape onto another. That way, the output would look even more like orbiting planets or moons. I recognize that a similar effect could have also been achieved by having the light source and direction stay constant, rather than following the cursor, but I still wanted to experiment with the moving directional light source for this example.

Original code:

/**

 * Directional. 

 * 

 * Move the mouse the change the direction of the light.

 * Directional light comes from one direction and is stronger 

 * when hitting a surface squarely and weaker if it hits at a 

 * a gentle angle. After hitting a surface, a directional lights 

 * scatters in all directions. 

 */

void setup() {

  size(640, 360, P3D);

  noStroke();

  fill(204);

}

void draw() {

  noStroke(); 

  background(0); 

  float dirY = (mouseY / float(height) - 0.5) * 2;

  float dirX = (mouseX / float(width) - 0.5) * 2;

  directionalLight(204, 204, 204, -dirX, -dirY, -1); 

  translate(width/2 - 100, height/2, 0); 

  sphere(80); 

  translate(200, 0, 0); 

  sphere(80); 

}

New Draw() of Directional Color Code:

void draw() {

  noStroke(); 

  background(0); 

  float dirY = (mouseY / float(height) - 0.5) * 2;

  float dirX = (mouseX / float(width) - 0.5) * 2;

  directionalLight(255-mouseX, 200, 255-mouseY, -dirX, -dirY, -1); 

  translate(width/2 - 100, height/2, 0); 

  rotateY(map(mouseX, 0, width, 0, PI));

  rotateX(map(mouseY, 0, height, 0, PI));

  box(80); 

  translate(200, 0, 0); 

  sphere(80); 

}

Thanks for reading!