Skip to content

Latest commit

 

History

History
235 lines (146 loc) · 10.4 KB

06_objects.md

File metadata and controls

235 lines (146 loc) · 10.4 KB

Scale: Objects and Arrays

book - Getting Started with p5.js

tutorials: Object-Oriented Programming with Classes in JavaScript

Written Tutorials

tutorials: Arrays

tutorials: Arrays of Objects

tutorials: Object "communication"

Going Further

tutorials: Images and Objects

tutorials: Particle Systems


6. Recap, Explore and Experiment - Objects and Arrays

Ex 6.1 Many Objects

As you may have noted from the readings there are a few different ways of managing objects. You can use simple object literals or create objects from classes. You can start with object literals and as your sketch builds up in complexity you may find it clearer to use classes, especially if you have more than one distinct behaviors to manage.

sketch - A Snake Following the Mouse

Array of object literal with properties x and y.

sketch - drag trail of n bubbles

Array of objects using modern Javascript class Bubble.

sketch - Ex_11_09 Managing Many Objects

JitterBug example using old function style objects from "Getting Started..." book.

sketch - Ex_11_09 Managing Many Objects-remix

JitterBug example re-mixed to use modern Javascript class.

> Try

Compare these examples. Run them and examine the array of objects in interactive console. Note the difference between object literals and class objects.

Ex 6.2 JitterBug re-mix

sketch - Ex 6.2 JitterBug re-mix

The JitterBug example re-mixed to use a button to add JitterBugs to canvas.

> Try

  • add logic to keep the bugs on the canvas

sketch - Ex 6.2 JitterBug clamped

  • modify to drag to create bugs

sketch - Ex 6.2 JitterBug drag

  • limit the number of bugs created

sketch - Ex 6.2 JitterBug limit

  • reduce the randomness and draw lines between the bugs

sketch - Ex 6.2 JitterBug line

  • modify to draw individual figures
  • add button to save figure as JSON
  • animated drawn figures
  • replicate figures at different sizes and positions

Getting Started with p5.js book sketches

Sketches from the Getting Started book You are invited to remix and combine them to further explore.

  • Chapter 10 Objects

Ex_10_01 Make an Object
Ex_10_02 Make Multiple Objects
Ex_10_99 Robot Object

  • Chapter 11 Arrays

Ex_11_01 Many Variables
Ex_11_02 Too Many Variables
Ex_11_03 Arrays, Not Variables
Ex_11_04 Declare and Assign an Array
Ex_11_05 Assigning to an Array in One Go
Ex_11_06 Revisiting the First Example
Ex_11_07 Filling an Array in a for Loop
Ex_11_08 Track Mouse Movements
Ex_11_09 Managing Many Objects
Ex_11_10 Sequences of Images
Ex_11_99 Robot Array