As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Wednesday, April 4, 2012

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);
}
}

No comments:

Post a Comment