Skip to content

HW 8 (Apr 3)

Jump to bottom Edit New page
Jeremy Lloyd Johnson edited this page May 7, 2017 · 27 revisions

A Bunch of Objects from a Single Class

This is due by class on Monday (April 3rd)

For your homework this week, develop a piece that is creates and manages 500 dynamic objects, created from a single class.

  • Your class should include both parameters & functions
  • The functions should cause the object to do something
  • This sketch does not necessarily need to be interactive for the user
  • Your class should be written in a separate .js file that you link to from your index.html
    • Your index you will need to include the line; <script language="javascript" type="text/javascript" src="./relativePathToMyClassFile.js"></script>
    • This should occur before the line that pulls in the sketch.js file.
    • As such, you directory should look something like.
.
├── index.html
├── myClass.js
├── sketch.js
└── libraries/
    └── p5.js
  • You will need to use an array to manage the group of objects
  • For additional practice, you should also have at least one additional function defined in your sketch. A simple example would be to create an additional function that renders the background and any other background like elements. This function could take an argument that causes these elements to change as well. Alternatively, this function could be a math function.

Suggested Workflow

Here is a suggested work flow for your sketch this week

  • Make one single object with just variables.
// Create an object with pre-defined parameters and functions
var myObj = {
    param1: value,
    param2: value,
    func1: function(){
        // reference a parameter in THIS object
        this.param1++;
    },
    func2: function(){
        // Do something
    },
}

// Add a parameter to the object
myObj.param3 = newValue;

// Add a new function to the object.
myObj.newFunc = function(arg1, arg2){
    // do something
};

// get a parameter value
myObj.param1;

// Call a function
myObj.newFunc(3, 9);
  • Put one or more functions in the object.
  • Try manually making two objects.
  • Duplicate the object using an array and make as many as you like!
  • In the end the goal is to have code in draw() that only makes calls to objects. Something like:
function draw() {
  	background(0);

	// A single object
	apple.chop();
	// Another object
	orange.peel();

	// Calling a function on all of the objects in an array
	for (var i = 0; i < grapes.length; i++) {
		grapes[i].pluck();
	}
}

Additional Resources

Additional material that you can review about objects & arrays.

  • Videos 6.1-6.5 cover more about objects, arrays, and the constructor function.
  • Getting Started with p5.js chapters 10-11 also cover the same material (In the repo).

SUBMISSIONS

Add a custom footer
Add a custom sidebar
Clone this wiki locally