Embedded Files
Work through the following practice exercises. Solutions can be found on this page if you get stuck.
Work through the following practice exercises. Solutions can be found on this page if you get stuck.
1. Drawing - Read the following article and look at the examples - https://p5js.org/learn/coordinate-system-and-shapes.html
1. Drawing - Read the following article and look at the examples - https://p5js.org/learn/coordinate-system-and-shapes.html
Complete the following exercises
Exercise 1
Draw a square in the centre of the stage 250 x 250px
Draw 2 eclipse shapes inside the square as windows
Draw a rectangle as a door to your house
Using the line tool, create a triangle roof on the top of the house
Solution for Task 1
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
rect(100,200,200,200);
ellipse(140,280,50,50);
ellipse(260,280,50,50);
rect(170,300,60,250);
line(200,100, 100,200)
line(200,100, 300,200)
}
Complete the following exercises:
Create three separate horizontal rectangles 100 x 50 pixels ad fill them with red, green and blue with a black stroke
Create three separate horizontal rectangles 100 x 50 pixels ad fill them with red, green and blue with the same colour stroked edge
Text - Read through the short article on adding text - https://p5js.org/reference/#/p5/text
Add some different text to the screen and change its color.
Solution for Task 2
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
stroke(0);
fill(255,0,0);
rect(50,100,100,50);
fill(0,255,0);
rect(50,200,100,50);
fill(0,0,100);
rect(50,300,100,50);
//outline in same color
stroke(255,0,0);
fill(255,0,0);
rect(200,100,100,50);
stroke(0,255,0);
fill(0,255,0);
rect(200,200,100,50);
stroke(0,0,100);
fill(0,0,100);
rect(200,300,100,50);
}
Exercise 2 - I have included how to concatenate a variable in the text
var score =0;
function setup() {
createCanvas(250,250);
stroke(0);
}
function draw() {
background(204);
fill(0, 102, 153); //set the colour
textSize(20); //set the size
text("score:" + score,10,30); // set the text, x, y)
}
Task 3 - Read through the article on Interactivity - https://p5js.org/learn/interactivity.html
Complete the following exercises:
Exercise 1
Create an ellipse that follows the mouse cursor inside the canvas
When the cursor is on the left side of the screen it should turn red
When the cursor is on the right side of the screen it should turn green
When the mouse is pressed the ellipse turns blue anywhere on the canvas
Exercise 2
Create a player and global variables x and y
Using a function and if statements create an up and down keyboard that moves a rectangle image to y = 50 when up pressed and y = 200 when down pressed
Exercise 3
Extend exercise 2 by allowing keyboard controls to move the player around the screen. Set the increment to be only 5 to begin with. You will notice that the player does not stop moving when you release the key. Add some if statements to make it stop on the edge.
An example of animation can be found in the next task for reference
Solution for Task 3
Exercise 1:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(126);
if (mouseIsPressed == true) {
fill(0,0,100);
ellipse(mouseX, mouseY, 33, 33);
}
else if(mouseX<width/2){
fill(100,0,0);
ellipse(mouseX, mouseY, 33, 33);
}else{
fill(0,100,0);
ellipse(mouseX, mouseY, 33, 33);
}
}
Exercise 2:
var player_x = 125;
var player_y = 35;
function setup() {
createCanvas(250,250);
stroke(0);
}
function draw() {
background(204);
movePlayer(); //call function
rect(player_x, player_y, 30, 30); //draw the player sprite
}
function movePlayer(){
if (keyCode == UP_ARROW) {
player_y = 50;
}
else if (keyCode == DOWN_ARROW) {
player_y = 200;
}
}
Exercise 3:
var player_x = 125;
var player_y = 35;
var speed = 5; // set a global speed
function setup() {
createCanvas(250,250);
stroke(0);
}
function draw() {
background(204);
movePlayer(); //call function
rect(player_x, player_y, 30, 30); //draw the player sprite
}
function movePlayer(){
if (keyCode == UP_ARROW) {
if(player_y>0){
player_y -= speed;
}
}
else if (keyCode == DOWN_ARROW) {
if(player_y<height-30){ //make sure you take away the height of player
player_y += speed;
}
}
else if(keyCode == LEFT_ARROW){
if(player_x>0){
player_x-=speed;
}
}
else if(keyCode == RIGHT_ARROW){
if(player_x<width-30){
player_x += speed;
}
}
}
Exercise 4 - Basic Animation
Exercise 4 - Basic Animation
Study the code below animating a rectangle left and right on the stage
var x = 50;
var y = 50;
var dir ="r";
function setup() {
createCanvas(250,250);
}
function draw() {
background(0);
if(x>width-40){
dir = "l";
}else if(x<0){
dir="r";
}
if(dir=="r"){
x+=2; //move right
}else{
x-=2; //move left
}
fill(100,100,100);
rect(x,y,40,40);
}
In the example above we add or subtract a set number of pixels each update of frame in the draw function.
Complete the following exercises
Update the code by creating an additional object that moves up and down
Create another object to move diagonally across the canvas
Solution for Task 4
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js "></script>
<script src="https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D@0.6/p5.collide2d.js"></script>
<!--Other class files go here >>>>-->
</head>
<body>
<script>
var x1 = 50;
var y1 = 50;
var dirX ="r";
//second shape
var x2 = 50;
var y2 = 50;
var dirY = "u";
//third rectangle
var x3 = 50;
var y3 = 50;
var dirZ = "l";
function setup() {
createCanvas(250,250);
}
function preload(){
}
function draw() {
background(0);
if(x1>width-40){
dirX = "l";
}else if(x1<0){
dirX="r";
}
if(dirX=="r"){
x1+=2;
}else{
x1-=2;
}
fill(100,100,100);
rect(x1,y1,40,40);
//second rectangle
if(y2>height-40){
dirY = "d";
}else if(y2<0){
dirY="u";
}
if(dirY=="d"){
y2-=2;
}else{
y2+=2;
}
fill(100,0,100);
rect(x2,y2,40,40);
//third rectangle diagonal
if(x3<0 && y3<0){
dirZ="r";
}else if(x3>width-40 && y3>height-40){
dirZ="l";
}
if(dirZ == "l"){
x3-=2;
y3-=2;
}else{
x3+=2;
y3+=2;
}
fill(0,100,0);
rect(x3,y3,40,40);
}
</script>
</body>
</html>
Exercise 5 - Creating a class of Comets...
Exercise 5 - Creating a class of Comets...
Read through the tutorial on setting up a class file
Complete the following exercises: Create some flying comets. Flying horizontal objects
Create a new folder and files including index.html, sketch.js and set up as a new project. Add a new file called comets.js and set up a template according to the tutorial.
In the class file comets.js
Create a some properties in the constructor x,y, width, height, speed and assign some static variables. Don't forget to use this.speed = 5;
Create a new function inside the class called move. This function will increase the x variable by the speed. If x is less then the width of the canvas it can fly else it will need to be reset to 0.
Draw a rectangle with a colour of choice with each of the class properties x,y,width,height
In the sketch.js file
Create a global array called comets
Create a new function called Addcomet() that makes an instance of a comet and pushes it into the comet array
Function (var c = new comet(); comets.push(c);
In the draw function write a for loop in reverse (for var i = comets.length-1;i>=0;i--) //this is so we can delete comets easily later
Inside the for loop - access each of the element of the array and call the method move() on each comet stored inside comets[i].move();
At the top add to the setup function()
Inside call the function addComet()
You can add more comets by adding a for loop in the preload function to launch as many commets as you like. for(var i=0;i<5;i++)
Solution for Task 5
//class file must be loaded before sketch.js
class comet{
constructor(){ //when created set up its properties
this.x = 0;
this.y = random(250);
this.width=random(20);
this.height = 10;
this.speed = random(10);
}
//check position on canvas and update
move(){
if(this.x<width){
this.x+=this.speed;
}else{ //if off the stage reset its position
this.x=0
this.y=random(250);
}
fill(0,0,100);
rect(this.x,this.y,this.width,this.height);
}
}
//sketch.js
var comets =[];
function setup() {
createCanvas(250,250);
}
function preload(){
for(var i =0; i<5;i++){
addComet();
}
}
function draw() {
background(0);
for(var i = comets.length-1;i>=0;i--){
comets[i].move();
}
}
function addComet(){
var c = new comet();
comets.push(c); // push comet into comets array
}
Exercise 6 - Collisions - We will using an external library called collide2d. You can read the documentation online - https://github.com/bmoren/p5.collide2D
Exercise 6 - Collisions - We will using an external library called collide2d. You can read the documentation online - https://github.com/bmoren/p5.collide2D
Create a new project with index.html, sketch.js.
Add a player to the screen that can be controlled with the mouse pointer. See exercise 1 for an example
Add a new class file called targets.
These should create a round red circle with a white dot inside.
They are to spawn in random positions on the canvas. Store them in an array
Create an update function to draw them to the canvas
Add a for loop in setup in sketch.js to create a set number of targets and push to an array called targets =[]
Create a new function to check for collisions with arrow and target.
Go to index and load an external library called collide 2D
<script src="https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D@0.6/p5.collide2d.js"></script>
Create a new function called collisions
Use the following code to pass in one target at a time and compare locations of target and mouse pointer. Return true if collide using the collide 2d code below
function collision(target){
if(collideCircleCircle(mouseX,mouseY,33,target.x,target.y,target.width)){
return true;
}
}
Back in the draw function create a for loop to run through each target element in the targets array and run the function collision
for(var i = targets.length-1;i>=0;i--){
if(collision(targets[i])){
targets.splice(i,1); // will remove from array and canvas
}else{
targets[i].update();
}
}
Add a score feature so that when a target is collided with the score goes up. Print as text on the screen.
Use the setInterval function to run the setInterval every 500 milliseconds. I have added a variable
setInterval(addTarget,500);
Solution for Task 6
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js "></script>
<script src="https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D@0.6/p5.collide2d.js"></script>
<!--Other class files go here >>>>-->
</head>
<body>
<script>
class target{
constructor(){ //when created set up its properties
this.x = random(250);
this.y = random(250);
this.width=20;
this.height = 20;
}
update(){
fill(100,0,0);
ellipse(this.x,this.y,this.width,this.height);
fill(100,100,100)
ellipse(this.x,this.y,this.width/2,this.height/2)
}
}
//start sketch.js
//set global variables
var targets =[];
var score = 0;
var diff = 500;
function setup() {
createCanvas(250,250);
//create three targets when game starts
for(var i =0; i<3;i++){
addTarget();
}
setInterval(addTarget,diff); //create new targets every set number seconds
}
function preload(){
}
function draw() {
background(0);
//loop through each target
for(var i = targets.length-1;i>=0;i--){
if(collision(targets[i])){
targets.splice(i,1); //delete target from screen
score++; //update score
}else{
targets[i].update();
}
}
//move player mouse x and y
fill(0,0,100);
ellipse(mouseX, mouseY, 33, 33);
//update score
fill(200,200,200);
text("Score: " + score,100,60);
}
//check for collision between player and targets - pass in target object
function collision(target){
if(collideCircleCircle(mouseX,mouseY,33,target.x,target.y,target.width)){
return true;
}
}
//add a new target to the targets array using the class
function addTarget(){
var c = new target();
targets.push(c); // push into targets array
}
</script>
</body>
</html>
Report abuse