Project 1

Greetings from the Tropics

Learning Intentions

In this learning project, you will be learning to:

Understand the coding-as-drawing framework of p5.js.
Use the p5.js web editor to develop, implement and test code for visuals.
Understand the Cartesian coordinates system and use it to refer to pixels of the p5.js canvas.
Identify geometric features of rectangles, triangles, quadrilaterals and/or circles.
Create rectangles, triangles, quadrilaterals and/or circles of different locations, dimensions and/or colours, using Cartesian coordinates, RGB data and p5.js commands.
Select and use emojis to enrich visuals.
Implement appropriate sequential algorithm and numerical operators to achieve the intended design of visual structures.

Have you ever received a digital greeting card or electronic message via the email or mobile phone? Chances are you not only regularly receive but also send plenty of texts and pictures within your own social network. It is just the modern way in which we communicate or keep in touch with friends and family. In this project, you will be writing computer code to create on a blank electronic canvas a digital greeting card, as shown below, that you can share with friends and family.

p5.js - Coding as Drawing

Many people think that coding is very difficult and only those nerdy students will find it interesting. They sadly do not know that coding can be as easy and cool as drawing. Everyone loves drawing, which is why you sometimes doodle on your Maths or English exercise notebooks. Drawing is a great way to express your ideas and emotions; in other words, to express yourself. It is likely that you currently rely fully on pen and paper to draw. However, there is another way that is cooler and more modern than using pen and paper. Many artists have already used computer code to create stunning digital arts that are often interactive and animated. These artists are not computer scientists but they still learn and write computer code so as to develop their artworks. One of the programming languages they use is called p5.js (https://p5js.org/). Here, js stands for JavaScript, which is a general purpose programming language, used by professional programmers. p5.js is a special collection of code (called library) of JavaScript. The greeting card you have just seen at the beginning of this project is developed in p5.js.

Pixels & the Cartesian Coordinates System

A computer screen is made up with millions of very tiny illuminating dots, called pixel (or picture element), arranged in an organised grid format. Each pixel can be independently controlled to emit different colours and shades. A group of pixels can therefore be manipulated together to display an image.

To draw electronically on a computer screen is to instruct the computer as to which pixel should display which colour. Thus, it is imperative for you (the Instructor) to include the position and dimension (i.e., size) of the image in the instructions so that the computer (the Executor) knows which pixels to control and manipulate in order to display the image at the correct position with the correct dimension.

To indicate the position of an image on a computer screen (or any plane), a very effective method is to adopt the Cartesian coordinates system. The figure below shows the x-axis, the y-axis, the origin of the Cartesian plane, together with all the Cartesian coordinates of the vertices of the rectangles A and B. The grid lines shown here have an interval of 50 pixels.

Move your mouse over the figure and you will see the coordinates of the mouse cursor is displayed in real time.

Cartesian coordinates are an ordered pair of two numbers, (x, y), always separated by a comma and enclosed in brackets. The first number, x, refers to the horizontal position along the x-axis while the second number, y, refers to the vertical position along the y-axis. The most interesting point on the Cartesian plane is the intersection point of the x-axis and y-axis. This point is called Origin, usually represented by O. The coordinates of Origin are (0, 0).

With the help of the Cartesian coordinates system, one possible instruction that can make the computer draw the rectangle A on a computer screen may include:

Step 1: Identify the pixel at (0, 0);

Step 2: count 200 pixels horizontally from the identified (0, 0) pixel towards the right to record their x-coordinates;

Step 3: count 100 pixels vertically from the identified (0, 0) pixel downwards to record their y-coordinates; and

Step 4: make all the pixels whose both x-coordinates and y-coordinates match the recorded coordinates display white colour.

Drawing Rectangles

We can now apply our understanding of the Cartesian coordinates system to instruct the computer to draw rectangles.

First of all, let's sign up for a free account at the p5.js web editor (https://editor.p5js.org/). You are advised to use Google Chrome to access the p5.js web editor. We will be using the p5.js web editor to develop all our projects in this course. It is very easy to use and has plenty of cool features that we will explore later on.

Make sure you always login in to your account before you write any code. Once you successfully login in, you should see your account name displayed on the top right corner of the p5,js web editor.

I have prepared a coding template to get you start with your first p5.js program. Click the link to open up the coding template. Click the Duplicate from the drop down menu of File (at the top left corner) to save it in your own account.

Change the file name to Project 1 by clicking the pencil icon at the end of the current file name. Make sure you save it.

Click the Play button (the red circle with an white triangle in the middle) and you should see the following figure on your screen.

For the time being, you do not need to worried about those texts and numbers you see in the coding template. You will be learning them little by little throughout the course.

On line 7 you should see the draw() function. Remember we have already talked about the idea of coding as drawing in p5.js. So the draw() function is the most important part of p5.js. You will write the majority of your instructions within the curly brackets, {}, of the draw() function. As you can see, there are already three instructions from line 8 to 10 inside the draw() function.

Another thing that you also need to take note is that every command line in JavaScript must end with a semi-colon (;). Check out lines 2 to 4 and lines 8 to 10 to see that they all end with a semi-colon (;).

The last thing for you to take note is line 2: createCanvas(). In the Visual Arts class, a canvas is a piece of cloth on which you can draw. The same applies here in the STEM Coding class. The createCanvas() command prepares an electronic canvas of a particular size so that the draw() function can perform all the drawing action on it. In the coding template, the electronic canvas is of 800 pixels by 500 pixels, as specified by createCanvas(800, 500).

Let's now add another instruction to draw the rectangle A from our previous activity.

The diagram shown on the left explains the command myRect() for drawing a rectangle whose top left corner at (x, y) and whose dimensions are width and height. Please be noted that on the Cartesian plane the horizontal dimension is normally called "width" and the vertical dimension is normally called "height", instead of length.

There are four parameters, x, y, width and height, representing the necessary information you must provide whenever you use the myRect() command. These four parameters must be arranged in the correct order as indicated by the general form: myRect(x, y, width, height) .

To draw the rectangle A, all you need is to type a new line of code myRect(0, 0, 200, 100) into the draw() function after line 10. Be careful that you must place it before the closing bracket (i.e., }) to become part of the draw() function . Also, do not forget to end it with a semi-colon (;).

