User Tools

Site Tools


Intro to processing

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

Homework until next time: Using 2D-shapes, draw some graphics, and have hem change somehow. For example, use a variable to 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

We also tried out the for-loop for stuff that gets repeated a number of times:

    for (int i=0; i<5; i++) //the following will happen 5 times
      rect(55*i, 55, 50, 50); //you can use the counter variable i, if you want to

At the end I gave you this piece of code to help you save a frame for documentation.

 void keyPressed()
  System variables we talked about:
  mouseX: contains the X-coordinate of the pointer as a number
  mouseY: contains the Y-coordinate of the pointer as a number
  Other useful system variables:
  width: contains the width of your sketch as a number
  height: contains the height of your sketch as a number
  displayWidth: contains the width of your whole screen
  displayHeight: contains the height of your whole screen
  Commands we used:
  point();//draw point
  line();//draw line
  rect(); //draw rectangle
  println(); //print out the content of a variable
  random(); //gives you a random number
  noCursor();//hides the mousepointer
  background();//draws background with specified color
  fill();//sets color for shape areas
  stroke();//sets color of lines and frames
  noFill(); noStroke(); //stops using fill and stroke

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.

courses/intro.prototyping.fall.2017.sep19.txt · Last modified: 2020/10/20 05:50 by rickard