LEARN
TO
CODE
PART
1
(THE BASICS)
This is
PART 1
in the
learning how to code
course for complete beginners using a
wonderfully creative JavaScript library
called
p5.js
. It is simple to use and you
can see your code in action instantly.
This is for anyone of any age, any gender,
no matter your ability. You go through it at
your own pace, play, make mistakes, learn
from those mistakes, create unexpected,
unintentional effect.
Learn through doing, through playing and
experimenting. Just be willing to learn and
not be afraid of failing because you can’t
fail, all you can do is try. And, please try
to enjoy yourself. I certainly did.
The course is broken up into three parts,
with each part having six units. You just
start at the beginning and work your way
towards the end. There is plenty to keep you
busy for quite a while.
The Happy Coder
Part 1 Let’s Get Coding
Contents
Getting started
Unit #1 Let’s get coding Unit #2 Move Randomly Unit #3 Keyboard & Mouse Unit #4 Mapping Time
Unit #5 Translate & Rotate Unit #6 Arrays
Introduction
This is to get you started in using the software. The beauty of this is that there is no software to download, it is web based and you use it straight from the internet as if it was a website.
Another good thing is that it is totally free. You can save your work and share what you have done with your friends or grandchildren. This is a code designed by artists to be easy to use and create wonderful visual graphics whether for art or games.
Links
To learn more visit my website: www.thehappycoder.org
To start your coding go to: editor.p5js.org
There are six units in this book with more being prepared (may appear in draft form on my website). I strongly suggested working your way steadily through them and have a go at all the challenges big and little. Also when you start a new sketch, delete the default one and practice typing everything in. Muscle is memory.
Getting Started
1. Logging in
Use google Chrome web browser (not edge or Internet Explorer) or something similar and type in https://editor.p5js.org and you will get a page like this. This is where you will do your coding in the left hand panel. You will see the output in the right hand panel. Now book mark it so you can access it easily.
If it doesn’t appear in your browser then try chrome or safari.
You do not need to login or sign up unless you want to save your work (recommended for later). If you do then...
Click on the ‘log in or sign up’ and it will take you to this window.
Use your gmail (google account) to log in. If you haven’t got one then I recommend you get one as it is the easiest way to do it.
Note: I have tried numerous times to create an account with my
other email addresses but it has not worked so far, try it you might get it to work
Once you are logged in it should take you to your original page. Next you can setup how you want your page to look and start using the editor.
2. Setting up and using
Across the top you have number of icons and boxes. From left to right...
Run: Circle with a triangle which looks like a play button to run the programme when you have finished typing it
Stop: Circle with a square in it which looks like a stop button
which does just that stops the programme running
Auto-refresh: tick this box and it will automatically run your
programme as you finish typing it (recommended)
File Name: A couple of words followed by a pencil symbol. This is
where you give your code a name. Click on the words (they are randomly generated) and just type whatever you are going to call it.
Settings: On the far right you will see a circle with a cog in it.
This is where you can change your settings. I changed my font to be a bit bigger and went to high contrast theme (recommended). You can also set automatic save.
3. File and save
When you have finished coding (or as you go along) it is a good idea to save it. Go to the very top and click on the file tab.
There you will then get a drop down menu.
New: this creates a new file
Save: this will save the file to the name you have (or haven’t
given it)
Open: opens a list of all the files you have saved
Examples: here are some examples provided by the P5.JS team for
4. Share and duplicate
Duplicate: useful for making copies that you want to alter but
keep the original.
Share: this will give you three options for copying a link so that
you can put it into a website or post a link
Help and Feedback: If you want to search the reference section click on help and feedback and then on resources. It will take you to the web page where you will be able to browse to your heart’s content.
5. Quick introduction to the code
A line of code is just one line of code. A block of code is a few lines of code usually connected in some way but it is not the whole code. A sketch is the complete code.
Using the first example in unit 1 (sketch A1-1). The first line of code:
this happens once and sets the scene. It is a good place to put lines of code that only need to happen once. For instance the next two lines of code:
this creates the canvas or screen that you are going to draw on. Here I have asked it to create one 800 pixels wide and 600 pixels high. You can have any size you want. The next line gives the canvas some colour: background(200), in this case it is 200 which is a grey background between 0 (black) and 255 (white).
The block of code is surrounded by curly brackets {} (braces). This tells the computer where the block of code begins and ends. It does what is in between them:
Next is the following block of code:
The line function draw() is a loop function, which means it will repeat itself forever. In this example we are not drawing or doing anything but this is where you will draw your shapes and text.
function setup()
createCanvas(800, 600)
{
createCanvas(800, 600)
background(200)
}
function draw()
{
// nothing to see here
}
The line of code: // nothing to see here, doesn’t do anything because it starts with // which the computers knows that anything after them on that line is just a comment (or a note). It is a useful skill to comment out lines of code if you have a problem (debugging) where the code isn’t doing what you want it to do.
Unit #1 Let’s get coding
Contents
Sketch A1-1 screen size
Sketch A1-2 background colour Sketch A1-3 fill
Sketch A1-4 stroke
Sketch A1-5 strokeWeight
Sketch A1-6 drawing an ellipse Sketch A1-7 draw a square
Sketch A1-8 draw a rectangle Sketch A1-9 drawing a line Sketch A1-10 colouring a pixel Sketch A1-11 drawing a triangle Sketch A1-12 basic text
Sketch A1-13 text colour
Introduction
You will be introduced to ‘sketches’, these are complete bundles of code. The code that you are to type into the editor are in... this font (courier).
There are some background notes which offer some explanation and
challenges which I recommend you try. You will only learn from
having a go. Create your own challenges. Coding is really nothing more than problem solving, so give yourself a problem to solve. So, to get started, delete the code that appears in the editor and type in your first sketch. The more typing you do the more instinctive it becomes.
RGB colours
Light can be expressed in the combination of Red, Green and Blue. Combine all three you get white. Each value can be between 0 (none) and 255 (maximum)
Red (255, 0, 0) Green (0, 255, 0) Blue (0, 0, 255)
Followed by any combination in between Yellow (255, 255, 0)
Orange (255, 100, 0) Pink (255, 0, 100) Teal (0, 100, 100) etc...
Find your favourite colour. Google ‘RGB colour’ and find websites that will give you all the colours and their values. A good one is www.w3schools.com
The Shapes
Shapes you can draw... Circles Ellipses Squares Rectangles Triangles Lines Pixels Text
You can also draw irregular shapes but that is covered in book 2. For now these shapes will more than suffice.
Co-ordinates
The co-ordinates of any point on the canvas can be described by two number (x, y). The x co-ordinate is described by how many pixels from the left hand edge and the y co-ordinate how many pixels from the top downwards.
This diagram shows you what the co-ordinate system looks like. Sometimes it is a good idea to get a scrap of paper to help visualise what the co-ordinates might be, especially if you have lots of shapes.
Sketch A1-1 (screen size)
Notes
Gives you a box size 600 pixels by 600 pixels. You can change the size to fit your screen. The background colour has a number between 0 (black) and 255 (white), here is a light grey with a number given as 220.
Mini challenges
Try different dimensions, instead of 600 and 600.
Change the background colour to white: background(255)
Book 1 The Basics 14 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
circle(300, 300, 100)
}
The circle
This is the first shape you will draw. The circle is drawn using three arguments, the first one is the x co-ordinate of the centre, the second is the y co-ordinate of the centre, and the third is the diameter of the circle.
Mini challenge
Change the co-ordinates to: circle(100, 400, 100). Change the diameter of the circle: circle(100, 400, 50)
Sketch A1-2 (background colour)
Notes
Gives the background a colour. In this case it is red. To give it a colour you need three numbers (arguments) between 0 and 255. The first one in the brackets tells you how much red. The second tells you how much green. The third tells you how much blue. Think RGB
(Red, Green, Blue). If you put in one number it will give a greyscale colour from 0 (black) to 255 (white)
Mini challenge
Try different colours: background(0, 255, 0) for green,
background(0, 0, 255) for blue
Book 1 The Basics 16 of 28
function setup()
{
createCanvas(600, 600)
background(255, 0, 0)
}
function draw()
{
circle(300, 300, 100)
}
Sketch A1-3 (fill)
Notes
The fill() function fills the circle with a yellow colour (in this example). This will also work for the other shapes (except line() - there is a special one for that)
Mini challenge
Draw two more circles with a different colour of each
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
fill(255, 255, 0)
circle(300, 300, 100)
}
Sketch A1-4 (stroke)
Notes
The stroke() function gives colour the line round the circle. In this instance it is a red colour. This also works for when you draw a line() more on that later.
Mini challenge
Draw two more circles with different colours round each circle
Book 1 The Basics 18 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
stroke(255, 0, 0)
circle(300, 300, 100)
}
Sketch A1-5 (strokeWeight)
Notes
The strokeWeight() function gives thickness to the line round the circle. In this instance it has a thickness of 5 pixels. The default is 1.
Mini challenge
Draw two more circles with different thickness
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
strokeWeight(5)
circle(300, 300, 100)
}
Sketch A1-6 (drawing an ellipse)
Notes
Drawing a basic ellipse. The first two numbers in the brackets define the x and y location of the centre of the ellipse. The third number gives the horizontal diameter and the fourth gives the vertical diameter.
Mini challenge
Draw two more ellipses with different dimensions
Book 1 The Basics 20 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
ellipse(300, 300, 200, 100)
}
Sketch A1-7 (draw a square)
Notes
To draw a square you use the square() function. The first two numbers are the co-ordinates of the top left corner (not the centre). The next one is the length of all the sides.
Mini challenge
Draw multiple squares of different sizes
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
square(100, 300, 200)
}
Sketch A1-8 (draw a rectangle)
Notes
To draw a rectangle use the rect() function. The first two numbers are the co-ordinates of the top left corner. The next two are the length and height of the rectangle.
Mini challenge
Draw more rectangles of different dimensions
Book 1 The Basics 22 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
rect(100, 200, 300, 100)
}
Sketch A1-9 (drawing a line)
Notes
Drawing a line using the line() function. This puts the line diagonally across the screen. From top left to bottom right. The format is line(x1, y1, x2, y2). Where x1, y1 are the co-ordinates of one end of the line and... x2, y2 are the co-ordinates of the other end of the line. In this instance you have drawn a line with one end at (100, 200) and the other end at (400, 300).
Mini challenge
Draw lots of parallel lines
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
line(100, 200, 400, 300)
}
Sketch A1-10 (colouring a pixel)
Notes
To draw a single pixel you use the point() function. The stroke() function gives the pixel a colour. The function strokeWeight() gives it size. By default it will be 1 pixel in dimension which is very hard to see.
Mini challenge
Draw lots of pixels of different colours and sizes
Book 1 The Basics 24 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
stroke(200, 100, 50)
strokeWeight(10)
point(100, 200)
}
Sketch A1-11 (drawing a triangle)
Notes
Draws a triangle using the appropriately named triangle() function. The dimensions of the triangle are given as co-ordinates for each corner (x1, y1, x2, y2, x3, y3).
Mini challenge
Draw a right-angle triangle
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
triangle(200, 100, 300, 300, 100, 500)
}
Sketch A1-12 (basic text)
Notes
Create some simple text. It uses the default font. Default colour is black. The text is in speech marks “abc” or ‘abc’. The first number in brackets is the x position. The second number is the y position. The size of the text is given by the textSize() function, the default is quite small if you don’t use it.
Mini challenge
Add multiple lines of text
Book 1 The Basics 26 of 28
function setup()
{
createCanvas(600, 600)
background(220)
}
function draw()
{
textSize(50)
text("the happy coder", 50, 300)
}
Sketch A1-13 (text colour)
Notes
‘The happy coder’ text using fill() to change the colour (same as for shapes). The default is black. You can also change the colour of the outline of the text using stroke()
Mini challenge
Try different colours