If you do everything right, press the Play button to see your rectangle drawn.

RGB Colours

So far all the rectangles you have drawn are white. It is time for us to draw some colourful rectangles.

Imagine that you hold a paint brush and is going to paint a red rectangle on the wall. You know you have to first dip you brush into the red paint before the action of painting. The same sequence of actions applies when you want to draw a colourful rectangle on the p5.js canvas. That is, you need to give a specific instruction on the colour, ahead of the myRect() command.

The general form of the particular instruction on colour is fill(R, G, B). The three parameters, R, G and B, stand for the three primary colours: Red, Green and Blue, respectively. Each of the parameters can take on a value from 0 to 255, indicating a specific shade of the colour. 255 indicates the brightest shade and 0 indicates the darkest shade (which is actually black). The figure below shows four shades of red.

In the previous activities, you have only applied one of the three primary colours at a time so there are always two 0s in the fill() command.

By mixing up the three primary colours Red, Green and Blue together, you can get all sorts of pretty colours. It is very easy to find out the RGB data for any particular colour you may have in mind. On Google, use the search phrase "colour picker" and a very convenient tool as shown here will come up for you to pick colours and find out their RGB data.

🚦 Think > Solve > Share > Reflect

How many rectangles are drawn to simulate the ocean waves?
What is the order of the sequence in drawing those rectangles? Which rectangle should be drawn first? Which last?
Given that the canvas size is 800 by 500, with the help of the Cartesian coordinates system, find out the parameter values of myRect(x, y, width, height) for each rectangle.
The RGB data for the colours of the rectangles in order are listed below:
- (66, 100, 244)
- (66, 120, 244)
- (66, 140, 244)
- (66, 160, 244)
- (66, 180, 244)

Use these RGB data and fill() to complete the ocean waves in your own p5.js canvas.

Drawing Triangles

Because the ocean waves on the lower half of the canvas are completed, we should now turn to the upper half of the canvas. There you can see the Castle Hill standing tall. What shape comes to your mind when you think of drawing a hill or mountain?

Triangles are a great geometric shape to mimic the profile of a hill or mountain. Let's now learn how to draw a triangle.

The diagram shown on the left explains the command myTriangle() for drawing a triangle whose three vertices are at (x1, y1), (x2, y2) and (x3, y3), respectively.

