Week 03 Homework - rybotron/wnm498genart_f14 GitHub Wiki

  • Assigned: September 18, 2014
  • Due Date: September 25, 2014

Part 1. Reading

Read chapter 1 of the Nature of Code or watch the videos and study the p5.js examples.

Part 2. Coding

In this assignment, you'll be creating a JavaScript object based off of a real world thing. Use object literal notation to create the object. Plan your object before writing code by listing out on paper what the object is, what properties it needs, and how it functions. For example:

"I'm creating a Ball that has a specific type - "basketball", color - "brown", it has a certain size, a position in 2D space - x & y, that will move at varying rates of speed - xSpeed & ySpeed, and it will bounce off of the walls, ceiling, and floor"

Then in JavaScript create your object with the properties that mimic its real world properties:

var ball;

function setup(){
    ball = {
        x: 100,
        y: 100,
        xSpeed: 5,
        ySpeed: 5,
        size: 50;
        color: color(140, 70, 0,  255),
        type: "basketball",
    };
}

Add the functionality you came up with by adding methods to the object:

var ball;

function setup(){
    ball = {
        x: 100,
        y: 100,
        xSpeed: 5,
        ySpeed: 5,
        size: 50;
        color: color(140, 70, 0,  255),
        type: "basketball",

        show: function(){
            noStroke();
            fill(this.color, this.color[3]);
            ellipse(this.x, this.y, this.size, this.size);
        },

        move: function(){

          this.xPos += this.xSpeed;
          this.yPos += this.ySpeed;

          if ((this.xPos > width) || (this.xPos < 0)) {
              this.xSpeed *= -1;
          }
          if ((this.yPos > height) || (this.yPos < 0)) {
              this.ySpeed *= -1;
          }

        } 

    };

}

Then in your draw function you will call the method to show the ball which adds an ellipse to the canvas and the move method to move the ball around the screen.

function draw(){
    background(255);

    ball.show();
    ball.move();
}

Checkout the example in the homework folder to see the ball object in action.

Also, you can use your illustration p5 sketch from last week by converting it to object literal notation. So, say I drew a lightbulb that turned off and on with the mouse click. My properties would be very similar to the ball example. It would have position properties, a show method to draw it to the screen, and an switch method that checked if the mouse was clicked or not.

Extra Credit

  • Use the dat.GUI library to modify properties while your sketch is running

Submission Guidelines

  • First sync the github repo by pressing the sync button in the Github app.
  • Name your homework folder "lastname_week03"
  • Then place your folder in the week03/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