Skip to content

A2 - Variables in JavaScript

Variable name rules in JavaScript are the same as for Python:

  • Only letters, numbers and underscores are allowed
  • A variable name cannot start with a number

Variable name conventions are similar (by "convention", I mean not enforced, but highly recommend and usually done):

  • Variable names start with a lowercase letter
  • Variable names are descriptive of the data they hold
  • Unlike Python, instead of separating multi-word variables by underscores, we use camel case. Camel case means the first word of the variable is fully lowercase, and the remaining words are capitalized. So, the variable volume_of_circle in Python might be volumeOfCircle in JavaScript.

p5js has some built-in variables:

  • width - the width of the canvas
  • height - the height of the canvas
  • mouseX - the current x position of the mouse
  • mouseY - the current y position of the mouse

We can create our own variables with the let statement:

let age = 16

Here are a few ways to work with variables:

let age = 16

// Set `age` to a new value.
// We don't use `let` here, since the variable already exists.
age = 22

// Three ways to increment a variable by one:
age = age + 1
age += 1  // Replace 1 with whatever number you want to increment by
age++ // This notation only works if you're incrementing by one

Example

The program below is what you will be provided with in this assignment's template. Note that we're using the "red, green, blue" version of the fill function. In the example, the red component of the circle colour is determined by the mouse's Y position, and the green and blue components are always 100.

let circleX = 10

function setup() {
    createCanvas(720, 400);
}

function draw() {
    grid()
    fill(mouseY, 100, 100)
    circle(circleX, height/2, 30)
    circleX++
}

function mousePressed() {
    circleX = random(10, width/2)
}

This example contains three functions that p5js calls automatically:

  • setup gets called on startup
  • draw gets called on each frame refresh (about 60 times per second)
  • mousePressed gets called anytime a mouse button is clicked

Notice that the circleX variable is declared outside of either function. This makes it global, meaning it will be accessible to all functions, and will also retain its value between draws. This example also introduces the random function provided to us by p5js, which is similar to Python's randint.

Your Task

Learning Goals

  • Use one or more variables built into p5js, such as width, height, mouseX, or mouseY
  • Declare, use, and modify your own JavaScript variables
  • Use both local and global variables

Suggested Task

Run the update script. Open the folder Unit-1/a2 in VS Code, then open index.html using the Live Server extension to ensure it works (you should see a grid, and a circle slowly moving to the right).

Modify the template, making use of both the built-in variables as well as you own variable(s) in your own creative ways. Some ideas of things you could try:

  • Make a growing shape
  • Make a shape constantly change colour, or that changes when the mouse is clicked
  • Allow the mouse to move a shape along the x-axis, but make it stay in a constant place on the y-axis
  • Make either the x or y mouse coordinate determine the size of a shape
  • Make a shape move either vertically or diagonally
  • Make a shape change to a random size on each mouse click
  • Add multiple shapes that do different things