Introduction to Processing-2026

Processing 4

Processing Reference

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

Discussed Comments in our code

2d primitives

• noStroke();//no outline around shapes

• strokeWeight();//changes thickness of outline

• noFill()// no color fill

• 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

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

Your own variables

• Declare, initialize, Use

• global variables vs local

• these can be used in any block of code in our program

  • int= 1,-1,2,10

  • float= 3.14, 2.5

  • string= "text"

• make your own

  • use float variableName();

  • use int variableName();

    • Random function

      • example 

      • Float red = random(255); //pick a random value for red in RGB

      • fill(red, 200, 100); //picks random value for red from above

    • println();//print line to help identify errors

Conditional Stements

• if (______){

• _________

• _________

• }

• > - greater

• < - less

• == equal

• >= great than or equal

• <= less than or equal

• != not equal

• }else{

• _________

• }

• else if(___){

• _________

• }

Day 6

• logical operator

• and= &&

• or= ||

• not= !

Day 7

• Boolean variables

• Loops

  • while

  • for