week 3
Harold Cohen - The Age of Intelligent Machines - 1987 (Clip) - video - 2 minutes
Harold Cohen - Collaborations with my Other Self - 2011 (Interview) - video - 5 minutes
The Draughtsman-Writer, circa 1800 - video
Maillardet’s Autommaton page on The Franklin Institute
In a programming language, a class is a defined code template that is used to create objects. Objects can have default instance variables and methods (functions). We say that classes encapsulate objects.
Here is an entire example that shows how to declare and instantiate an object in your program.
Note: This does not include the Bubble class code.
var bubbles = [];
function setup() {
createCanvas(480, 270);
stroke(0);
fill(0,0,255);
for(var i = 0; i<3; i++){ //fill our array with new Bubble objects
bubbles[i]= new Bubble(random(width),random(height));
}
}
function draw() {
background(255,0,0);
for(var i = 0; i<bubbles.length; i++){
bubbles[i].display(); //call the function display from the bubble OBJECT
bubbles[i].move(); // call the function move from the bubble object.
}
}
This is at the top of a class. It’s kind of like an object’s setup. It runs once when you create an object, and assigns the instance variables to the object.
Because each object will have their own variables, we use this before the variable name when they will each have their own value.
For example:
class Ball {
constructor(){
this.x = random(width); //pick random x location
this.y = random(height); //pick random y location
}
//our class continues......
So far we have a constructor that will assign variables when we create an object. Now let’s make special functions (which we call methods) that each object will have. You do not put the word function before your method’s name. It’s understood.
//continues after the constructor from above
display(){
ellipse(this.x,this.y,20,20);
}
So now we have created a display() function. Every object created from the Ball class will have a random x and a random y. To see the ball on the screen, we’ll have to run .display(); for each object.
Here is an example of the code all-together.
let myBall;
function setup(){
createCanvas(400,400);
myBall = new Ball();
myBall.show();
}
class Ball {
constructor(){
this.x = random(width); //pick random x location
this.y = random(height); //pick random y location
}
We can leave the class alone, but add more global variables (one for each ball).
let myBall;
let yourBall;
function setup(){
createCanvas(400,400);
myBall = new Ball();
yourBall = new Ball();
myBall.show();
yourBall.show();
Maybe you don’t want each of your objects to be located at a random x and y position when they are created. Perhaps you want to specify each object’s exact position. Or its color. You can pass in values when you create an object. This is optional.
constructor(x = 100, y = 300){ }let wolfgang, clara;
class Person {
constructor(name,x,y) {
this.name = name; //takes the passed name and sets the local name variable
this.x = x //takes the passed x value
this.y = y //takes the passed y
this.message = "Hi "+this.name;
}
drawName(){
text(this.message,this.x,this.y);
}
}
function setup(){
createCanvas(500,500);
wolfgang = new Person("Wolfgang",100,200);
clara = new Person("Clara",200,350);
}
function draw(){
wolfgang.drawName;
clara.drawName;
}
If you want to make a ton of objects it’s too tedious to come up with a variable name for each of them, and then to write out all the code to make new objects and then to declare their methods. Instead, we make an array, load it in the setup with a loop, then use the methods of each object in the draw (also in a loop).
Example:
let myBubbles = []; //creates an empty array to hold all of my bubbles
function setup(){
createCanvas(400,400);
//this will loop through 10 times, create myBubbles[0] up to myBubbles[9].
for (let i = 0; i < 10; i++){
myBubbles[i] = new Bubble();
}
}
function draw(){
//let's loop through again and display each of myBubbles
for (let i = 0; i < 10; i++){
myBubbles[i].display();
}
}
class Bubble{
constructor(){
this.x = random(width);
this.y = random(height);
}
display(){
fill(0,0,190); //blue
ellipse(this.x,this.y,20,20);
}
}
Part 1 is just to display your creature on the screen. Do this before doing the reading.
Part 2 is to add a walking method to your class so your creature can move around. Do this after doing the reading and add to your creature’s class.
You will make a class for a creature like a snail or bear or doodlebug. Use primitive shapes (rects, ellipses, etc) OR use images/photos that you preload. (All images should loaded in advance in preload() before your setup).
You can start by modifying our class code examples of creating a Bubble or Ball class. Instead, yours will be called Snail class or Doodlebug or whatever. Then you can make a myBear or myDoodlebug object. Your class should have a constructor and a display method, at minimum.
Your display() method for the class should have commands like fill, ellipse, rect , etc that you will use to create your little creature. Alternatively, use preload() before setup and then draw the image to the screen in your display method. In either case, pay attention to aesthetics! It should look good.
Upload link to your saved p5.js project on Moodle, or upload.
Note: PLEASE UPLOAD BY MIDNIGHT the night BEFORE WE MEET FOR CLASS. THIS WILL GIVE ME TIME TO TAKE YOUR CLASSES AND OBJECTS, COMBINE THEM INTO ONE SKETCH AND MAKE AN ECOSYSTEM FOR ALL OUR CREATURES TO INHABIT TOGETHER for us to play with next week.
After creating your class in section 1 and an object, now read from The Nature of Code (free, online).
Read through Introduction section 1 - 3 in the book Nature of Code online, but remembering that we will be writing our code in p5.js and not Processing. Instead of int or float, use let. When you read the term ‘class’, think of the p5.js way of writing objects with the constructor function. Follow the random walker section and see if you can work through exercise I.1, creating a random walker class in p5js by adding in a step function to your object code. Then try exercise I.2 and I.3. Note that the functions such as random, noise are the same in both processing and p5js. Create your own version of the random walker, and add this code to your p5.js code for your assignment.