Introduction

Workshop Goals:

Explore the concepts and skills of creative coding

Throughout the workshop we’ll help you develop practical programming concepts and skills by exploring creative ideas and challenges. We’ll be looking at Generative Art and Algorithmic Composition to help us generating visuals and sound by coding, so you can gain a greater understanding of how best to express your own creative vision using the software you write.

The aim is to teach you “algorithmic thinking” – ways to conceptualize and model the world so you can express creative ideas using computer programs.

P5 & Processing

I’ve chosen to use the P5 Javascript library for this workshop for various reasons, mainly to build of a bit of prior knowledge of Javascript and to be able to publish the ideas easily to the web.

P5 is a Javascript branch of Processing, a popular, very-high-level programming language that began at MIT in 2001. Originally developed by MIT Media Lab alums Casey Reas and Benjamin Fry—both artists and technology thinkers, Processing was intended to be a learning language, a tool to get non-programmers, particularly artists, hooked on code via the promise and delivery of immediate visual feedback.

If you’re interested in learning more about the history of Processing, here’s an interesting article about it.

Exercise 01

Let’s start with something simple…


// lines that begin with two slashes are comments for yourself
// point() draws a pixel on the display

point(50,50);
point(51,50);
point(52,50);
point(53,50);
point(54,50);
point(55,50);

// the first number is the X value (distance from the left border)
// the second number is the Y value (distance from the top border)


// line() draws a line on the display

line(0,0,99,99);

// use the menu Help > Reference to learn more about
// point() and line()

Exercise 02

There are two main functions (blocks of code) commonly used in a P5js sketch: Setup and Draw.

The setup function runs only once and the draw function loops indefinitely.

function setup() {
// create a canvas the size of the browser window
createCanvas(windowWidth, windowHeight);
} // the draw() function is called many times per second // it's very useful for animating objects function draw() { // background function erases the screen with a colour background(255, 204, 0); line(random(100), random(100), random(100), random(100)); }

Exercise 03

We can stop our draw loop by using noLoop() in the setup

// here the draw loop only will run once
// refresh browser window to get new result

function setup() {
createCanvas(windowWidth, windowHeight);
noLoop();
}
function draw() {
// choose a random background color
background(random(255), random(255), random(255));
line(random(width),random(width),random(width),random(width));
}

Exercise 04

Now let’s draw lines from the centre of our sketch but let’s calculate the centre and randomly pick end points for our lines.

// drawing lines from the center of the canvas
// why does the X and Y of second point need to be between 0 and width

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0); // this makes the background black
}
function draw() {
    stroke(random(255)); 
    // start lines in the middle of the screen (width/2, height/2)
    line(width/2, height/2, random(width), random(height));
}

Coordinate System Quiz

For the first sketch:
“A black outlined square with a red horizontal line from the midpoint of the left side toward the middle of the right side.”

For the second sketch:
“A black outlined square with a red diagonal line from the lower left corner toward the upper right corner; and another red line from the lower right corner to the upper left.”

For the third sketch:
“A black outlined square with a red diagonal line centered on the axis between the upper left and lower right corners and another red diagonal line centered on the axis between the lower left and upper right corners.”

For the fourth sketch:
“A black outlined square with a red horizontal line centered on the axis between the midpoint of the left side and the midpoint of the right side and a red diagonal line centered on the axis between the lower left and upper right corners.”

Review 1

The color() function is used to create a variable of the type color. This is handy if you need to create colors you can use anywhere in your sketch. In this example, I’ve declared a color variable named c, before the setup() function.

The fill() function is used to set the fill color of the shape you’re about to draw. It can be used with one to four parameters. You can also use a color variable for this.

The noFill() function is used to disable the fill before you draw a shape to the screen.

The stroke() is similar to the fill() function, but sets the color for the stroke of the shape you want to draw.

The noStroke() function is used to disable the stroke before you draw a shape to the screen.

The background() function is used to set the background color. This will usually be the first function you’ll use inside the draw() function, as it will clear the screen. You can’t use transparent colors with this function. If you do, the alpha value will be ignored.

The first parameter in colorMode() is used to set the color mode. This can be either RGB or HSB. The default color mode is RGB, with values between 0 and 255.

You can use colorMode( RGB, 1.0 ) to use values between 0 and 1 for the color
components. If you want to use HSB colors, you’ll usually use colorMode( HSB,
360, 100, 100 ), as these numbers are used in most graphics applications.

Exercise 05

Now let’s change the stroke colour randomly for each line.

// drawing lines from the center of the canvas
// why does the X and Y of second point need to be between 0 and width

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0); // this makes the background black
}
function draw() {
    stroke(0, 0, random(255)); // R, G, B
    // start lines in the middle of the screen (width/2, height/2)
    line(width/2, height/2, random(width), random(height));
}

Exercise 06

Let's make random horizontal lines

// creating random horizontal lines
 function setup() {
     createCanvas(windowWidth, windowHeight);
     frameRate(12);
 }
 function draw() {
     background(0);
     var lineY = random(height);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

 // let's create 4 lines for each Loop
 // next we will do this an easier way

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);
 }
 function mousePressed() {
   noLoop();
 }
 function mouseReleased() {
   loop();
 }