Spring 2014: Week 1

##Course intro / expectations

• Where to find course materials
• Overview / syllabus
• Homework / final project
• Attendance / participation
• What is p5? (briefly)
  • A disclaimer / invitation: p5.js, like a lot of things on the web, is in active development and flux. This means: (1) If something isn’t working as expected you have to determine whether it’s a problem with your code or a bug in the library. (2) Not everything is documented. At times this can be frustrating, but ultimately, the lesson is a good one: question everything, never assume. Keep track of what you’re doing and practice systematic ways of breaking down problems to find solutions. Google is your friend, don’t be afraid of what you don’t know. **Later, we will talk about how to create an issue on github for tracking bugs.

##Intro to workflow with p5.js

• Get a text editor:
  • Sublime -- recommended, need a license or deal with pop ups
  • TextWrangler -- free
  • brackets.io -- free, dynamic code update, a little more confusing gui at first
• Set up a server (Python SimpleHTTPServer or Apache):
  • Tutorial: setting up a local server
  • Tutorial: MacOS Python SimpleHTTPServer steps
• Set up your first sketch:
  • Tutorial: getting started with p5
• Use the console.
  • Browser debugging: Chrome Developer Tools (tutorial) / Firefox Firebug (tutorial)
• You could also consider using JSFiddle for quick and dirty experiments.
  • Here is a sample JSFiddle using p5.js
  • To get a fiddle to work, you need to:
    • reference the p5.js CDN as an external resource.
    • select "No-Library (pure JS)" and "no wrap" under options.

##Processing > p5 conversion

• Tutorial: Processing > p5 conversion
• Variables do not specify a type. Use var instead of float, int, double, long, char, String, Array, etc.
• A var can be anything -- any of the types mentioned, but also functions.
• You do not specify a return type for functions.
• Currently, not all Processing functionality is supported in p5.js, and the syntax for a few have changed slightly. See API and API progress for up-to-date documentation of all supported functions and future plans.

##Intro to JavaScript: basics

• File setup, using <script>

• Variables and data types

  • Numbers
  • Strings
    • Built-in JS String functions
    • p5 string functions
  • Booleans
  • Functions
  • Objects
  • Arrays
  • Null
  • Undefined

• Operators

  • Arithmetic: +, -, *, /, %, ++, --
  • Equality: ==, ===, !=, !==
  • Relational: <, >, <=, >=
  • String: +, equality, relational
  • Logical: &&, ||, !

• Logic

  • if, else if, else
  • switch, case
  • for(var i=0;...) vs for (var k in arr)
  • while, do...while
  • break, continue

• Arrays

  • Creating, initializing, setting, accessing elements
  • Built-in JS array functions
  • p5 array functions

• Objects

  • Setting and accessing properties and methods

• Functions

  • Function definition
  • Passing in args
  • return

• Scope

##Homework

• Section 1, Lauren
• Section 2, Dan