Storing Things in Code

A declaration special case:

let xValue = 1;

function setup() {
  let xValue = 21;
}

we can declare a variable with the same name twice with a function becuase of scope
but we don’t really want to

If you are declaring a number of variables without immediately initializing them, you can save some vertical space in your code editor by declaring them all on the same line while using a single let keyword. The example below declares four different variables all on one line, separated by commas:

let circleX, circleY, speed, jumpHeight;

Fixed Values vs. Changeable Values

https://codepen.io/lsuddem/pen/BVRVYL

System Variables

The p5.js library includes a series of built in variables that allow you to monitor the status of certain aspects of your device and use them as ways to interact with your projects. These variables are known as **System Variables.** Take a look at the embedded code below to see an example of some common System Variables in p5.js: Since every variable in this example is a System Variable, we cannot declare or initialize them in our code like we would with custom-built variables. Their declaration occurs inside of the larger p5.js library, and their initialization/updating occurs differently based on the variable. _**width**_ and _**height**_ are variables that hold the current size dimensions for the project's canvas and are initialized when the `createCanvas()` function is called. Open this code on CodePen or copy it into your P5 Web Editor, then change the argument inside of `createCanvas()` to see how updating those values also updates these variables. The values inside of _**mouseX**_ and **_mouseY_** are updated every time you move your mouse cursor across the canvas. Using these variables, you can update the location of an object (like we're doing to one corner of the triangle) or use their current values in a calculation to generate changeable arguments.

https://codepen.io/lsuddem/pen/OEmaYw

Variable	Use
`mouseX`	current location of mouse on the canvas’ X axis
`mouseY`	current location of mouse on the canvas’ Y axis
`pmouseX`	previous location of mouse on the canvas’ X axis
`pmouseY`	previous location of mouse on the canvas’ Y axis

Variable	Use
`key`	current key pressed (ASCII keys only)
`keyCode`	current special key pressed (ENTER, UP_ARROW, etc.)
`width`	current width of the canvas in pixels
`height`	current height of the canvas in pixels

Boolean System Variables

Variable	Use
`mouseIsPressed`	boolean - contains “true” if mouse pressed, “false” if not
`keyIsPressed`	boolean - contains “true” if any key pressed, “false” if not

Global Scope vs. Local Scope

Depending on our project, we may need the data inside of a variable to be accessible across our entire code so that we can use/read/change it in every function. In some cases, however, we may only need a variable to exist within a specific function or section of our code. This determination of how widely or narrowly accessible data is available throughout our code is known as **_scope_**. In all of our examples so far, we've been declaring our variables outside of any of our function blocks (the ones we've used most often are **draw( )** and **setup( )**), mainly at the very top of our code. This process is known as **global declaration**, and these variables can be used/read/changed anywhere and everywhere in our code. In the example below, the variable "circSize" is declared with the keyword **let** outside of any function block or function argument, which allows us to initialize it in the **setup( )** block, change it in the **draw( )** block, and then print it to the console on every click in the **mousePressed( )** block.

https://codepen.io/lsuddem/pen/joxoqe