Class 08 – 2016-11-01: Javascript: Canvas Simulations & emergent behavior

New problem set ps-08

More working together today. Start thinking about your Final projects. Something small that you can accomplish in 2-3 weeks.

Review problem set: 5:45 – 6:50

• Review ps-07

Questions about the reading? 6:50 - 7:00

State of 2016-SWC 7:00 – 7:15

• "Soft" (hardcore) skills
  • Being curious, brave, and exploring topics in code.
  • ½ Finding answers
  • ½ Debugging / Problem solving
• Technology survey topics
  • ✔ Git
  • ✔ HTML
  • ✔ CSS
  • ✔ Javascript
  • ½ jQuery
  • SVG ★
  • D3 ★
  • ThreeJS ★
• Concept topics
  • ✔ Variables
  • ✔ Functions
  • ½ Arrays & Objects ★
  • Data Structures
  • Higher Order functions
  • Recursion
  • L-Systems
  • Simulations
  • Random process
  • Common Recipes

Odds & Ends: 7:15 – 7:30

• jQuery
  • What is it?
  • Why is it useful?
  • How do I use it?
    • Include it as a resource in your HTML <script> tags. See a simple example
  • Where can I learn more?
    • jQuery website
    • how jQuery works
    • Overview
    • jQuery API
• 'Exporting' functions via global namespace. Reusing code.
• setTimeout
• setInterval
• requestAnimationFrame
• Array
  • Define an array to represent the screen in two ways
  • Look into an array
  • Iterate through an array

Look at "Shepherding random numbers" (deluxe random walking)

http://inconvergent.net/shepherding-random-numbers/

Random Walkers exemplars

• Thread
• Recursion Toy

A simple simulation 'random walk' in code-pen 7:50 - 8:45

This is related to Today's problem set Simulation. This is one of the simplest simulations. A line is created by the meandering path of dot as it moves over time.

• Phase 0: Develop the initial state together ~5 min.
  • A dot on the screen
  • A simple animation?
• Phase 1: Move the dot over time.
• Phase 2: What happens when we reach an edge?
• Phase 3: Exploration. Can you make this more interesting?