Week 3 - Automatons and Self-Drawing Machines

Date: 2025-02-11

Today

Warmup

Random walk music.

Can you create a musical random walk?

p5.sound examples

Harold Cohen and AARON

Harold Cohen - The Age of Intelligent Machines - 1987 (Clip)

Harold Cohen - Collaborations with my Other Self - 2011 (Interview)

Automatons

Maillardet’s Automaton
From The Franklin Institute

The Draughtsman-Writer, circa 1800

Objects and Arrays of Objects

What is a class?

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.

let bubbles = [];
let totalBubbles = 10;

function setup() {
    createCanvas(480, 270);
    stroke(0);
    fill(0,0,255);  
    for(let i = 0; i<totalBubbles; i++){ //fill our array with 10 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++){
      //call each object's display method 
      bubbles[i].display(); 
      // call each object's move method 
      bubbles[i].move(); 
    }
}

Writing a class

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.

Mini example of a simple class with one object

Here is an example of the code all-together.

let myBall;

function setup(){
  createCanvas(400,400);
  myBall = new Ball(); 
  
  myBall.display();
}

class Ball {
  constructor(){
    this.x = random(width); //pick random x location
    this.y = random(height); //pick random y location
  }
  
  display(){
    ellipse(this.x,this.y,20,20);
  }
}

What if we want multiple balls?

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();

An Example Class that takes input when it gets created

Default arguments

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.

Example Code here

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;
}

Lots and lots of objects - using arrays

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);
  }
}

Resources

Homework - Created a Creature Class and an object

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.

Part 1

You will make a class for a creature like a snail or bear or doodlebug. You can use primitive shapes (rects, ellipses, etc) and/or 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.

Part 2: Reading (and then add to your code)

After creating your class in section 1 and an object, now read from The Nature of Code book (free, online, though I had trouble viewing it on Firefox).

Read through Chapter 0 - Randomness, which is mostly a review of what we’ve covered so far in class. There is one additional form of randomness covered: Gaussian or “normal”.

Then read the first half or so of Chapter 1: Vectors, which will be new. If it gets hard, take a break, and then come back to it. You’ll get it!

If you can get up to section 1.7 Motion with Vectors, and are up for it, try implementing your creature’s motion as a vector.

Devlog post

After creating your creature’s class and objects made with that class, post a link to your code, and take some screenshots.

Make a post describing what you created, any design (or biological) inspirations, and what you think of the output you got. What might you change, or what questions do you have or things you’d want to learn to improve the output? Write down any useful notes on working with vectors! They might be helpful later.