Exercise 07

Now let’s use a For Loop to repeat code instead of writing it multiple times.

The for statement is used to iterate over the elements of a sequence. It’s traditionally used when you have a piece of code which you want to repeat n number of time. The for loop is often distinguished by an explicit loop counter or loop variable.

// creating random horizontal lines

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(12);
}

function draw() {
    background(0);
    var lineY = random(height);
    // using a for loop to create multiple lines

for (i = 0; i <10; i++) {
    strokeWeight(random(400));
    stroke(random(200),random(50,150));
    line(0,lineY, width,lineY);
    }
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Exercise 08

// creating random vertical lines
// creating random horizontal lines

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(12);
}

function draw() {
    background(0);
    var lineX = random(width);
    // using a for loop to create multiple lines

for (i = 0; i <10; i++) {
    strokeWeight(random(400));
    stroke(random(200),random(50,150)); // two values in random creates a range
    line(lineX,0, lineX,height);
    }
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Generative Art

The term originated in a paper by Philip Galanter, artist and professor at Texas A&M University, he wrote “Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art”.

To be even more specific, as Matt Pearson, author of the fabulous book “Generative Art” said “With generative art, the autonomous system does all the heavy lifting; the artist only provides the instructions to the system and the initial conditions. The artist’s role in the production process may be closer to that of a curator than a creator. You create a system, model it, nurture it, and refine it, but ultimately your ownership of the work produced may be no more than a parent’s pride in the work of their offspring.”

Additionally Clive Thompson outlines in his book “Smarter Than You Think” that there is a new hybrid model of collaboration where human and machine work together. Thompson describes how a new generation of chess players have emerged in the past decade that use simple laptop to do the difficult predictive analysis but use their human intuition to be far more effective than their human or computer opponents.

It is this hybrid approach that we’re aiming for in this Generative Art course, where an artist creates a set of instructions (a program) that will by itself or with some human interaction generate a number of different art pieces and the artist can choose the best that have been output.

Finally, as Pearson puts it “The artist creates ground rules and formulae, usually including random or semi-random elements, and then kicks off an autonomous process to create the artwork. The system can’t be entirely under the control of the artist, or the only generative element is the artist herself. The second hard-and-fast rule therefore is there must be a degree of unpredictability. It must be possible for the artist to be as surprised by the outcome as anyone else.”

To achieve Generative Art we’ll need to learn about Object Oriented Programming (OOP).

Exercise 09

Animate Circle Part I

We’re going to learn how to animate an object next. We’ll start by increasing the X value of a circle to make it move horizontally to the right. Remember that the background must be redrawn at the beginning of the draw loop to ‘erase’ the last circle drawn.

var speed = 10;
var circleX = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
    fill(193,255,62);
}

function draw() {
    background('#1BB1F5');
    ellipse(circleX,50, 50, 50);
    circleX = circleX + speed;
}

Exercise 10

Animate Circle Part II

An introduction to a conditional: if statement

var speed = 10;
var circleX;

function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
    fill(193,255,62);
    circleX = 0;
}

function draw() {
    background('#1BB1F5');
    ellipse(circleX,50, 50, 50);
    circleX = circleX + speed;

    if(circleX >= width) {
        circleX = width;
        speed = -speed;
    } else if (circleX <= 0) {
        circleX = 0;
        speed = -speed;
    }
}

Exercise 11

Animate Circle Part III

Next we’ll add another dimension to the animation, allowing the circle to move in X and Y coordinate space.

// initial position for our circle
var circleX = 300;
var circleY = 20;
// how much to move the circle on each frame
var speedX = 10;
var speedY = -10;

function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
    fill(193,255,62);
    circleX = 0;
}

function draw() {
    background('#1BB1F5');
    ellipse(circleX,circleY, 50, 50);
    circleX = circleX + speedX;
    circleY = circleY + speedY;

    // is the circle too far right?
    if(circleX > width) {
      circleX = width;
      speedX = -speedX;
      print("too far right");
    }
    // is the circle too far up?
    if(circleY > height) {
      circleY = height;
      speedY = -speedY;
      print("too far up");
    }
  // is the circle too far to the left?
    if(circleX < 0) {
      circleX = 0;
      speedX = -speedX;
      print("too far left");
    }
    // is the circle too low?
    if(circleY < 0) {
      circleY = 0;
      speedY = -speedY;
      print("too low");
    }
}

Exercise 12

Sound in P5

To use sound with P5 first we will have to learn how to make a local web server. P5 requires a web server to allow Javascript to load files. There are many ways to create a web server but we’ll go with the easiest way for now. We will install a Chrome extension called Web Server for Chrome.

Then download this audio to load into P5, then put it into a new folder called audio and move that into your P5 folder. When you activate your web server extension it will ask you to select a folder – select your P5 folder and you should be able to see it properly in the browser.

var song;

function preload() {
  song = loadSound("../audio/myBeat.mp3");
}

function setup() {
    createCanvas(windowWidth, windowHeight-100);
    background(51);
    slider = createSlider(0,1,0.5,0.01);
    button = createButton("Play");
    button.mousePressed(togglePlay);
	// song.loop();
}

function togglePlay() {
    if (!song.isPlaying()){
        song.play();
        button.html("Pause");
    } else {
        song.stop();
        button.html("Play");
    }
}

function draw(){
    background(0);
    song.setVolume(slider.value());
}

Exercise 13

Sound Example with visual

The next exercise will use the amplitude (loudness) of the song loaded to change the size of a circle.

var song;
var button;
var amplitude;

function preload() {
  song = loadSound("../audio/myBeat.mp3");
}

function setup() {
    createCanvas(windowWidth, windowHeight-100);
    background(51);
    slider = createSlider(0,1,0.5,0.01);
    button = createButton("Play");
    button.mousePressed(togglePlay);
	// song.loop();
    amplitude = new p5.Amplitude();
}

function togglePlay() {
    if (!song.isPlaying()){
        song.loop();
        button.html("Pause");
    } else {
        song.stop();
        button.html("Play");
    }
}

function draw(){
    background(0);
    song.setVolume(slider.value());

    var vol = amplitude.getLevel();
    var diam = map(vol, 0, 1, 10, height);
    fill(255, 0, 255,200);
    ellipse(width/2, height/2, diam, diam);
}