What is Processing IDE

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

Getting Started

Basic coding structure of Processing IDE is divided into 2 parts :- void setup() and void draw().

void setup() - This part of code will be executed only once. void loop() - This part of code will be executed continously infinite times.

size()

To spawn a window, we need to give a command for it, which specify its width and height. Syntax - size(width, height, renderer);

As you can see, it summoned a blank window with width 640 and height 320. In renderer part, you can specify which redering engine to use. For example, if you input 'P2D', it means 2D graphics renderer that makes use of OpenGL-compatible graphics hardware. P3D is for 3D graphics and there are many more. If you didn't specify the type of renderer, it will pick up default renderer. If you want to summon the window in full screen mode, you can enter your computer resolution in size() function, or, you can use fullScreen() which only takes renderer as input (it will be fine if you don't specify any)

background()

Now, to set a background, we will call background() command Syntax - background(Red,Green,Blue), background(grayvalue), background(img)

Let's try running this command in void setup() -

Now, let's try using gray value,

We can even set an image in background, but for that, first we need to define a variable for image using 'PImage', which we will look into that later

Drawing Shapes

Let's start with drawing lines For drawing a shape, you must know how coordinate system works in windows. The top left corner in the window is considered to be origin. Top edge is considered as X-axis, left edge is considered as Y-axis (Going downwards will result in increase in 'y' coordinate, going right will result in increase in 'x' coordinate)

The syntax for line command is - line(x1,y1,x2,y2), where (x1,y1) is coordinate of first end point of the line and (x2,y2) is coordinate of second end point of the line

As you can see, a black line is drawn. But what if we want to draw different colors, width of lines? So for changing colors, we use a command before line command, that is, stroke()

Syntax - stroke(R,G,B), stroke(gray)

So, before giving any shape command, to specify it's outline color, we need to use stroke command before it.

For changing it's width, we will be using strokeWeight(), similar to stroke() command,

As you can see, it got super thicc :)

Now, let's move on to different shape. Let's try Rectangle now

Rectangle -

Syntax - rect(x,y,w,h), rect(x,y,w,h,r), rect(x,y,w,h,tl,tr,br,bl) where, (x,y) is coordinate of reference point of rectangle (The location of reference point depends on rectMode(), which will be covered later. For default, it is it's top-left corner's coordinate) w - Width of rectangle h - Height of rectangle r - Radii of all corner tl - radius for top-left corner tr - radius for top-right corner br - radius for bottom-right corner bl - radius for bottom-left corner

Let's try changing stroke size and color

As you can see, the thickness got increased, and outline changed to purple (cz we set stroke to purple)

What if? What if I want to change the white color present inside the rectangle. For that, we will use fill()

Syntax - fill(R,G,B), fill(gray) It is similar to stroke command

Execution Time!!!

What if? (2) What if we don't want to fill any color inside it (Like it automatically adopts background color?)

Yup, for that, we can use noFill() Syntax - noFill()

What if? (3) What if we don't want outline in similar way?

Similar to noFill(), there exist noStroke()

What if? (4) What if we use both command at once :) ?

Now, if you remember correctly, I talked about rectMode()

This command takes type of mode as an input and decide the reference point poisition in the rectangle

The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height.

Ellipse

To make an ellipse, we use command ellipse() Syntax - ellipse(x,y,c,d) (x,y) is the reference point of the ellipse (Depends on ellipse mode, in default, it is at center) c - Width of the ellipse by default d - Height of the ellipse by default

Similar to the rectMode(), there is ellipseMode() for ellipse.

The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height.

ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height.

ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.

Executing it,

Arc (Automation and Robotics Club :p)

For making an arc, we can use arc() Syntax - arc(x,y,c,d,start,stop,mode) or arc(x,y,c,d,start,stop) (x,y) is coordinate of reference point of arc's ellipse (We can change the reference point of ellipse by using ellipseMode()) c - width of the arc's ellipse by default d - height of the arc's ellipse by default start - angle to start the arc, specified in radians stop - angle to stop the arc, specified in radians

Types of mode :- OPEN, CHORD, PIE

Fun Fact

Try to guess the result here, will the screen be green, red or mix?

That's right, the window's graphics only get updated when the code jumps from end of void draw() to start of it.

Assignments

Rotating Line :- Show it in class
Rotating Rectangle :- Classwork
Pendulumn :- Homework