Quia - Class Page - Setting up Canvas Lesson Plan ~Game Design Unit 3 (old)

Home FAQ About Log in Subscribe now

Setting up Canvas Lesson Plan ~Game Design Unit 3 (old)	Jessica Simmons-Fiawoo
	Send e-mail

True or False? Game canvas focuses on user experience while coding canvas emphasizes code comprehension. Answer: TRUE!

🎯 Canvas in Our Mini Golf Game

In our mini golf game, the canvas will display multiple important elements:

✅ Golf Course

The playing field with obstacles, walls, and the hole

✅ Ball Position

The golf ball sprite that players control

✅ Score & UI Elements

Text showing strokes, level, and other game info

❌ Source Code

This is NOT displayed on the game canvas—only visual elements!

📊 Coordinate System

A game canvas uses a 2D coordinate system (x, y) for positioning elements. Understanding this is crucial for placing sprites exactly where you want them!

// Setting up a canvas in p5.play

function setup() {
  // Width: 800px, Height: 600px
  createCanvas(800, 600);
}

// The coordinate system starts at (0, 0) in the top-left corner
// X increases going right, Y increases going down

function draw() {
 // Sets the background color
 background(220);
 
 // Position a sprite at specific coordinates
 // Center horizontally
 sprite.x = 400;
 // Center vertically
 sprite.y = 300;
}
                

Coordinate System Breakdown:

Origin (0, 0): Top-left corner
X-axis: Horizontal position (increases to the right)
Y-axis: Vertical position (increases downward)
Not 3D or 4D: Games use 2D coordinates for positioning

🎨 Canvas Features & Design

The canvas uses pixel-based drawing (not vector-based, text-based, or audio-based). Every element is drawn using pixels on your screen.

Essential Features for Good Game Canvas Design:

✅ Clear Visual Hierarchy

This is the most essential feature! Players should easily understand what's important on screen. Important elements (like the ball or goal) should stand out, while background elements should be less prominent.

Not essential: Complex animations only, maximum number of colors, or smallest possible size. Good design prioritizes clarity and user experience!

🎲 Interactive Gameplay Elements

What is Collision Detection?

Collision detection determines when objects interact with each other. In our mini golf game, collision detection tells us when:

The ball hits a wall
The ball falls into the hole
The ball touches an obstacle

Important: The main purpose of collision detection is to determine when objects interact. It's not for improving graphics quality, increasing frame rate, or debugging code—it's all about object interactions!

Canvas as an Interactive Playground

For students, the game canvas serves as an interactive playground where you can experiment, create, and see your code come to life! It's not a text editor, file storage system, or database—it's your creative space for building games.

🔧 Canvas and Color - Hands-On Task Activities

Let's set up your first canvas! Follow these step-by-step instructions:

Your Task: In the setup() function, create a new canvas that has a size of 450 by 450 pixels. Set the background color to your favorite color! (Feel free to try different sizes to see what happens, but end on 450x450).

🎨 Two Ways to Add Colors

There are multiple ways to add colors to your JavaScript programs. Here are the two easiest methods:

Coding Canvas	Game Canvas
Setting Up the Canvas - Unit 3 Game Design 🎮 Setting Up the Canvas Unit 3: Game Design with JavaScript p5.play \| Mini Golf Game Project Warm-Up Question What is a canvas, and how do you think we might use one in our programs and games? 🎨 What is a Canvas? In programming, a canvas is like a digital blank space where all the visual elements of your game come to life. Think of it as the screen or window where your game runs. Without a canvas, sprites have nowhere to exist—it's like trying to paint without having any surface to paint on! Key Concept: The canvas is the foundation of your game. Everything you see in a game—characters, backgrounds, obstacles, score displays—all appears on the canvas. Without setting up a canvas properly, your game won't display correctly or might not work at all. (0, 0) (width, height) ⛳ Click anywhere on the canvas to move the golf ball! 🖥️ Purpose of a Coding Canvas The primary purpose of a coding canvas is to display code execution results. It's where your code comes to life visually! When you write code to create a sprite, draw a shape, or animate a character, the canvas shows the output of that code.
Emphasizes code comprehension and learning	Focuses on user experience and gameplay
Shows results of code execution	Interactive playground for players
Helps students understand programming concepts	Displays game elements like characters, obstacles, UI
Educational tool	Entertainment and engagement tool

