Week 10 - Autonomous Drawing Agents

Today

warmup: Fake Concert Posters
Classes and Objects
Autonomous Drawing Agents

Warmup Activity: Fake Concert Posters

Dream 1

Dream 2

Mysterious incredible concert lineup posters started popping up around Paris, New York and Los Angeles.

People noticed years were missing, or the location, or misspellings of the band names.

André Saraiva a.k.a. Monsieur Andre / Monsieur A

Fake Concert Poster Recipe

Decide on the bands/musicians.
Choose fonts.
- Download the ttf or otf font file.
- Upload to your sketch folder.
- Create a global variable that will be used to ‘hold’ your font. (Note: You can use an array if you use a large number of fonts)
- Load the font(s) in your preload.
switch to your font with textFont(variableName)
Write text with text("string",x,y,[optional text box width, optional height])

Advanced challenge: Have your poster work on multiple screen sizes so that it looks good on laptop, phone, etc. You will want to use windowWidth, windowHeight and what else?

Classes and Objects

We’ve previously discussed functions. They are modular chunks of code that can be called and run again and again. They help us make our code easier to follow, and can reduce typing.

Now we are ready to learn classes and objects, which go hand in hand. A class is also a modular, reusable bit of code. We can think of a class as a cookie cutter, and the objects that can be made from a class get stamped out like cookies. A class is used to specify a template for objects, which have their own data (variables) and functions.

For example, imagine we have the class Person. Each person has their own height, eyeFill color, name, for example. Jerome is a Person. He has his own height, eye color, name (Jerome). And all Persons have the function to walk() , talk() for example. Jerome has his own walk() which is a longer stride. Monique has her own height, eye color, name (Monique). She is a bit shorter and has a shorter stride in her walk().

By convention, we capitalize the first letter of the name of a class.

Example Class

class Bug {
  constructor() {
    this.c = color(random(255),random(255),random(255));
    this.x = random(width);
    this.y = random(height);
  }

  drawBug(){
     fill(this.c);
     ellipse(this.x,this.y,20,20);
  }
}

The Bug class will be used with our sketch. The rest of our sketch should look mostly familiar.

let cricket, spider;

function setup(){
  createCanvas(500,500);
  noStroke();

  cricket = new Bug();
  spider = new Bug();
}

function draw(){
  cricket.drawBug();  //the cricket has its own drawBug()
  spider.drawBug();   //& the spider has its own drawBug()
}

example code

How does a class work?

In our setup, we create two new bugs using the bug class. When a bug gets created, we are creating an instance of the bug class. When this occurs, the constructor part of the class runs first. We can think of this as the setup of the class. It creates the variables that will be used by the bug object. Since each object created by the class will have the same variables (with different values), we use this.x inside the class so that we know that the objects each have their own instance of the variables used. We normally set these variables in the constructor, then use them in methods below, which are functions that an object can use.

Creating an Array of Bug Objects

We use a for loop to fill an array of Bug objects.

let bugs = [];

function setup(){
  createCanvas(windowWidth, windowHeight);
  noStroke();
  
  for (let i = 0; i < 1000; i=i+1){
  	bugs[i] = new Bug();  
  }
  
}

function draw(){
  //background(120);
  
   for (let i = 0; i < 1000; i=i+1){
  	 bugs[i].drawBug();
     bugs[i].moveBug();
  }
  
// NO LONGER NEEDED BECAUSE OF OUR FOR-LOOP
//   bugs[0].drawBug();
//   bugs[1].drawBug();
//   bugs[2].drawBug();
//   bugs[3].drawBug();
  
//   bugs[0].moveBug();
//   bugs[1].moveBug();
//   bugs[2].moveBug();
//   bugs[3].moveBug();
  
  
}


class Bug {
	constructor() {
		this.c = color(random(255),random(255),random(255));
    this.x = random(width);
    this.y = random(height);
	}

  moveBug(){
  	this.x = this.x+random(-1,1);
    this.y = this.y+random(-1,1);
  }
  
  drawBug(){
	   fill(this.c);
     ellipse(this.x,this.y,3,3);
   }
}

example code

Passing parameters to an object

Often when we create an object using a class, we need to specify certain information. For example, if we are making a Human, we may want to specify that the human Jean-Michel has height 72 inches. If we make another Human named Matilda, we may want to specify that she is 67 inches in height.

let JeanMichel, Matilda;

function setup(){
  jeanMichel = new Human(72);
  matilda = new Human(67);

  jeanMichel.announceHeight();
  matilda.announceHeight();
}

class Human {
  constructor(tempHeight) {
    this.h = tempHeight;
  }

  announceHeight(){
    print("They are "+this.h+" feet tall");
  }
}

Let’s go back to our Bug class example to see an example of passing in multiple parameters.

let cricket, spider;

class Bug {
  constructor(x, y, bugColor) {
    this.x = x;
    this.y = y;
    this.c = bugColor;
  }

  drawBug(){
     fill(this.c);
     ellipse(this.x,this.y,20,20);
   }
}

function setup(){
  createCanvas(500,500);
  noStroke();

  cricket = new Bug(100, 150, color(30,240, 70));
  spider = new Bug(300,270,color(20,30,40));
}

function draw(){
  cricket.drawBug();
  spider.drawBug();
}

Example of class/objects with passed parameters

In-class Challenge: add a size parameter and specify a size to the class.

Intelligent Drawing Agents

Survival Research Laboratories

Mark Pauline Terrorism as Art mini-documentary

Ryoji Ikeda

Test Pattern

Test pattern in Times Square

Homework

Read Getting Started with p5.js Chapter 10 WELL
watch The Coding Train video on Classes and Objects

Assignment - Autonomous Drawing Object

Goal: Create a generative artwork that uses classes and objects.

Part 1 - Due next week

For this assignment, you are designing an autonomous drawing object. This is somewhat like a car that has driven through a puddle of paint, leaving a mark behind of its route. You must create a Class that will produce objects. The class will define an object with a shape, color, motion. Create a compelling class for objects that appear to have a mind of their own. Your class should contain enough variables so that each produced object has its own unique outcome, perhaps even making use of random, or perhaps using specified parameters, or both.

With a successful Class created, create instances of objects using that class. This will be a multi-week assignment. Create at least one class of autonomous drawing objects, and make several objects of that class. Have them draw.

Example of creating a class that uses images and rotation