Programming for Visual Artists

ARTS-A0701 – Digital Art 1 (2cr)

Lecture 3, 3.3.2020

Updated course schedule

Mon, 24.02: Introduction, discussion, Glitch intro
Mon, 02.03: P5.js editor, shapes, coordinates and colors. Assignment 1: composition with shapes
Tue, 03.03: Variables, random, if. Assignment 2: Clock
Mon, 09.03: Noise, if-else, for-loop. Assignment 3: Draw a circle
Tue, 10.03: 2D Transformations, trigonometry, functions. Assignment 4: Generative animation
Mon, 16.03: Interaction, arrays, sound. Assignment 5: VJ instrument
Tue, 17.03: Editing images and video. Assignment 6: Self portrait
Mon, 23.03: Object oriented programming: particle system. Assignment 6: Generative art 1
Tue, 24.03: Object oriented programming: natural systems. Assignment 7: Generative art 2
Mon, 30.03: Personal project
Tue, 31.03: Presentations, course feedback

Pass: personal project + 5/7 assignments

Today

  • Inspiration
  • Variables
  • Random
  • If (introduction)
  • Assignment 2: Clock

Inspiration

Variables

p5 has predefined variables we already used

width

mouseX

mouseY

 

more: https://www.youtube.com/watch?v=RnS0YNuLfQQ

Declaring a variable:

let variableName = 1234;

let anotherVariable = "Save this";

Use 'let' instead of 'var'

Why?

Variable visibility

let thisIsGlobal;

function setup() {
  createCanvas(windowWidth, windowHeight);
  thisIsGlobal = 0;
}

function draw() {
  thisIsGlobal = thisIsGlobal + 10;
}


function setup() {
  createCanvas(windowWidth, windowHeight);
  let thisIsGlobal = 0;
}

function draw() {
  thisIsGlobal = thisIsGlobal + 10;
  // ReferenceError!
  // Variable is not visible here
}

Variable visibility example

let posX;
let posY;

function setup() {
  createCanvas(400, 400);
  posX = 200;
  posY = 200;
}

function draw() {
  background(220);
  posX = posX + -2 + random(4);
  posY = posY + -2 + random(4);
  ellipse(posX, posY, 50,50);
}
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let posX = random(width);
  let posY = random(height);
  ellipse(posX, posY, 50,50);
}

Random

Lets create this using random

Lets create this using random

if

(to be continued)

Assignment 2: Clock

Create a new kind of way to show time using the functions in p5.js to get the current time and visualize the values in some novel way.