# 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;
}``````

# 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