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!
