Softer Intro to Creative Coding

One of the things that make p5.js beginner-friendly is that it has a really nice coding editor that you can find right in your browser.No need to install lots of things to your device. Navigate to the p5.js web editor and make sure to click the sign up button. Now you should see something like this:

A coding editor a little bit like the equivalent to MS.Word for writing text, except this is where we write our code.

In the editor you should see the following code:

Let us unpack what we are seeing here. When you run the code you see the result in the preview section on the right and so far all this code does is create a drawing canvas and give it a grey background.

A function is a block of code that can be called again and again because it has a name. Always write the keyword function before the name of the function.

In the first example we have a function called setup(). This function is called once when the program starts and is used to define the screen size and background color. A little bit like the paper you draw on. If you want to learn more about it, you can read about this function in the p5.js documentation here.

The draw() function is always called right after the setup() function and this is where you define code that runt until the program is stopped again. There can only be one deaw() function for each sketch, and the draq() function must exist on order for the code to run continously. Documentation for draw().

Now we want to create our first drawing on the screen, a circle!

This pane here above is actually a little embedded p5.js editor, which also runs your code and shows it directly on this site! Very neat, but I want you to still go back to the other tab where you kept the standalone p5.js editor since it will save your work and make it easy to share.

What we want is to add just one more line of code in our p5.js editor, circle(200, 200, 300);, which we want to make sure to add inside the draw() function. Notice the circle() function takes three arguments (200, 200, 300). Make sure your semicolons and curly brackets are all in order, and then click the play button again. Now you should see this:

When you click run, you should see that you drew your very first drawing, a circle with three values. circle(x, y, d). With the parameters: x coordinate of the center of the circle, y coordinate of the center of the circle and d diameter of the circle.

We just learned about functions and how these are reusable blocks of code that we can call using their names. Next you need to learn about variables. Variables are for storing values and data for later use, and can also be accessed again using their names. Use the var keyword before giving it a name and add the value after assigning it with the = sign.

Next thing we are going to be applying or new knowledge about circles to creatw a flower that is very inspired by the Softer logo. To create a variable, we use the let keyword to define a name and a value.

So what we do here is creating a canvas with a 300 x 300 size. In the draw function, we set the background to a lilac color (with the RGB code 245, 220, 252). Notice that we set variables for the circles x and y coordinates as well as its diameter. The use of nostroke is to makes sure that the circle does not have any black border. Leave this line out if you like the look of the border. It should look like this.

Next we want to start creating the variables we need to vreate our softer flower.
flowerX holds the horizontal position of the center of the flower.
flowerY holds the vertical position of the center of the flower.
petalSize holds the diameter of the petals. petalDistance holds the space between the center of the flower and the four orange petals. Notice that this line uses the petalSize variable to calculate its value! Link to sketch to follow along. This may not seem like a huge difference, but using variables like this sends us well on the way to make a flower shape.

Notice the line starting with //. This is how to make code comments that the cumputer will skip instead of reading and trying to execute. This is the way to annotate the code, i.e. make comments for making the code clearer to ourselves.

Next we want to add a petal! We will add all the petals above the code that creates the center petal. If anything goes wrong, check your code here.

Skipping criminally far ahead in order to finish this tutorial in time, let us take a look at how it looks to add the last three petals to our flower.

Finally, I think we should change the color of our center circle to lilac as well.

Follow this link to check your code.

Predefined code things are usually grouped into what is called libraries that can be imported into the editor. However, some libraries are so used that they are by default imported, which means that you can use them without importing a library. These can also be thought of as built-in methods that comes automatically with the framework.

To find lots of examples of default library functions go to: and then scroll to “programming topics”.

Play around with these functions e.g. the color functions, by adding the line fill(0) see what happens. Add line stroke(255, 100, 10) and see what happens.