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.

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.

Let’s Start Drawing

Update your draw and setup function according to the next code block:

The Coordinate System

Write this line of code inside draw:

Strive.drawTickAxes()
circle(x,y,diameter)

More Shapes

Another shape we can draw is a rectangle.

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")

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.

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.

The solution to Smiley Face

EFSG8 | Founder at Strive Math | Founder at Quillo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store