Goal: create an ambient sound generator.
Use a timer. Have a random sound get selected when timer goes off and play that sound.
“One of the notes repeats every 23 1/2 seconds. It is in fact a long loop running around a series of tubular aluminum chairs in Conny Plank’s studio. The next lowest loop repeats every 25 7/8 seconds or something like that. The third one every 29 15/16 seconds or something. What I mean is they all repeat in cycles that are called incommensurable — they are not likely to come back into sync again.” — Brian Eno
Introduction to Generative Music article How Mubert (Probably) Works article
Brian Eno - How to Make Original Ambient Music video
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.
var 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()
}
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.
We use a for loop to fill an array of Bug objects.
var bugs = [];
function setup(){
createCanvas(windowWidth, windowHeight);
noStroke();
for (var i = 0; i < 1000; i=i+1){
bugs[i] = new Bug();
}
}
function draw(){
//background(120);
for (var 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);
}
}
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.
var 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.
var 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();
}
In-class Challenge: add a size parameter and specify a size to the class.
Mark Pauline Terrorism as Art mini-documentary
Goal: Create a generative artwork that uses classes and objects.
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.