Point

Now that we have everything set up we can start drawing. The point() function takes two parameters, the x and y values that place it on the canvas. Let's try and draw four points. Write the code below inside the setup() function like this:

function setup() {
    createCanvas(400, 400);
    background(100);
    point(20, 20);
}

If you look in the upper left corner of our canvas, you will now see a small point. It might be hard to spot, so let's make it bigger. In fact, let's make four points.

function setup() {
    createCanvas(400, 400);
    background(100);
    strokeWeight(10);
    point(20, 20);
    point(20, 380);
    point(380, 20);
    point(380, 380);
}

If you have done everything right, you should be seeing this in your browser (you might need to refresh the browser):

The strokeWeight() function changes the size of a point. This function takes one value, and the higher number you give it, the bigger points you will get. The strokeWeight() function actually makes lines bigger too. The line() function in the next section would change if you changed strokeWeight().

NOTE: JavaScript is a case-sensitive programming language. This means that you can't write the strokeWeight() function with a lowercase w. The w has to be the uppercase W. You can see the same with the createCanvas function.

Excercise 1:

Create a dot at the center between each dot that you have already created. The result should look like this:

The solution to the exercises in this book are in the project folders. Remember to try and solve the exercises before you check the solutions.