# Interaction Umeå Wiki

### Site Tools

courses:intro.prototyping.fall.2014.sep30

#### Intro to processing

Processing is an open source programming environment and community that can be found atprocessing.org

Homework until next time: Using 2D-shapes, draw some graphics, and have hem change somehow. For example change the value of color, size, position, movement.

We learned to draw 2D stuff with code like this:

```void setup()// This is where we prepare stuff
{
size(640, 480);//size of canvas
background(0);//color of background
fill(200);//color filled areas
stroke(255, 0, 0);//color of lines
}

void draw()//This is where the magic happens
{
rect(70, 70, 100, 100);//draw a rectangle
}```

To keep track of the X-coordinate while moving a rectangle we used a variable:

```int Joe; //Naming the variable, and stating it's a number

void setup()// This is where we prepare stuff
{
size(320, 240);
Joe = 10;//setting inital value
}

void draw()//This is where the magic happens
{
background(0);//redraw background
Joe=Joe+1; //increasing the variable by one
rect(Joe, 70, 100, 100);//drawing the rectangle using the variable as x-coordinate
}```

We got introduced to IF-statements to make changes when circumstances are met:

```  if(Joe > 320) //If variable is more than 320
{
Joe = 0;  //we set variable back to 0
}```
```  System variables we talked about:
width: contains the width of your sketch as a number
height: contains the height of your sketch as a number
mouseX: contains the X-coordinate of the pointer as a number
mouseY: contains the Y-coordinate of the pointer as a number

Commands we used:
point();//draw point
line();//draw line
rect(); //draw rectangle
ellipse();//draw ellipse or circle

noCursor();//hides the mousepointer
background();//draws background with specified color
fill();//sets color for shape areas
stroke();//sets color of lines and frames```

For the full info of the use of these commands I encourage you to look up the commands in thereference part of the processing site. 