Method	Example	When to Use
1. Common Color Name	`background("red")`	Quick and easy for basic colors
2. HEX Color Code	`background("#fc1303")`	Choose from infinite color options!

💡 Pro Tip: Finding HEX Colors

Using HEX codes allows you to choose from infinite colors! Just Google search "hex color picker" to bring up a variety of options, choose your desired color on the picker, then copy the HEX code into your background command.

🔗 Click here to open a color picker!

📝 Complete Canvas Setup Code

// Step 1: Create your canvas in the setup() function
function setup() {
  // Create canvas: 450 pixels wide by 450 pixels tall
  createCanvas(450, 450);
  
  // Method 1: Using a color name
  background("skyblue");
  
  // OR Method 2: Using a HEX color code (comment out one!)
  // background("#4ECDC4"); // Turquoise
}

function draw() {
  // This runs continuously
  // Draw your game elements here
}

// Popular HEX Color Examples to Try:
// '#FF6B6B' - Coral Red
// '#4ECDC4' - Turquoise
// '#45B7D1' - Sky Blue
// '#96CEB4' - Sage Green
// '#FFEAA7' - Soft Yellow
// '#DDA15E' - Sandy Brown
// '#BC6C25' - Burnt Orange
                

Click the button to see different background colors!

📏 Canvas Width and Height Variables

The p5play library has special built-in variables that automatically store the width and height of the canvas once it is set up. These variables are named width and height.

Why are these variables helpful? They can be very useful when adjusting the size or positions of game objects. For example, to center a sprite, you can use width/2 and height/2 instead of hard-coding numbers!

🖨️ Your Task: Print Width and Height

Using console.log(), print out the values of the width and height variables at the end of the setup() function (after you create your new canvas).

// Complete setup() function with console.log()
function setup() {
  // Create canvas: 450 x 450 pixels
  createCanvas(450, 450);
  
  // Set background color (choose your favorite!)
  background("#4ECDC4");
  
  // Print the width and height to the console
  console.log(width);    // Will print: 450
  console.log(height);   // Will print: 450
  
  // Or print them together with labels:
  console.log("Canvas width:", width);
  console.log("Canvas height:", height);
}

// Example: Using width and height variables
function draw() {
  // Center a sprite using width and height
  sprite.x = width / 2;   // 450 / 2 = 225 (horizontal center)
  sprite.y = height / 2;  // 450 / 2 = 225 (vertical center)
}
                

✅ Task Checklist:

✓ Create a canvas with size 450 x 450 pixels
✓ Set the background to your favorite color (name or HEX code)
✓ Use console.log() to print the width variable
✓ Use console.log() to print the height variable
✓ Test different canvas sizes to see what happens
✓ Return to 450x450 before submitting

🎯 Expected Console Output:

                        450

                        450

                        // Or with labels:

                        Canvas width: 450

                        Canvas height: 450

📹 Required Video Resource

Watch with headphones and take personal notes!

Video Link: Canvas Setup Tutorial

Remember to present your completed notes to your teacher for daily grading points!

📝 Prepare for Your Quiz!

Make sure you understand these key concepts before taking the "Setting up the Canvas Quiz":

Canvas Purpose

Display code execution results

Drawing System

Pixel-based drawing

Coordinate System

2D coordinates (x, y)

Display Elements

Golf course, ball, score/UI (NOT source code!)

Design Feature

Clear visual hierarchy

Student Purpose

Interactive playground

Collision Detection

Determines when objects interact

Canvas vs Game

Code comprehension vs user experience

📸 Daily Grade Reminder:

Upload a screenshot of your completed console with a different background color. This proves you know how to:

Change the size and width of your canvas
Add different colors using hex codes

Last updated 2025/10/12 02:22:31 PDT

Hits 38

🎮 Setting Up the Canvas

Warm-Up Question

🎨 What is a Canvas?

🖥️ Purpose of a Coding Canvas