Skip to content

Assignment 3

Jump to bottom Edit New page
David Ahmad edited this page Jan 20, 2016 · 35 revisions

Reading

  1. Chapter 10: Getting Started with p5.js
  2. Transformations tutorial by Gene Kogan

Videos

Example Code

Coding

  1. Design a sketch in an object-oriented fashion. Try to eliminate code from setup() and draw()) except for the core requirements (createCanvas(), background(), etc.) and calls to objects. Your object can be anything but one thing you might consider is building a particle system. A particle system can be used to simulate: rain, snow, fireworks, explosions, smoke, etc. For this first step, you would create a single Particle object or maybe two on the screen using separate variables. Here are some steps you can follow: (don't need to do all of them!)
    1. Make a sketch with a single shape moving around the screen.
    2. Group the variables together in an object literal.
    3. Put one or more functions (don't forget to refer to those variables with this!)
    4. Move the code for making the object into a constructor function.
    5. See if you can make two objects from the constructor function. How can they be different?
  2. In the end the goal is to have code in draw() that only makes calls to objects. Something like:
function draw() {
  background(0);
  
  // Two objects of the same type
  apple1.chop();
  apple2.chop();

  // Another object of a different type
  orange.peel();

  // etc.
}

Blog post

  1. Document the process of creating your homework in a blog post. What were you inspired by? What pitfalls did you run into? What could you not figure out how to do? What are your next steps?
  2. If you are embedding code, consider using a github gist.
  3. Consider incorporating more media into your blog posts, links to things that inspire you, images, embedded videos, etc.
  4. Contribute any questions below.

Questions

  • your question

Sketch and blog links

Add a custom footer
Add a custom sidebar

Clone this wiki locally