There are six parameters, x1, y1, x2, y2, x3, and y3, representing the necessary information you must provide whenever you use the myTriangle() command. These six parameters must be arranged in three pairs as they represent the three paired x- and y-coordinates of the vertices as indicated by the general form: myTriangle(x1, y1, x2, y2, x3, y3) .

You should also understand that it does not matter in which order you type vertices into the myTriangle() command. There can only be one unique triangle to be drawn from any set of three vertices.

Let's now practise using myTriangle() to draw some hills. In the following figure, you can see three triangles. The triangle on the right is drawn by the following code:

fill(237, 155, 14);

myTriangle(150, 0, 200, 100, 350, 0);

Copy the code into your own file, placing them after the ocean waves commands, and press the Play button to see the triangle drawn on your canvas.

Drawing Quadrilaterals

What kind of shape do you know will be formed if a triangle sits on top of a rectangle given the base of the triangle matches the width of the rectangle? The answer is a quadrilateral, meaning a shape with four sides.

Quadrilaterals are a very commonly-seen shape in our everyday life. It is particularly useful for drawing composite shapes. In this section, you will be learning how to draw quadrilaterals and then apply your learning to re-draw the Castle Hill as part of the Assignment 1.

The diagram shown on the left explains the command myQuad() for drawing a quadrilateral whose four vertices are at (x1, y1), (x2, y2), (x3, y3) and (x4, y4), respectively.

There are eight parameters, x1, y1, x2, y2, x3, y3, x4, and y4, representing the necessary information you must provide whenever you use the myQuad() command. These eight parameters must be arranged in four pairs as they represent the four paired x- and y-coordinates of the vertices as indicated by the general form: myTriangle(x1, y1, x2, y2, x3, y3, x4, y4) .

You should also understand that it does not matter which vertex you first type into the myQud() command. However, once you decide on the first vertex, you must select the remaining vertices in a clockwise or anti-clockwise manner. Do not randomly select vertices or you will end up with an unexpected quadrilateral.

Since the Castle Hill is made up of four triangle-rectangle pairs, each pair can be replaced completely with a quadrilateral. The following sequence of figures illustrates a possible design strategy for drawing the four quadrilaterals. The code for the first quadrilateral is already shown to you.

Drawing Circles

What many people love about Townsville is the sunshine almost everyday. The bright and clean sky surely cheers people up, driving away worries or anxiety. Let's now draw the Sun high up in the sky in our greeting card.

The diagram shown on the left explains the command myEllipse() for drawing a round shape whose centre is at (x, y). Round shapes include circles and ovals (i.e., ellipses). A circle is symmetric all around so its width and height are the same (and are commonly known as the diameter). But for ovals or ellipses, their width and height are different from each other.

There are four parameters, x, y, width and height, representing the necessary information you must provide whenever you use the myEllipse() command. These fur parameters must be arranged in the correct order as indicated by the general form:m: myEllipse(x, y, width, height) . You are reminded again that on the Cartesian plane the horizontal dimension is normally called "width" and the vertical dimension is normally called "height".

As shown in the figure to the right, our specific design of the Sun includes three concentric circles to achieve an impression of a radiant sun. The term "concentric" refers to the fact that the circles have the same centre.

Recall the sequential algorithm that you implement to make the ocean waves. You should be able to determine the sequence of drawing these three concentric circles. Did you just say that the biggest circle is to be brawn first, then the middle circle, and finally the smallest circle? You are absolutely right.

The following code will produce the Sun as shown:

  fill(237, 229, 14);

  myEllipse(-200, 200, 90, 90);

  fill(237, 199, 14);

  myEllipse(-200, 200, 65, 65);

  fill(237, 169, 14);

  myEllipse(-200, 200, 40, 40);

Study the code carefully and copy it into your own file.

🚦 Think > Solve > Share > Reflect

Click Project 1 Exemplary Code to open up a complete solution for Project 1. Identify the comments in the exemplary code. Discuss how they help improve the organisation and readability of the code.
Write some comments into your own code for Project 1.

Success Criteria

At the end of this learning project, you should be able to:

Draw a composite shape using quadrilaterals.
Create the reflection image of a composite shape with respect to the x-axis using Mathematics and the transparency setting.
Design, develop, implement and test a night theme for a greeting card using appropriate sequential algorithm, colours, shapes and emojis.
Write comments to improve the organisation and readability of the code.

You should now complete Assignment 1.

Google Sites

Report abuse