Coordinating Everything

Educator notes


Introduction and Inspiration

Below, there’s a video that introduces the whole Art Programming Basics module. How to install Processing and start coding? Check the installation instructions below the videos.




How to Install Processing?

To make all kinds of visual creations, you first need the right software running on your computer. In this module you learn to program using the Processing language, and for that, you need to install a software called Processing IDE. Processing works with Windows, Mac OS X and Linux. 

Your First Visuals

Transcript


Do this

Change the numbers inside the ellipse-command and see what happens.

Find one cool example from the File menu and run the code. Examine the code a bit.


Educator notes


Form Some Circles


Do this
Change the first two numbers in the ellipse-command and answer the questions below.

The bigger the first parameter is, the...
The bigger the second parameter is, the...
Where is the origo point (0, 0) in the drawing canvas? Try to use those numbers as a location for an ellipse and see where the shape appears!

Educator notes


The Coordinate System

In order to draw things in Processing, you’ll first need to understand the coordinate system that determines the locations of everything on your canvas.

In the example below, the grid represents the canvas of your Processing program with a 500 x 500 coordinate system. There is one ellipse on the canvas.


Do this

Move your cursor across the canvas above and see how the numbers change. The numbers represent the x- and y-coordinates of the cursor in the Processing environment.

Answer the questions below!


What is the coordinate point in the upper-right corner?
What is the coordinate point in the upper-left corner?
What is the coordinate point in the lower-left corner?
What are the coordinates of the ellipse?

size(500, 500);
ellipse(500, 0, 30, 30);
Add the two lines of code to Processing and run the program. Where does the ellipse appear?

Educator notes


You Don’t Have to Remember Everything!



https://processing.org/reference/

https://processing.org/reference/strokeWeight_.html

What can you do on the Processing Reference website?
What does the command strokeWeight do? Check the documentation linked below to find out!

Educator notes