Week 04 Homework - rybotron/wnm498genart_f14 GitHub Wiki

Analyze, hack, & remix

Part 1. Reading

Read chapter 2 of the Nature of Code or watch the videos and study the p5.js examples. This week's homework is inspired by NYU's creative JavaScript class. For this assignment you will be reinterpreting an interactive JavaScript piece you’ve found online.

Part 2. Coding

Find a JavaScript project/piece online that you like, choose some part of it to reinterpret/reproduce with p5.js. This does not need to be an exact replica, but rather, think of it like pulling out some chunk, breaking it down, and using it as the basis for creating your own sketch. Use at least one class(prototype) in your code.

View the source of the project you've chosen using command + option + u in Chrome or command + u in Firefox. For Safari you must have the the “Show Develop menu in menu bar “option checked in Safari’s preferences under the advanced tab then the shortcut is command + option + u.

Then, examine and analyze the JavaScript and see what pieces of the code you understand. Sometimes you will be able to find small bits of the code you can use as a basis for your sketch, although you need to create your own code, not just steal a section from someone else. For example if we view the source of http://www.patatap.com/src/main.js on line 141 we see a switch statement:

switch (code) {
    switch (code) {
       // Q - P
      case 81:
        index = '0,0';
        break;
      case 87:
        index = '0,1';
        break;
      case 69:
        index = '0,2';
        break;
      case 82:
        index = '0,3';
        break;
      case 84:
        index = '0,4';
        break;
      case 89:
        index = '0,5';
        break;
      case 85:
        index = '0,6';
        break;
      case 73:
        index = '0,7';
        break;
      case 79:
        index = '0,8';
        break;
      case 80:
        index = '0,9';
        break;
// It continue to line 235..

This is the conditional that is assigning the keyboard presses to specific animations and sounds. We can do something very similar inside of a function keyPressed() or function keyTyped() in p5.js to create a new object using your prototype class and display it, trigger an animation, or any number of things. Take a look at example 06 from this week.

Many things you find may be built on top of another JS library, take some time to look around these and get a sense for how the functions and structure compares to p5.js.

Some places to start looking:

Submission Guidelines

  • First sync the github repo by pressing the sync button in the Github app.
  • Name your homework folder "lastname_week04"
  • Then place your folder in the week04/homework folder of the repo and commit
  • Then add your name and link to the project at the bottom of the wiki entry

Homework Links