The Ramblings
of
Mr. Nobody

The p5.js Project

Besides being a javascript library, p5.js is a community project, and it's open source. They receive support from the processing foundation, which is supported by donations of users and people interested in the project. I'd like to quote a short sentence from the home page linked above:

We are all learners.

The p5.js Library

From the static point of view, the p5.js library is a tool for drawing shapes. As in a canvas. We can though, achieve a sort of dynamic, living canvas. Here I'll be taking a look at the very basics.

setup and draw

   
    function setup(){ }

    function draw(){ }
   
                        

setup and draw are the two main functions of the program. setup controls static objects, draw controls the dynamic part. Once we wrote all the code in setup, this is kindof the base of our work.
Let's see an example.

function setup(){
createCanvas(300, 400);
background(51); 
}
function draw(){ }

                        

If we know nothing about programming, the words are telling us:

1. create a canvas 300pixels horizontal, 400pixels vertical;
2. background(51) is background's color in greyscale, 0 being black, 255 being white.

Try the code yourself

You can copy and paste the code in p5.js editor, and play with it.

Shapes

p5.js comes with tools for easy drawing shapes. We can draw rectangles, ellipses, cubes and many more. Let's go ahead and draw a couple of shapes here and there. All of them will be part of our Bob Ross-like static canvas.

 
function setup(){ 
let x=200, y=180;
createCanvas(x,y) 
background(51, 25, 128) 
stroke("red")
fill(255, 0, 0, 60)
rect(0,0,60,40)
stroke("#00FF00")
fill(0, 255, 0, 40)
rect(30, 30, 60, 40);  
}
function draw(){ }

                        

Many conclusions can be drawn out of this example. First, there are many ways to specify colors. For starters we can stick to one. The most general of those is rgba, which stands for: red, blue, green, alpha. We'll mostly use rgba syntax. These are some of the functions taking a color as an argument:

• background( )
• fill( )
• stroke( )

By default shapes are filled up with white. Some functions like fill, stroke, noStroke only affect the code coming next, which is very handy. (the correct capitalization in the name is essential).

Rectangles' left corner is by default on page's center. The function takes 4 values; first 2 being the left corner's distance from the center, the other 2 are width and height. We'll see how to change this behaviour to a more intuitive one later.

Last but not least, we can use the noThis functions, named in camelCase way. In fact, any functionName composed by two words use camelCase. Examples: noStroke, noFill, noErase, createCanvas.

Where do I take all this data from

p5.js has a reference page, that we will consult to understand what arguments can we pass to the functions, and what are they supposed to do, and to grab examples!

What we know now

1. There are 2 main functions: setup and draw.
2. The static pieces are specified in setup, dynamics in draw.
3. background, fill, stroke take a color as argument.
4. Functions affect only subsequent code.
5. We can draw different shapes.
6. We can consult the reference page for help.

Alright, now let's do some nice draw!

Hello, World!

let x=600, y=500;
let fontI, fontM
let randomSize
let myXval=x, myYval=y;
let fillString
let myColors = {"brown": [255,225,25,100]}

let fillWithText = (
    x=myXval, 
    y=myYval, 
    fontI=10,
    fontM=32,
    fillString="Hello World!") => {

randomX = random(x)
randomY = random(y)
randomSize = random(fontI, fontM)
textAlign(CENTER,CENTER)
textSize(randomSize)
fill(...myColors.brown)
text(fillString, randomX, randomY)

}

function setup() {
createCanvas(x, y)
background(0)
frameRate(10);
}
function draw(){
fillWithText()
}