WEEK 10: Canvas Animations
(March 17 & 19)

To Do This Week:

Work on Map Projects…

Map Projects Due Wednesday March 20th

Class

Programming Concepts > JavaScript Syntax

Basic Principles:

Operators:

Doing Stuff:

Storing Stuff:

Maps DUE WED

Map Projects List

Questions?

Workshop Canvas

Intro to Canvas:

Create a Drawing/Animation with Canvas:

Copy the source code from this starter file into a new file:

JavaScript Canvas Drawing + Animation

Change the JavaScript to create your own face animation. Examples:

Canvas Clock Example

Generative Art with P5.js

Processing Overview:

P5.js is a JavaScript library for creating complex drawings and animations. Resources:

HTML5 Canvas Game: 15%

DUE: Wednesday April 10th

For this project, you will create an interactive HTML5 canvas game using JavaScript and p5.js. Follow these guidelines:

Your Steps:

  1. Game Concept Ideation: Brainstorm ideas for your game, from platformers to puzzle games, using p5.js for visuals.
  2. Game Design Document: Outline objectives, mechanics, rules, controls, and levels.
  3. Consult with ChatGPT: Refine your game design and solve technical challenges with ChatGPT’s assistance.
  4. Implementing the Game: Code your game incrementally, integrating JavaScript and p5.js for logic and animations.
  5. Testing and Debugging: Test thoroughly to ensure functionality and balance.
  6. CSS Styling and UI Design: Style your game’s interface to enhance the experience.
  7. Integration Statement: Add comments in your source code summarizing development steps and ChatGPT’s role.
  8. Final Submission: Upload your game files to a folder named “canvas-game” and submit the working URL.

To Do This Week:

Work on Map Projects…
Map Projects Due Wednesday March 20th

Class

Programming Concepts>Javascript Syntax

Basic Principles:

Operators:

Doing Stuff:

Storing Stuff:

Maps DUE WED 

Map Projects List 

Questions?

Workshop Canvas 

Intro to Canvas:

  • Canvas Element
    Javascript Drawing and Animation
  • Canvas reference
  • start drawing: beginPath();   // begins a path or resets the current path.
  • find a start point: moveTo()
  • drawing a circle: arc();
    context.arc(x, y, r, sAngle, eAngle, counterclockwise)
    context.arc(100, 100, 50, 0, 2*Math.PI, true)

    Math.PI returns PI (the ratio of a circle’s area to the square of its radius, approximately 3.14)

Create a Drawing/Animation with Canvas:

Copy into a new file the source code from this starter file: JavaScript Canvas Drawing + Animation

Change the JavaScript to create your own face animation. See below for some examples from past students.

Here is a Canvas clock –  from w3schools. What are the steps?

Student Pairings

Generative Art with P5js

Processing Overview
P5js (Processing for JavaScript) is a library that makes it easy to create complex drawing and animations using Canvas and additional built-in Processing methods. Below are resources and a starter template (download the zip) which includes the p5js file. Look at theses resources in order to see how p5js works. Have fun.

p5js.org/ : processing > javascript for fun and art, creative programming

P5js

  1. my p5js starter template  | ZIP folder
  2. p5js examples
  3. p5js get started  | p5js overview
  4. p5js reference
  5. p5js online editor
  6. p5js video tutorial

draw():  executes the code contained within its block repeatedly, allowing for the animation and interaction within the canvas. It’s where most of the dynamic drawing code goes.

fill(): Sets the color used to fill shapes.

arc(): Draws an arc or a portion of an ellipse. 
P5js : arc(x, y, w, h, start, stop, [mode], [detail]);
HTML5 Canvas: arc(x, y, radius, startAngle, endAngle, counterclockwise)

Generative Techniques -Amy Goodchild

  • randomness / pseudorandomness
  • rules, instructions, algorithms, math
  • natural systems

The random() function in p5.js generates pseudorandom numbers. It can return a floating-point number between 0 and 1, a number within a specified range, or a random element from an array, depending on how it’s used. It’s useful for introducing unpredictability and variation in sketches.

The noise() function in p5.js generates Perlin noise, which produces smooth, natural-looking sequences of numbers. Unlike random numbers that jump abruptly, values from noise() change gradually and predictably, making them ideal for creating organic patterns, textures, and motions in generative art and animations.

John Conway’s Game of Life (P5js simultaion)

Vera Molnar

Generative Artists:

Michael Hansmeyer

Generative Art In-class Exercise

Examples:

Tyler Hobbs, Fidenza 313 / About the making of 

