User Tools

Site Tools


courses:intro.prototyping.fall.2016.sep09

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

courses:intro.prototyping.fall.2016.sep09 [2016/09/06 03:55] (current)
rickard created
Line 1: Line 1:
 +=== Intro to processing ===
  
 +Processing is an open source programming environment and community that can be found at[[http://www.processing.org/|processing.org]] 
 +
 +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:
 +
 +<code java>
 +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
 +}
 +
 +</code>
 +
 +To keep track of the X-coordinate while moving a rectangle we used a variable:
 +<code java>
 +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
 +}
 +</code>
 +
 +We got introduced to IF-statements to make changes when circumstances are met:
 +<code java>
 +
 +  if(Joe > 320) //If variable is more than 320
 +  {
 +    Joe = 0;  //we set variable back to 0
 +  }
 +</code>
 +
 +
 +We also tried out the for-loop for stuff that gets repeated a number of times:
 +<code java>
 +    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
 +    }
 +</code>
 +  
 +<code java>
 +  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
 +
 +
 +  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
 +</code>
 +  
 +For the full info of the use of these commands I encourage you to look up the commands in the[[http://www.processing.org/reference|reference]] part of the processing site. 
 + 
courses/intro.prototyping.fall.2016.sep09.txt · Last modified: 2016/09/06 03:55 by rickard