Introduction to p5.js

Navigating a basic maze

Lessons learned using p5
Down arrow

Created by Michael C. Zakany / @mzakany / github: mzakany23

d3.js

d3.js

Phaser.io

Phaser.io

Phaser.io

Easeljs

Easeljs

Easeljs

Processing

p5.js

"p5.js was created by Lauren Mccarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP."

Documentation

P5 Weekend Journey:

(A+B+C+D)/4==Selleck-Maze



Selleck Maze Waterfall

https://maze-gen.firebaseapp.com/

Daniel Shiffman: Coding for Rainbows

Maze Generator

https://www.youtube.com/watch?v=HyK_Q5rrcr4

Making a Maze Game

Project Guidlines


  1. Make a matrix (2D Array) n*n
  2. Each postion matrix[n] will be an instance of cell class
  3. Maze class will handle drawing matrix based on rules
  4. Game class handles game rules and player turns
  5. Player class will know how to traverse the maze
  6. UI class handles dom updating with vanilla js (no jquery)
  7. Index is where globals live and init code is ran

Grid:make grid

Grid:neighbors

cell.getNeighbors()

Grid:line checking

Grid:make grid

1d array

Grid:make grid

selecting columns with 1d array

Grid:make grid

2d array

Grid:make grid

2d array lookup

Grid:neighbors

Grid:line checking

Grid:line checking

this.move('right') === true // wall

this.move('right') === false // no wall

P5:Instance Mode

Global init

Globals vs instance mode

Instance Mode init

Globals vs instance mode

Instance Mode init

Events:p5 Docs

Events

Next Steps?

Demo

Down arrow