Learn To Code (Math + Code Tutorial P5JS)
Math + Coding Lessons for Primary and Highschool Students
This is a beginner’s introduction to math + code. We will be using a language called Javascript and a special library called P5JS to create the smiley face you see bellow. This tutorial is perfect for someone who has never coded before, as it explains everything from the ground up.
To code along go to this link
Setup
The first thing we need to do is set everything up. The library we are using: P5JS needs us to define two functions, don’t worry if you do not know what these are for now just follow along.
Setup is the first thing that is called by the computer, this code initialises everything. The next function is draw, this function tells the computer what to draw to the screen.
Let’s Start Drawing
Update your draw and setup function according to the next code block:
You’ll see a simple back square appear in the output.
The createCanvas() command creates a canvas to the screen that can be drawn upon. The two numbers given inside the brackets specify how big the canvas should be in pixels. Think about this function making a page of a specific width and height that we can draw to. So createCanvas(500,500) creates a page that is 500 pixels wide by 500 pixels tall. createCanvas(400,600) would create a page that is 400 pixels wide by 600 pixels tall.
The Coordinate System
Write this line of code inside draw:
Strive.drawTickAxes()Your code should look like
And with that the output will look like this:
Strive.drawTickAxes() shows the grid of coordinates for our page. In order to draw something, we need to specify where on the screen to draw it. We do this by specifying it’s (x,y) coordinate.
To draw a simple circle we can use the circle() command.
circle(x,y,diameter)The circle command takes three numbers inside its brackets. The centre of the circle x,y and the diameter of the circle. The order we put these numbers matter! circle(50,50,10) is not the same as circle(50,10,50).
Let’s put a circle at some random point say: x: 350, y: 100: with a diameter of 50
The output:
What you will notice is that the coordinate system here is different from the one you learned in school
Computers have the origin (0,0) in the top left corner and Y increases going down. Whereas in math the coordinate system has the origin in the middle with Y increasing going up.
More Shapes
Another shape we can draw is a rectangle.
Note that we specify the top left corner of the rectangle and from there the width and height extend to the right and down. Let’s throw in a rectangle into our code.
Output:
Colour
The drawing looks quite boring right now, we can liven things up with some colour. Adding colour is as simple as adding one line of code before drawing the shape.
fill("red")We use the fill command and we put the name of the colour inside “ ”.
Notice that the fill command sets the colour of all shapes drawn after it is called. So if we want to fill the rectangle a different color to the circle we need to add another fill command before calling rect()
Smiley Face
Let’s start with drawing the face and one eye. The face is pretty simple it is just a large yellow circle in the middle of the screen.
Now let’s add in one eye. We want it to be in the top leftish corner of our large circle. A rough guess I’d say maybe like x: 150, y: 200 and with a diameter between 50–100.
Hold on, wait for a second where is the eye?
Order Matters
The reason we don’t see the eye is that it is simply behind the face. The order we call shapes determine the order they are drawn to the screen. So if we create the eye after the face it should be in front of the face on the page.
Now you
You now have all the tools you need to create the rest of the face. Try the rest on your own. If you do struggle you can find the solution at the end of this article.
More drawing
With these tools and a couple more shapes like triangle and ellipse, you can make some pretty complex and beautiful drawings with very simple code.
It gets cooler
Once you learn more you can create some pretty incredible, visualisations, games and even art.
If you are interested in learning more check out the Strive youtube channel.
Strive https://www.strivemath.com/ offers 1–1 and 1-many live online coding lessons, teaching primary and highschool math through code.
The solution to Smiley Face
This post is part of a 30-day writing challenge I am doing. Every day for 30 days, I am posting an article of at least 500 words. If you notice that I miss a day, I will buy you lunch.
