Quia - Class Page - 1- Min Golf-Setting Up the Canvas

🎯 My Objectives

1. I will apply my coding skills to make a canvas that runs my Mini Golf game smoothly.

2. I will apply and analyze how the setup and draw functions work together to build my Mini Golf canvas.

💭 Question of the Day

"How is programming a video game similar to writing a story?"

Select the BEST answer:

A. Both require typing on a computer or using paper and pencil B. Both require planning, creativity, characters/sprites, settings/backgrounds, and continuous revision/testing C. Both are done by one person working alone without any help D. Both can only be completed in English language

📝 Canvas Assignment: After selecting your answer, write a 3-5 sentence explanation of your choice in today's Canvas post. Explain why you chose that answer and give specific examples!

🐛 Fun Fact Question of the Day!

"Why do programmers prefer dark mode?"

A. Because it uses less electricity B. Because light attracts bugs (errors in code) C. Because it makes the computer run faster D. Because it's easier to see at night

💡 Did You Know?
In programming, "bugs" are errors in code. The term dates back to 1947 when an actual moth was found causing problems in a computer at Harvard University! So the joke is that "light attracts bugs" - both the insect kind AND the code error kind! 🐛

📝 Canvas Assignment: Write your answer choice AND explain in 2-3 sentences why this joke is funny (even if you didn't laugh!) in today's Canvas post.

🎥 Watch First: Video Tutorial

Introduction to p5play - Canvas Setup

Before you start coding, watch this CodeHS video to see how setup() and draw() work in action!

📺 Duration: 5-8 minutes

📚 Topics: Canvas creation, setup() and draw() functions, backgrounds

🎬 Watch Video on CodeHS

⚠️ Important: After watching, complete the step-by-step instructions below!

📋 Step-by-Step Instructions

Follow each step carefully to build the foundation of your Mini Golf game. Check off each box as you complete it!

Create the Program Structure

Open a new JavaScript file in your CodeHS Sandbox or p5play editor Type the following code structure:

function setup() {

}

function draw() {

}

✏️ Note: The setup() function runs once at the start, while draw() repeats every frame.

Create the Canvas

Inside your setup() function, add this line:

function setup() {

  new Canvas(450, 520);

}

Run your program Verify that a blank canvas appears

📝 Canvas Size Chosen:

Add a Background Color

Inside the draw() function, clear and color your canvas:

function draw() {

  clear();

  background("#79bef2");

}

🖍️ Your Background Color Code:

🎨 Color Tip: You can use hex codes (#79bef2), color names ('blue'), or RGB values!

Add Mouse Coordinates

Declare a variable at the top:

let coordinates;

Call this helper function inside setup():

function setup() {

  new Canvas(450, 520);

  mouseCoordinates();

}

Add this inside draw():

function draw() {

  clear();

  background("#79bef2");

  coordinates.text = round(mouse.x, 1) + ', ' + round(mouse.y, 1);

}

Add this function at the bottom:

function mouseCoordinates() {

  coordinates = new Sprite();

  coordinates.color = 'white';

  coordinates.width = 80;

  coordinates.height = 20;

  coordinates.x = width - coordinates.width / 2 - 5;

  coordinates.y = coordinates.height / 2 + 5;

  coordinates.collider = 'none';

}

🧠 Think About It: What do these numbers in this function represent? Write your response in your notes. Be ready to share later!

Test and Reflect

The canvas appears The background shows the correct color (Optional) The mouse coordinates appear and update

✅ Mini Golf Setup Complete!

💡 Reflection Questions

1️⃣ Why is it helpful to use the setup() and draw() functions in your program?

2️⃣ How might knowing your mouse coordinates help you later when adding sprites and obstacles?

✅ Student Checklist Review

Task	Completed (Yes/No)	Your Initials
Program structure created
Canvas created & visible
Background color added
(Optional) Mouse coordinates display
Reflection questions completed

📝 Don't Forget Canvas!

Before moving to the quiz, make sure you've posted your responses to today's Canvas assignment:

✓ Question of the Day answer with explanation (3-5 sentences)

✓ Fun Fact answer with explanation (2-3 sentences)

Ready? Scroll down to take the quiz! 🎯

⛳ Mini Golf Game Setup

🎯 My Objectives

💭 Question of the Day

🐛 Fun Fact Question of the Day!

🎥 Watch First: Video Tutorial

Introduction to p5play - Canvas Setup

📋 Step-by-Step Instructions

💡 Reflection Questions

✅ Student Checklist Review

📝 Don't Forget Canvas!