Section 1
Preview this deck
function
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (78)
Section 1
(50 cards)
function
-Anything with these opening and closing parenthesis () -it does something. -ex: rect
If you enter four color values...?
the last one is the transparency, or alpha
What are relational operators?
-Equal to == -Not Equal to != -Greater than > -Less than < -Greater than or equal to >= -Less than or equal to <= -comparing two numbers
background()
controls the background color of the canvas, and take a color as a parameter
var uses function scope:
the variable will work anywhere in the function, even before it is declared. This is because a process called hoisting. JavaScript will hoist the variable to the scope of entire function in which it is found.
ellipse()
(0,0,0,0)
0
black
Loops
-Loops are a control structure: like conditional statements, loops control how many time a certain block of code runs -And they can save you lots of time!
(parameter)
one value
when we create a variable, our computer creates a space for that called...?
an address.
how to get a variable in steps
1. declare 2. initialize 3. use
and
both statements have to evaluate to true
Where is the X and Y axis?
X on top y goes down
How many arguments does map() have?
5 ( value comparing range to new range (ex: mouseX), min range, max range, min new range, max new range)
mouseIsPressed
-boolean, which means true or false -is the mouse being pressed or not -mouse if being held down
else
do something else if the if is not true
Declaring variables: initializing variables: Or do both at once:
Declaring variables: var myScore; initializing variables: myScore = 1; Or do both at once: var myScore = 1;
const is similar to let, but should be used as a constant
-a variable where the value doesn't change. It is an option to use, for the sake of efficiency, when a variable doesn't change. If the value of a variable won't change, the computer doesn't need to reserve extra memory for the possibility that it might change
rect()
You will also notice that lines of code end in a semicolon.
how many else if can you have?
infinate
function mousePressed()
-event
What are the 10 numbers we use in p5?
0-9
Code Block:
code that is contained within an opening and closing curly brace: { ... }
frameRate();
The numbers of frames per second, or FPS, can affect how smooth the motion looks.
What are the two kinds of loops?
while loops and for loops
how many else and if can you have?
just one of each
console.log("x: " + mouseX + " / y: " + mouseY)
random()
arguments: min and max -ex: random(min,max) random(0,width)
setup()
-controls the overall setup of our sketch: things like the size of the canvas, frameRate, colorMode, renderer, etc. -It's like when you open Photoshop and create a new canvas. You choose the size, resolution, colormode, stuff that pertains to the overall canvas. -What this is actually doing for us is creating an HTML element, a canvas element, on our webpage
If you enter three color values...
it will interpret it as rgb
So why wouldn't you make all your variables Global?
It can conflict with other variables as your programs become more complex and interface with other programs. E.g. a variable named user is very common, and might conflict with other similarly named variables.
You can also create your own variables, but there are rules to naming them. What are they?
-The first character must be a letter or an underscore _. -You can't use a number as the first character. -The rest of the variable name can include any letter, any number, or the underscore. -You can't use any other characters, including spaces, symbols, and punctuation marks. -As with the rest of JavaScript, variable names are case sensitive. That is, a variable named Interest_Rate is treated as an entirely different variable than one named interest_rate. -There's no limit to the length of the variable name.
Scope
where you declare a variable will affect where it can be used
arguments
( x, y, width, height)
what is a variable?
-something that replaces a number -ex: (mouse x, 50, 50, 50) -We are telling the computer create a little space in memory, and give it a name, because we want to store something there. -JavaScript isn't very efficient. It is a high-language with lots of abstraction (which makes it easier for us to learn). -One of the reasons it isn't efficient is because JavaScript is an untyped language -when we use the keyword var to setup a variable, the program creates a space in the browser's memory to store that variable.
function mousePressed
-only when mouse is being clicked
// / /
comments : single line and multiline
And if you ever don't want a stroke or fill:
noStroke() noFill()
Don't confuse a = with ==! One equal sign is an _______? two is ______________?
One equal sign is an assignment operation, two is to test for equality
or
only one statement has to evaluate to true
boolean means
-true or false -1 or 0 (1 being true, 0 being false)
Loops will always have three parts:
-Declare and initialize a local variable to control the loop -Perform a boolean test to determine whether or not to run the loop -Increment the variable
What are the three logical operators?
AND && OR || NOT !=
draw()
is where we actually draw things to the canvas element.
map()
So I want to create a sketch that will take the location of the mouseX and mouseY, and remaps those values from the Canvas dimensions to the color spectrum 0-255, so the mouseX will control the G values, and the mouseY will control the R values.
Binary:
two states / true or false, on or off, 1 or 0
point()
-Anything with these opening and closing parenthesis is called a function: it does something. -We put values, or arguments, inside the parentheses to control how the function behaves. -coordinates, 0,0 is upper left hand corner, "Y" axis is flipped.
Nested for loops
-Nested for loops are pretty cool and extremely useful, especially when you are drawing things in a grid -You have one for loop nested inside another for loop -The first loop controls the x dimension, or all the columns, and the second loop controls the y dimension, or all the rows
let uses block scope:
-the variable will only work in its code block, no hoisting -Hoisting makes code prone to error as it can conflict with other variables.
255
white
Section 2
(28 cards)