Storing Things in Code

So far, our code has used concrete, static data to create visuals. However, we can use updatable, changing data in order to modify our projects while they are running in order to make them more dynamic. To do this, we use [variables](https://pdm.lsupathways.org/6_resources/2_variables/). A variable is a container that stores a single value in the memory or our code so that we can use it at a later time, in multiple places throughout our code. This make variables more flexible than fixed, concrete values. In this code, we've drawn two polygons to the screen. The teal square is built using four fixed values as arguments; its location, width, and height will never be changed unless we stop the code, edit the values, and rerun the program. The pink rectangle uses two variables: "rectWidth" and "rectHeight".

remember = means assign NOT equal to like in math class

See the Pen Example Code by LSU DDEM ( @lsuddem) on CodePen.

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

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

See the Pen Example Code by LSU DDEM ( @lsuddem) on CodePen.

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.

See the Pen Example Code by LSU DDEM ( @lsuddem) on CodePen.

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.

See the Pen Example Code by LSU DDEM ( @lsuddem) on CodePen.

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