Processing · drawing basic shapes · verify IntelliJ setup
For this module, we need the following software packages:
If you have these installed on your computer, you can move onto the next step.
If you didn't get a chance to install the required software, please watch the video previously sent to you and follow the instructions for the installation.
Alternatively, if you are familiar with installing software, you can download and install the latest version of the resources from here:
IntelliJ IDEA https://www.jetbrains.com/idea/download/
Locate your IntelliJ application and start it.
A small window might appear asking you if you want to import settings...you don't need to import any settings.
If this is your first time launching IntelliJ, you will be presented with this customising window:
Click on the button to Skip Remaining and Set Defaults.
Click Create New Project.
Something similar to this window should appear:
If your installation says that No SDK exists for the Project SDK (as ours does above), click on the New.. button and locate the version of Java you previously downloaded, for example:
Now that we have a valid Project SDK, click the Next button:
Check the Create project from template box and select the Java Hello World project. Click the Next button.
Rename the project to HelloWorld and click Finish.
Close the Tip window when it appears.
Below, we can see our first project has been created and it contains a Main.java file with Java code in it.
This program, when run, will print Hello World! into the console window. At the moment, we are not concerned with the Java code written here, we are just checking that your installtion of IntelliJ is working properly. We will cover the code in later labs.
To run the program, click the run button.
Hello World! should be printed to the console:
If you are not getting this result, you should flag this to your instructor who can help resolve the issue.
Once you have Hello World! printed to your console, you can exit the IntelliJ IDE.
Go to the directory/folder where you installed your processing app.
You should see a list of files and folders similiar to the image below:
Double click in the processing application (highlighted by the red rectangle).
The PDE (Processing Development Environment) should launch.
As you work through the exercises in this course, you will create many new files. These files are called Sketchbooks.
It is important that you pick a convenient location on your computer to save these sketchbook files to. The following steps show you how to do this.
rect(x, y, w, h) x = x-coordinate of the upper left corner of the rectangle y = y-coordinate of the upper left corner of the rectangle w = width of the rectangle h = height of the rectangle
Using the rect() function, you can draw squares. Just set the width and height to the same number of pixels.
Below the code you wrote previously, try drawing a square that has starts at the (x,y) coordinates of (40,5) and has a length of 20.
Run the code. Did a square appear?
line(x1, y1, x2, y2) x1 = x-coordinate of first point y1 = y-coordinate of first point x2 = x-coordinate of second point y2 = y-coordinate of second point
For our purposes here, we will define an ellipse as a basic oval shape.
The syntax of the ellipse function is:
ellipse(x, y, w, h) x = x-coordinate at the centre of the ellipse y = y-coordinate at the centre of the ellipse w = width of the ellipse h = height of the ellipse
Using the ellipse() function, you can draw circles. Just set the width and height to the same number of pixels.
Try drawing a cicle that has the coordinates (50,80) at its centre and has a diameter of 15 pixels.
Run the code. Did a circle appear?
rect(20,30,50,30); rect(40,5,20,20); line(5,30,20,90); ellipse(85,50,20,60); ellipse(50,80,15,15);
The size() function sets the size of the display window in pixels. It has to be the first line of code in your sketchbook (there is an exception to this that we will cover later).
The syntax of the size function is:
size(w, h) w = width of the ellipse h = height of the ellipse
If the size function is not called, the window will be set to a default size of 100x100 pixels.
Enter the following code in your open sketchbook:
The background() function sets the background colour of the display window.
The syntax of the Grayscale background function is:
background(g) g = gray colour (a number between 0 and 255 inclusive) 0 is black and 255 is white. All numbers in between vary in shades of gray.
In your open sketchbook (after the size() function), type in the background() function, passing a value between 0 and 255 as your colour parameter.
For example, we chose a dark-ish grey:
It is a good idea to save your work as you progress through your labs. From the File menu (Processing on the Mac), select Save As... The folder location you chose earlier for storing your sketches should be displayed. Save your sketch as something like lab00.
At the end of step07, your animation looked like this:
Make the necessary changes so your animation now looks like this image:
The solutions for this lab can be found here.
After unzipping the solutions, it might be a good idea to copy the three folders to your sketchbook folder. From Processing, you could then use File, followed by Sketchbook to easily open them.