Shelby's Cat: Assignment 1

This program utilizes inputs from both keyboard and mouse, and allows the user to control the directional output. Points serve as guides in a "connect the dots" exercise. When the user clicks on the window, either before or after connecting the dots, the face of a cat appears.

This assignment gave me the opportunity to explore various input methods and the effects of those inputs on the program. Trying to figure out appropriate sets of coordinates for the different elements was an interesting and fun challenge (especially, for some reason, in creating the cat's nose). Meow!


/* Based off of "Coordinates" from the Processing 1.5.1 examples
library, cat allows the user to draw the shape of a cat by connecting
dots with up, down, left, and right arrows. By clicking the window
with the mouse, the face of the cat is then displayed to the user. */

/**
* Coordinates.
*
* All shapes drawn to the screen have a position that is specified as a coordinate.
* All coordinates are measured as the distance from the origin in units of pixels.
* The origin [0, 0] is the coordinate is in the upper left of the window
* and the coordinate in the lower right is [width-1, height-1].
*/

void setup()
{
// Sets the screen to be 200, 200, so the width of the window is 200 pixels
// and the height of the window is 200 pixels
size(400, 400);
background(0);
noFill();
stroke(255);
}

float y = 100;
float x = 60;

void draw()
{
// It is also possible to specify a point with any parameter,
// but only coordinates on the screen are visible
fill (200);
ellipse (60, 100, 10, 10);
point (60, 300);
point (120, 350);
point (280, 350);
point (340, 300);
point (340, 100);
point (280, 150);
point (120, 150);

// Coordinates are used for drawing all shapes, not just points.
// Parameters for different methods are used for different purposes.
// For example, the first two parameters to line() specify the coordinates of the
// first point and the second two parameters specify the second point

// The first two parameters to rect() are coordinates
// and the second two are the width and height

if(key==CODED)
{
if (keyCode==UP)
{
y = y - 1;
if (y < 0)
{
y = height;
}
point (x,y);
}
else if (keyCode==DOWN)
{
y = y + 1;
if (y < 0)
{
y = height;
}
point (x,y);
}
else if (keyCode==RIGHT)
{
x = x + 1;
if (x < 0)
{
x = width;
}
point (x, y);
}
else if (keyCode==LEFT)
{
x = x - 1;
if (x<0)
{
x = width;
}
point (x,y);
}
}
else if (mousePressed)
{
fill (30, 30, 20);
ellipse (150, 220, 10, 10);
ellipse (250, 220, 10, 10);
triangle (190,250,210,250,200,270);
noFill();
arc(175, 270, 50, 50, 0, PI/2);
arc(225, 270, 50, 50, PI/2, PI);
}
}

Assignment 1: Sheema and Claire's Plasma Color Effect

For the first assignment, we chose to focus on modifying the Plasma effect because in the original file, the user could not do anything to control the animation. This gave us an opportunity to incorporate interesting new inputs. Through our modification the animation responds to the cursor as the user moves it across the screen.  By clicking the user can shift the colors of the animation from a cool color palette to a warm one. Using the up and down keys the user can multiply or reduce the number of organic shapes on the screen. All of these commands can be used simultaneously to create interesting new visual outputs, allowing for a more exciting user experience.

Click here to download our zip file.

Assignment 1: Dave's Gamma Target

While exploring and manipulating the Mouse 2D program in the Standard Examples folder and re-writing the code to allow the mouse to control the alpha channel and the grayscale value, I was reminded of a gamma target used to adjust a monitor. After investigating existing examples, I realized that it would be easy enough to write the simple code required although calculating the gamma using the mouse location was a more complex task and not really relevant to this exercise. An example of an embedded gamma test can be seen here http://perso.telecom-paristech.fr/~brettel/TESTS/Gamma/Gamma.html

The application window consists of a grayscale background. The value of the grayscale is controlled by the x-axis of the mouse. The target in the center of the window is composed of a square that’s greyscale value is controlled by the y-axis of the mouse. A series of 1 pixel wide black lines over-write the target every other row. This results in alternating rows of black and grey lines 1 pixel wide. Because of the fine pitch, the human eye will average out the target to a shade of grey.

The background and target values are manipulated until they appear to match. (Try matching the values with your eyes wide open and then squint slightly to see how accurate you were.) In a real gamma test, the values would be compared mathematically to provide a gamma value. This program was merely intended to reproduce the effect, but I can see it being embedded in a web page as a quick means of checking viewing conditions or adjusting the way a single browser page appears without having to readjust the system’s display settings.

The zip file can be found here.

Assignment 1: Reema Bhagat_Processing

For the first assignment, I modified the Translate example in Processing. The original example is very simple, and there is no user input and output. I explored several ways to make the example more exciting by adding an input for the user (clicking the mouse) which results in several outputs (scale change, direction change, and color change). In the original example, the two boxes simply moved across the screen at a different pace. With my modifications, the boxes start off bigger and with a red background. When the user clicks their mouse, the background color changes to yellow, the black box becomes smaller, and it starts to move in a diagonal direction. When the user releases their mouse click, the animation switches back to the red background in which both boxes are the same size and travel in the same direction.

To access the zip file click here.

Assignment 1: Kelly's Color-Changing Animator

For our first Processing exercise, I chose to focus on animation, and how user input can be modified to create interesting, animated results. With this in mind, I modified the existing Processing animator example to create a more whimsical, freeform drawing program. When the user clicks on the screen, a dot is generated of random color and random stroke size. Dragging the cursor will cause the dot to follow, and more to be created that trail after. The randomization elements of the program keep it interesting and create a new, surprising composition each time. However, the user can experiment with duration of mouse clicks and amount of movement to create exciting animated patterns that they control.

Following Charissa's example, click here to access the zip file to run the program.

Assignment 1: Charissa's keyboard-controlled sound player

For my first Processing experiment, I wanted to work with keyboard controls and sound playback. Use the arrow keys to move the cursor. Each "ring" in the image plays a different nature sound. For some reason, it won't run as an online applet, but you can click here to download the zip file and run it from Processing on your own computer.

Crosswalk 2.0

http://vimeo.com/27997819