Programming for Visual Artists

ARTS-A0701 – Digital Art 1 (2cr)

Lecture 2, 2.3.2020

Today

  • About generative art
  • p5.js intro
  • Shapes, coordinates and colors
  • Assignment 1

About Generative Art

Piet Mondrian, Tableau I, 1921

Optional reading

p5.js editor

(if you really don't want to work with a browser editor follow this guide: https://p5js.org/get-started/)

Let's create an save our first sketch

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

function draw() {
  if (mouseIsPressed) {
    ellipse(mouseX, mouseY, 50, 50);
  }
}

p5.js intro

function setup() {

}

function draw() {

}

Code here between { and } is executed once in the geginning

Code here between { and } is executed over and over again

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Call a function 'createCanvas' with the parameters 400 and 400. First parameter sets width and secon sets height.

Call a function 'background' with the parameter 220. A single parameter sets a grey value between 0 (black) and 255 (white)

JS is case sensitive. createcanvas is different than createCanvas

Each statement should end in a semicolon ;

function setup() {
  //This is a comment
  //Computer skips all comments
  //Sometimes is't good to write notes in your code
  createCanvas(400, 400);
}

function draw() {
  background(220);
}
function setup() {

}

This defines a function called setup that takes zero parameters

p5.js calls the setup function once in the beginning of execution

Now we're only missing variables, conditional statements, loops, arrays and classes and we're done!

Shapes, coordinates and colors

Coordinates and shapes

Colors

Composition

Use 2d-primitives (https://p5js.org/reference/#group-Shape) and colours to create a composition. For now lets create a static composition and later we can animate it

 

Submit a editor.p5js.org link on MyCourses: https://mycourses.aalto.fi/course/view.php?id=24055&section=2

Other resources