Introduction to Processing

Processing is a flexible software sketchbook and a language for learning how to code. The Processing language has it's roots in Java and is geared to be easy for beginners to learn how to code. The Processing software is used by thousands of visual designers, artists, and architects to create their works. Projects made in processing have been exhibited in art museums, and music performances.

Download Processing:

Introduction to Coding in Processing- Day #1

defining the canvas
- size(x,y); //this line of code represents the size of the canvas you will use for your project with "x" representing the width and "y" the height
- background(R,G,B); // the fill color of the background using RGB in numbers from 0-255 for each color, a single number will return a shade of gray
2D primitives (shapes)
- circle(x,y,size); //Draws a circle to the screen
- line(x1,y1,x2,y2); //Draws a line (a direct path between two points) to the screen
- rect(x,y,width,height) //Draws a rectangle to the screen
- square(x,y,size)//Draws a square to the screen
- rectMode(Center)// changes how a rectangle or square is drawn
- fill(R,G,B); // color of the shape fill

Introduction to Coding in Processing- Day #2

Discussed Comments in our code
2d primitives
- noStroke();//no outline around shapes
- strokeWeight();//changes thickness of outline
- noFill()// no color fille
- arc(x,y,w,h,radians(),radian());// how to draw and arc
- ellipse(x,y,w,h);//an ellipse, circle,oval
- added 4th argument to fill, alpha transparency

Introduction to Coding in Processing- Day #3

Blocks of Code
- a block of code is denoted by {}
- void setup(){} //runs once to setup your program
  - things you might put in setup
    - canvas size
    - background (sometimes)
    - load images
    - fonts
- void draw(){} //main loop of your program
  - things that may go in draw
    - 2d primitives
    - floating variables
    - background(sometimes)
- void mousePressed(){}// event that only happens when mouse clicked
  - refresh the background for example
Variables
- built in variables
  - mouseX, mouseY, width, height
- make your own
  - use float variableName();
  - use int variableName();
    - example
      - Float red = random(255); //pick a random value for red in RGB
      - fill(red, 200, 100); //picks random value for red from above

Introduction to Coding in Processing- Day #4

global variables
these can be used in any block of code in our program
- int= 1,-1,2,10
- float= 3.14, 2.5
- string= "text"
if (______){
_________
_________
}
> - greater
< - less
== equal
>= great than or equal
<= less than or equal
!= not equal
}else{
_________
}
else if(___){
_________
}
logical operator
and= &&
or= ||
not= !