Programming for Visual Artists

ARTS-A0701 – Digital Art 1 (2cr)

Lecture 4, 9.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

View examples on p5.js Web Editor:

Today

  • Inspiration
  • If-else
  • For-loop
  • Noise
  • Assignment 3: Circle

Inspiration

if-else

let x = 0;
let speed = 10;

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

function draw() {
  if (x < width) {
    x += speed;
  } else {
    x = 0;
  }
  ellipse (x, height/2, 50, 50);
}
let x = 0;
let speed = 10;

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

function draw() {
  if (x > width || x < 0) {
	speed *= -1;
  }
  x += speed;
  ellipse (x, height/2, 50, 50);
}
let x = 0;
let speed = 10;

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

function draw() {
  if (x < 0 || x > width) {
    speed = speed * -1;
  }
  x += speed;
  ellipse(x, height / 2, 50, 50);
}

for

let x = 0;
x+=2;
x+=2;
x+=2;
x+=2;
x+=2;
print(x);
let x = 0;
let i = 0;

while(i < 5) {
  x += 2;
  i++;
}

print(x);
let x = 0;

for (let i = 0; i < 5; i++) {
  x += 2;
}
print(x);

colouring the canvas with for

drawing a line with for

let cy, px, py;
let h = 200;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cy = height / 2;
  px = 0;
  py = cy;
  stroke(0, 30);
}

function draw() {
  h = map(mouseY, 0, height, 20, 200);
  let alpha = map(mouseX, 0, width, 10, 255);
  stroke(0, alpha);
  background(255, 5);
  for(let x = 0; x < width; x+=50) {
    if (x == 0) {
      px = 0;
    }
    let y = cy + random(-h,h);
    //point(x,y);
    line(px,py, x, y);
    px = x;
    py = y;
  }
}
let cy, px, py;
let h = 200;
let nx = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cy = height / 2;
  px = 0;
  py = cy;
  stroke(0, 30);
}

function draw() {
  h = map(mouseY, 0, height, 20, 200);
  let alpha = map(mouseX, 0, width, 10, 255);
  stroke(0, alpha);
  background(255, 5);
  for(let x = 0; x < width; x+=1) {
    if (x == 0) {
      px = 0;
    }
    //let y = cy + random(-h,h);
    let y = cy + map(noise(nx), 0, 1, -h, h);
    //point(x,y);
    line(px,py, x, y);
    px = x;
    py = y;
    nx += 0.1;
  }
}

drawing a circle with for

noise

Assignment 3: Line study

Use noise to draw a line and animate it.