Flow Fields:
Creating a flow field with p5.js involves simulating a fluid-like motion by placing particles in an invisible vector field, where each vector influences the direction and speed of the particles moving over it. Below is a simple example of a flow field in p5.js embedded in a one-page HTML5 document. This example uses Perlin noise to generate the vector directions for a more organic flow.
JavaScript Canvas with Processing (P5js) -Flow Fields
Description by Tyler Hobbs

HTML5 Canvas Game :15%

DUE: Wednesday April 10th

For this project, you will be creating an interactive HTML5 canvas game that uses JavaScript for dynamic, engaging gameplay. This project is a blend of creative game design and programming skills. Follow these structured guidelines, as well as consulting ChatGPT for brainstorming, planning, and troubleshooting throughout your project’s development:

Project Statement Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical and creative steps for your game development with JavaScript and p5.js. Include how ChatGPT assisted in the ideation, planning, or debugging phases of your work.

Your Steps:

  1. Game Concept Ideation: Start by brainstorming ideas for your game. This could range from simple mechanics like platformers or puzzle games to more complex concepts like strategy or adventure games with generative environments. Think about how p5.js can be used to create unique visual effects or game elements.
  2. Game Design Document: Write an outline for your game’s objective, mechanics, rules, controls, and levels (if applicable). This document will serve as your project blueprint.
  3. Consult with ChatGPT: Use ChatGPT to refine your game design, discuss your technical approach, and solve any challenges you encounter with JavaScript or p5.js. This can include code structure, algorithm development, or implementing specific game features.
  4. Implementing the Game: Begin coding your game, ensuring your HTML structure supports the canvas element and interactive features. Optionally use p5.js for drawing and animation. Integrate game logic with JavaScript. Regularly consult ChatGPT for coding assistance and troubleshooting. Work incrementally.
  5. Testing and Debugging: Test your game extensively to ensure all mechanics and interactions function as intended. Pay special attention to game balance, user input handling, and visual effects.
  6. CSS Styling and UI Design: Apply CSS to style your game’s interface, focusing on a design that enhances the gaming experience without distracting from the gameplay. Consider mobile responsiveness if applicable.
  7. Integration Statement: In your source code comments, summarize the game development steps in natural language and highlight how ChatGPT supported your project.
  8. Final Submission: Place your game files in a folder named “canvas-game”. Upload your project to a server and submit the URL through your course management system. Validate your HTML and ensure your game runs smoothly across different browsers and devices. 

Suggested Game Ideas:

  • Generative Art Puzzle: Create a game that uses p5.js to generate unique puzzles based on artistic patterns or fractals. Players could solve puzzles to unlock the next level or piece of a story.
  • Platformer with Dynamic Environments: Develop a platform game where levels are procedurally generated using p5.js, offering a new experience each time.
  • Educational Games: Design a game that teaches a concept such as mathematics, history, or coding through interactive challenges.
  • Adventure Game with Expressive Characters: Animate characters with expressive movements and interactions, enhancing the narrative experience.
  • Physics-Based Puzzle Game: Design a game where players manipulate objects to solve puzzles influenced by realistic physics. Simulate gravity, friction, and collision effects to create challenges that require players to think creatively. 
  • Dodging Objects Game: Create an intense game where the player controls a character or object that must dodge an onslaught of obstacles. As the game progresses, the difficulty can increase by speeding up the obstacles or introducing new types that behave unpredictably.
  • Maze Runner Game: Design a game where the player navigates through complex mazes that are generated dynamically with p5.js. Each maze presents its own set of challenges, including dead ends, traps, and puzzles that must be solved to find the exit. The game could include different themes for the mazes, such as a dark forest, an ancient dungeon, or a futuristic labyrinth, each with unique obstacles and aesthetics.
  • Physics-Based Destruction Game: Create a game where the goal is to destroy structures or objects using a variety of tools or weapons, all while obeying the laws of physics. Players must strategize the best way to cause maximum destruction, considering the material properties and structural weaknesses. p5.js can be used to simulate realistic destruction effects, offering a satisfying visual and gameplay experience.
  • Escape Game with Environmental Puzzles: In this game, players find themselves locked in rooms or complex environments and must solve puzzles to escape. Use JavaScript o create interactive elements within the environment that players can manipulate—such as levers, buttons, and movable objects—integrating physics to add realism to how these elements interact. Each level can escalate in difficulty, requiring more inventive solutions and understanding of the game’s physics.

You will be graded on:

  1. your effort
  2. the clarity of your idea executed in JavaScript steps
  3. your process of creative discovery
  4. the usability of your game – provide instructions

Your project must have the following:

  1. a title and author name visible
  2. well-commented code to make sure you understand what the script is doing at each stage
  3. in the the <head>, inside HTML comments, you have a statement that includes resources you used to build the game. 
  4. the work is uploaded to the server as an index.html inside a folder called “game”