Programming for Visual Artists

ARTS-A0701 – Digital Art 1 (2cr)

Lecture 5, 10.3.2020

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: Line study
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
  • Noise
  • 2D transformations
  • Assignment 4: (Generative) animation

noise line

let cy, ny;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cy = height/2;
  ny = 0;
  stroke(0,15);
}

function draw() {
  for(let x = 0; x < width; x += 1) {
    let y = map(noise(x*0.01, ny), 0, 1, cy-100, cy+100);
    point(x,y);
  }
  ny += 0.01;
}
let nx = 0;
let ny;
let nr;

function setup() {
  createCanvas(windowWidth, windowHeight);
  ny = random(100);
  nr = random(100);
  noFill();
  stroke(0,15);
}

function draw() {
  //background(220);
  let x = map(noise(nx), 0, 1, 0, width);
  let y = map(noise(ny), 0, 1, 0, height);
  let r = map(noise(nr), 0, 1, 50,200);
  ellipse(x, y, r);
  nx += 0.01;
  ny += 0.01;
  nr += 0.01;
}
let nx = 0;
let ny;

function setup() {
  createCanvas(windowWidth, windowHeight);
  ny = random(100);
  noFill();
  stroke(0,15);
}

function draw() {
  //background(220);
  let x1 = map(noise(nx), 0, 1, 0, width);
  let y1 = map(noise(ny), 0, 1, 0, height);
  let x2 = map(noise(nx+100), 0, 1, 0, width);
  let y2 = map(noise(ny+100), 0, 1, 0, height);
  
  line(x1,y1, x2, y2);
  
  nx += 0.001;
  ny += 0.001;
}

drawing a circle with for

let cx, cy;
let ny = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cx = width/2;
  cy = height/2;
  angleMode(DEGREES);
}

function draw() {
  background(220);
  for (let a = 0; a < 360; a += 0.1) {
    let r = map(noise(a*0.1, ny), 0, 1, 200, 250); 
    let x = cx + cos(a) * r;
    let y = cy + sin(a) * r;
    point(x,y);
  }
  ny += 0.01;
}

noise

2D transformation

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

function draw() {
  background(220);
  
  push();
  let x = map(sin(frameCount*0.01), -1, 1, 0, width-200);
  translate(x,100);
  stroke(0);
  ellipse(100,100,200);
  ellipse(50,50,50);
  ellipse(150,50, 50);
  pop();
  
  push();
  translate(100, 500);
  stroke(255,0,0);
  ellipse(100,100,200);
  ellipse(50,50,50);
  ellipse(150,50, 50);
  pop();
}

Assignment 4: Generative animation

  1. Animate your assignment 1 using 2D transformations and sin() or noise()
  2. Create a generative image using noise