**Tinker#2 Colors/ Operators & Variables**

**Changing background Colors**
* **RGB Colors**
P5JS uses RGB color model (additive feature):
fn(red,green,blue) - available in various shades from pitch black (0,0,0) and grey (150,150,150) to stark white (255,255,255).
255 is the maximum valid value.

* **inline Color Picker**

Tinker with the tool that contains the variety of shades and explore the RGB color values.
One can also add the "fourth component" of the function which sets the level of color opacity.

i.e.`fn(red,green,blue), alpha)`
a zero (full transparency) to 255 (full opaqueness)

Therefore, there are different possible values for adding color as follows:

fn(220); grey
fn(0, 125); grey scale + opacity level
fn(255,0, 0); red
fn(255, 0, 0, 125); pink

**Setting the Color of the Shapes**
fill (color) = the inside of the shape
stroke(color) = the outline of the shape
strokeWeight = sets the width of the stroke
noFill() = gets rid of the fill color, making the color "fully transparent"
noStroke() = removes stroke color

for instance:

	function draw() {
	backgrund(220)
	}
	fill(255, 0, 0);
	ellipse(400, 200,300,300);
	stroke(255,0);
	strokeWeight(4);

**Variables & Operators**
order of operations:
- parenthesis
- multiplication & division
- addition & subtraction
use a variable
just a single place; doesn't have to keep repeating

**About Scope**
"scope of a variable": indicates the location from which the variable can be accessible from.
In JS, declared variables have a "function scope."
To declare variables, one can use these commands: "var", "let" and "const" - each contains different scoping rules.

* Function Scope
- a variable nested inside a function cannot be accessed from outside the fucntion.
- available only to the fucntion that the variable is nested in.
**Variables must be declared at the top**

**Global Variable**
- a variable declared outside a function
- This is NOT RECOMMENDED as it may conflict with other existing variables.

sidenotes: 
After having watched the course tutorial on this week's assigned chapters on colors, variables and operators, I was able to tinker with the main features concerning the shapes, colors and the animated options.

**Frame/ frameRate/ frameCount**
*frameCount*: a P5JS variable that detects the number of times that the draw function is operated/ called since the programs launch. Used for animation.

*frameRate(rate)*: refers to the amount of times the draw function is executed in a second. It shows the current frame rate if no argument. Also, it can set the frame rate to a desired value if there is an argument.
*60 is ideal for P5JS

*noLoop()* use this for a still image (no animation) as it stops the "draw function" from repeatedly operating.

*text(value,x,y), textAlign*: displays the given value at the given x and y position.

*parseInt(numericValue, base)* converts the given value to an integer

**Conditionals**
if statement => enables us to execute a block of code if a certain condition is satisfied.
if (<conditional statement>)
true / false = actual values in JS known as boolean data types without any quotes. JS can understand it right away. Make sure that the first "t" only works with a lower-case letter (X True)
Comparing differnt numerical values:
`2 > 1
5>=5
3 <7
1 <=1`
To compare to see if they are equal use 3 equal signs: 1 === 1

**else block**
used within the if block, executes everything outside the if block.

**Refactoring** process of restructuring existing code wihout chaning its existing behavior.

**&& (and operator)** it would evaluate to true if all parts of it are true.

** mouselsPressed** gets the value true when mouse is clicked on the canvas area and false for the other times.
**Loops**
a loop that enables us to repeatedly execute a block of code. The loop can be infinitely repeated until the program is terminated. It is commonly used for a program with specific number of times.

for Loop consists of four parts: 
	1. counter variable 
	2. test condition
	3. define a way to update the counter valuable
	4. write a code we want to have repeated.

**Nested Loops** placing a second loop inside another loop.

Random()
generates a random number between 0 and 1
random(min,max) it will generate the number between the two values.