Embedded Files
Print to the console - good for testing code while developing
Print to the console - good for testing code while developing
let x = 10;
print('The value of x is ' + x);
// prints "The value of x is 10" to the console
The console can be found by pressing ctr+shift+i in Chrome
Coordinates - X and Y
Coordinates - X and Y
X Axis - Horizontal
Y Axis - Vertical
width - get width of canvas
height - get height of canvas
Order is always x,y, w, h
Handy Calculations:
var centre_x = width*0.5
var centre_y = height*0.5
Adding Text to the screen
Adding Text to the screen
textSize(32); //set the text size in pixels
text('word', 10, 30); // string to print, x coordinate, y coordinate
let string = 'Welcome to my game';
fill(50); //change the text colour
text(string, 10, 10, 70, 80); // Text wraps within text box (string,x,y,width,height)
Drawing - You need to draw everything on your screen using code in Draw()
Drawing - You need to draw everything on your screen using code in Draw()
Set the colour using stroke - border
stroke(0, 153, 255); RGB Colour codes
set the colour using fill with RGB - inside the shape
fill(100,0,0)
Then you can draw shapes.....
Basic Drawing functions
rect(30, 20, 55, 55); x,y,l,w
ellipse(30,30,10); x,y,diameter
circle(30, 30, 20); x,y,d
Width - provide the width of canvas
Height - provide the height of canvas (bottom = higher number)
rect(height/2,width/2,30,30)
Drawing
Drawing
P5.js draws in order of code written. This means that if you draw a red rectangle at position 30,30 and then draw another blue rectangle at the some coordinates the blue will be on top of the red.
It works like a pain canvas. You need to select your color first before drawing and element i.e. fill or stroke.
draw(){
background(100);
fill(100,100,100);
rect(10,10,20,30);
}
Variables
Variables
A variable creates a piece of stored memory in the computer to hold a value. Data types do not need to be set.
Data types include:
string
int
float
array (var arr = [] or var arr =[1,2,3];
boolean // true/false
Declare variables with var or let the first time you create them.
Scope of variables:
Global - variables created outside a function can be seen by all functions in the same file
Local - variables declared in a function can only be accessed by that function
IF Else Statements
IF Else Statements
let a = 4;
if (a > 0) {
console.log('positive');
} else {
console.log('negative');
}
Else IF examples
let a = 4;
if (a > 0) {
console.log('positive');
} else if(a< 0) {
console.log('negative');
}
else{
console.log('zero');
}
For Loop & While Loop
For Loop & While Loop
For Loop
var num = 10;
for (let i = 0; i < num; i++) {
//do something
}
You would use a for loop to iterate through an array
for( i=0;i<array.length;i++){
array[i].move(); // or other function
}
//You can also go through an array backwards
//This useful if you plan on deleting array elements so you don't miss one after everything is shifted
for(i = array.length;i>0;i++){
//do something
}
While Loop
var x =0;
while(x<width){
x +50;
ellipse(x,200,50,50)
}
Arrays & Objects
Arrays & Objects
Declare Array
var coswave = [];
var people =['sam','greg','peg'];
Access Array element
Access Array element
let ans = people[0]; //output ans = sam
Append Array - Add an element to the array
Append Array - Add an element to the array
let myArray = ['Mango', 'Apple', 'Papaya'];
print(myArray); // ['Mango', 'Apple', 'Papaya']
myArray.push('Peach');
print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
Splice - Remove item from array
Splice - Remove item from array
let myArray = ['Mango', 'Apple', 'Papaya'];
print(myArray); // ['Mango', 'Apple', 'Papaya']
//myArray.splice(index number,how many items to remove)
myArray.splice(0,1);
print(myArray); // ['Apple', 'Papaya']
Objects
Objects
We can create objects with named properties.
Here we create an object See syntax below:
let author = {
name: 'Ursula K Le Guin',
books: [
'The Left Hand of Darkness',
'The Dispossessed',
'A Wizard of Earthsea'
]
};
console.log(author.name);
Functions
Functions
Functions allow code to be blocked into reusable sections of code
Example of basic function
Example of basic function
function hi(){
print('Hi');
}
hi() // run the function
Example of a function with a parameter being passed
Example of a function with a parameter being passed
let myName = 'Hridi';
function sayHello(name) {
print('Hello ' + name + '!');
}
sayHello(myName); // calling the function, prints "Hello Hridi!" to console.
Example of function with a passed parameter and a return
Example of function with a passed parameter and a return
function addup(a,b){
return a + b // return 6
}
let i = addup(2,4)
//i will out 6
Math Features
Math Features
Increase an integer
var score = 0
score ++ //increase
score -- // decrease
Random Number
random(min,max)
Round up to nearest 10
round(3.7) //4
Floor - round down
floor(20.7) // 20
Report abuse