Let’s make sure we understand the key ideas of using conditionals in JavaScript by using them in a miniature project.
As with all challenges, do this work in pairs and in class. This means you will both submit the same work and should work together on one computer to produce the project. You can take turns typing stuff in.
To start up you should:
conditionals-challengecart253 repositoryWith your partner(s):
Push a puck
We’re going to start with some example code for you to modify, so start paste the following code into your script.js:
/**
* Circle Master
* Pippin Barr
*
* This will be a program in which the user can push a circle
* on the canvas using their own circle.
*/
const puck = {
x: 200,
y: 200,
size: 100,
fill: "#ff0000"
};
const user = {
x: undefined, // will be mouseX
y: undefined, // will be mouseY
size: 75,
fill: "#000000"
};
/**
* Create the canvas
*/
function setup() {
createCanvas(400, 400);
}
/**
* Move the user circle, check for overlap, draw the two circles
*/
function draw() {
background("#aaaaaa");
// Move user circle
moveUser();
// Draw the user and puck
drawUser();
drawPuck();
}
/**
* Sets the user position to the mouse position
*/
function moveUser() {
user.x = mouseX;
user.y = mouseY;
}
/**
* Displays the user circle
*/
function drawUser() {
push();
noStroke();
fill(user.fill);
ellipse(user.x, user.y, user.size);
pop();
}
/**
* Displays the puck circle
*/
function drawPuck() {
push();
noStroke();
fill(puck.fill);
ellipse(puck.x, puck.y, puck.size);
pop();
}
Add a function called movePuck() to the program and call it in draw().
movePuck() should:
dist() for this, check the Overlapping Circles example if you need to see it being done)If the user and puck do overlap, we want to push the puck. But how?
One option is to think about it in terms of checking which side of the puck the user is on, and pushing it in the opposite direction. So we could write an if that checks if the user is to the left, and if so push the puck to the right. If we did that for all four “sides” then the puck will move “appropriately.”
A different option is just to move the puck based on the distance between the puck and user on x. (You might need to divide that distance by something to make it a bit smaller so it’s not too powerful). Then repeat the same idea for y.
🌶️ If you’re feeling ultra spicy you could implement the puck’s movement with velocity and acceleration and cause it to accelerate away, then slow down with friction over time?
🌶️🌶️ If you’re feeling flaming hot cheetos about it, you could calculate the angle between the user and puck and move the puck away at that angle.
Add another varible for a circle called target and write a drawTarget() function you call in draw(). Display the target in the same way as the user and puck but give it a different visual appearance (say, a different colour).
🌶️ Can you work out how to make the target have a dashed outline? Feel free to ask the internet. It was surprisingly non-obvious last time I checked and involves stepping outside of p5 a little bit.
Write another function checkTarget() you will call in draw() that checks if the puck is currently overlapping the target (remember dist() from earlier). If it is, change the colour of the target to indicate the overlap. If it isn’t, change the colour of the target to indicate there is no overlap (say, green for an overlap and red for no overlap).
🌶️ This is currently very functional, is there a way to give this a more emotional arc? Could the puck be sad when not overlapping and happy when it is? How might you display the user, puck, and target to convey this idea? Faces? Little people or animals? The metaphor of “pushing” one thing onto another could go in lots of directions, no?
When you’re finished, show the instructor or teaching assistant your work and they will confirm you’ve passed the challenge and can submit it on the Moodle.
This challenge is pass/fail and is worth 1% of your final grade.
Once you’re cleared to submit, go to the Moodle and both submit your work. You should all separately submit:
Note: It’s fine if the project is only in one of your repositories, but it’s not a bad idea to make sure you both have it for your own reference.