Code Camp
Day 5/6
Drawing Program?
Have an idea for a project you want to work on by Monday.
Remember this?
mouseIsPressed is a property. It is a boolean system variable.
So what is this?
function mousePressed() {
d = d + 10;
}
It is a function that gets called whenever the mouse is clicked.
It is a type of EVENT.
Mouse Events
Keyboard Events
Drawing a Pattern of Circles
This code is terribly inefficient.
What if the number of rows or columns changes?
What if the spacing changes?
Red Flags:
function mousePressed(){
fill("blue");
//draw one row
circle(mouseX +10, mouseY, 10);
circle(mouseX +20, mouseY, 10);
circle(mouseX +30, mouseY, 10);
circle(mouseX +40, mouseY, 10);
circle(mouseX +50, mouseY, 10);
//draw another row
circle(mouseX +10, mouseY+10, 10);
circle(mouseX +20, mouseY+10, 10);
circle(mouseX +30, mouseY+10, 10);
circle(mouseX +40, mouseY+10, 10);
circle(mouseX +50, mouseY+10, 10);
}
Using A While Loop (Review)
let x = 1;�while (x < 5){ //do this; X++}
// don’t forget to increment or your browser will stop working!
Using the While Loop Reduce Repetition
This loop replaces all the repetitive actions.
10?
10?
What is wrong with this picture?
5
4
This is a one-off error
Some red flags are removed.
Now see how easy it is to change the diameter and number of columns.
Could it be better?
for(let i = 1; i <= 5; i++ ){ }
Packs the whole loop process into one neat package
A nice, neat for loop
Nested column function inside of row function.
Does this code draw columns first, or rows first?
Review Video
Objects
So darn powerful.
myBall = new ball();
myBall.show();
myBall.move();
myBall.pop();
But… how do you make a ball object?
Classes - Constructor method
Classes explain how to make objects and what they can do.
class Ball {
constructor( _x, _y ) {
}
move( ){
}
show( ){
}
The constructor function builds the object
These are passed to the constructor
“Instantiating” an object
Classes
Classes explain how to make objects and what they can do.
class Ball {
constructor( _x, _y ) {
}
move( ){
this.x = this.x + 10;
}
The methods give the object functionality
Example
Find a class called “Ball”
Arguments from new go into constructor
Showing the ball
Just because a ball was created does not mean we can see it. We need to “show” the ball. We need to know what “showing” a ball means.
This is “how” to show a ball
This says to show a particular ball
Moving the ball (on mousePressed, for example)
This is “how” to move a ball
Look how simple the draw function is.
Add a Method: pop
This method will be added inside the Ball class...
There is a special function that works like draw, but only on mouse event:
Using Images
Adding other files
This is how a library works.