P5 JS | The Absolute Beginning to Programming World
By: Chandan Kumar
Tags: Nodejs, Programming, Teaching, P5js

Any of them can be a good option to start with, but I didn’t find any of them interesting immediately until I get to a point where I can actually make something with it and not just adding some numbers or finding length of a given string.

From defining a variable to creating a function or a class there a long journey in which students gets to learn lot of concepts of programming and if that’s gets interesting and fun is involved around the learning process the journey gets even more exciting. The journey gets a kick and learnings become fun once the fundamentals are solid and clear.

Suppose you want to teach a 14 year old kid the concepts of programming and you start with telling how do we declare a variable, how do we create function which adds 2 numbers. This may work but it doesn’t seems much interesting.

How about teaching the concepts with a tool which will make the learning fun and gives output on the screen with colours whenever you try something and learn new concept of programming? Also if it can help to create visualisation of some maths shapes on screen by adding some numbers in code? And more?

P5 JS can help you with this!!

What is P5 JS?

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. — https://p5js.org/

I don’t remember how did I get to know about P5 but initially I didn’t find it much interesting until the point where I stared watching video tutorials of The Coding Train The way he explains the things and use P5 to introduce the concepts made me think that why not use it as the first for beginners. Apparently the creator of the channel is also creator of P5.

I’ll highly recommend watching his videos on P5 where he explains about variable, functions and object.

Let’s create something with P5

P5 JS gives an online editor where you can code and try things: https://editor.p5js.org/

P5 has 2 functions which are used in all of it’s programs and those are

setup()

draw()

setup() is where you set your whiteboard where you can start creating something. In this function you can decide how big you want to create your whiteboard and what colour and shape you want it to be.

draw() is where you can specify what you want to draw on your whiteboard whether a circle or a line or an ellipse. And remember this is a digital whiteboard so yes you can also move your things around here and there.

https://editor.p5js.org/ default code

Usually we don’t explain functions as the first thing in the programming in start and there are 4 functions here. Explain them as blackbox if you want or skip till the variable comes in picture.

Now let’s create a circle using which we can start the concept of variable.

On a canvas of 400x400 we have created a circle of radius 150 with it’s centre laying on 200,200 this is simple maths one can relate to, and changing the centre or the radius will change something on the screen.

How cool is that for a new one in the programming world. They hardly have written anything but they can see the output on screen and that’s huge.

Not let’s make it fun and add some colours to the existing circle.

This is just a demo of the simple thing which we can do with P5 and get interest of the learner. Ofcourse there’s a lot more in there with P5 to explain like loops, condition, arrays, objects and classes which are backbone programming concepts.

An example of list of circle can be good to demonstrate the concept of array, show the circle only if it’s bigger than some radius can be example of condition, or combination of both?

These are static example using which you can draw things on screen. These are interesting but to make them even more interesting we need some movement on the screen, humans are always attracted towards movement.

let speed;

let x;

let y; function setup() {

speed = 1;

x = width/2;

y = height/2;

createCanvas(500, 500);

} function draw() {

background(220);

x = x + speed;

y = y + speed;

if (x > 400) {

x = 0;

y = 0;

}

let c = color("yellow");

fill(c);

circle(x, y, 150);

}

I definitely cannot show all the things which P5 can do but it’s lot about the creativity after knowing the framework to a certain limit. Now it’s on you or the learner how they want to use it.

Even if you don’t want to use it for teaching it’s worth a framework or a tool to play with. It’s very similar to quil in Clojure.

Links

P5 JS

The Coding Train

Quil