Creative Coding: Making Visuals with JavaScript

Domestika Course Notes from Unit 2, Video 1: Variables and Functions

This course by Bruno Imbrizi on the Domestika Platform has been excellent so far! He explains the concepts so well, this a fun beginner-level course for anyone interested in JavaScript. The instructor has a brilliant portfolio!

He uses Sublime Text, which I tried out, but after a few uses it’s a $99 purchase, so I jumped back over to Visual Studio Code, which is free and more known and used amongst developers (based on a Stack Overflow Survey).

Helpful Points from The Video:

• Coding is giving instructions to a machine via machine language.

• The machine will use the browser as an interpreter with Javascript.

• HTML handles the data, CSS handles formatting, and Javascript handles the behavior.

• You can see any HTML on a page with the Element Inspector (Ctrl + Shift + I or Command + Shift + I)

• Canvas is the element we can use to drawn on an HTML page

• We can make the canvas with HTML tags, and use script tags to access JavaScript for the canvas.

• In JavaScript we declare variables using let, and we declare them to hold values to reuse them or perform operations (calculations, string manipulations, or object modifications).

• Single quotes is how we can differentiate regular text from variables. We can use double quotes, but can also use single quotes in these cases to help with readability.

• A function is a block of code that performs a task (actions). When we call a function, we are running that chunk of code. A function has opening and closing parenthesis.

• We can use the Console in the Element Inspector to see the messages called out using console.log

• You can put a function into another function. A parameter goes in between the parenthesis.

The parameter below is (a,b).

let multiply = (a, b) => {
    return a * b;
}

console.log(multiply(5, 7));

Setting a variable to an expression is done using =

let canvas = document.querySelector('canvas');

The code snippet above starts with document, which is a Javascript object referring to this HTML document. The dot indicates we want something that is part of this object, querySelector is a function that selects an element from the document. We want the string ‘canvas’

We also need a reference to the canvas context:

let context = canvas.getContext('2d');

Just above is where a parameter is passed as a string. It can be 2d or 3d. This is where we can draw.

fillRect is a function that takes 4 parameters; X, Y, width and height. It creates a new shape, draws a rectangle (or in this case, a square), and filling it with color.

context.fillRect(100, 100, 400, 400);

100 means the white space to the right and down, 100 pixels right and down. 400 and 400 are the pixels that make up the shape.

fillStyle is how we change the color in this case.

context.fillStyle = 'blue';

Below is how we can make a border/outline:

context.lineWidge = 4;
context.beginPath();
context.rect(100, 100, 400, 400);
context.stroke();

The method to draw a circle is arc (context.arc). The middle of the canvas is 600, so x and y are 300 and 300 to balance out the circle. Here we use PI, because angles are in radians, not degrees. PI is used often in JavaScript and is scored as a constant, and accessed with Math.PI

context.beginPath();
context.arc(300, 300, 100, 0, Math.PI * 2);
context.stroke();

We can refer to online documentation, such as W3 School’s HTML Canvas Reference for how to draw elements.