What was your process to remix?
What did you look for in their code?
How did you clean it up?
For the next few weeks we’ll talk about a few contemporary interactive media artists whose work lives on or dialogues with the Internet and whose work is built in code.
Today we’ll examine the work of:
Can you explain what happens?
Example code of minimal nested for loop
function setup() {
createCanvas(400, 400);
background(220);
for (let x=0;x<width;x+=20){
for (let y=0;y<height;y+=20){
//fill(random(255));
rect(x,y,20,20);
}
}
}
We discussed the basics of arrays. Arrays let you hold a list of variables.
//from Getting Started with p5.js 11-8
var num = 60;
var x = [];
var y = [];
function setup() {
createCanvas(400, 400);
noStroke();
for (var i = 0; i < num; i++){
x[i] = 0;
y[i] = 0;
}
}
function draw() {
background(0);
//Copy array values from back to front
for (var i = num-1; i > 0; i--){
x[i] = x[i-1];
y[i] = y[i-1];
}
x[0] = mouseX; //set the first element
y[0] = mouseY; //set the first element
for (var i = 0; i < num; i++){
fill(i * 4);
ellipse(x[i], y[i], 40, 40);
}
}
Arrays can be multidimensional. So far we have talked about a 1-dimensional array.
Each element in the array has a single number that assigns where it is location. 0 is the first element in the array. 1 is the next element. And so on.
A chessboard is 2-dimensional. There is a X, Y position for every space on the chessboard. So we need to give two numbers to identify a space in this 2-dimensional array.
Our pixel array is even more complex. For each individual pixel in our canvas sketch, there is a X and Y location.
We can change grab and change a pixel individually with get() and set().
Additionally, p5js gives us a pixels array. It is very long, and it corresponds to all of our canvas pixels.
The pixel array is 1-dimensional but our canvas is 2-dimensional.
pixels = [_, _, _, _, _, _, _, .........]
How does this work? Each pixel has a number for its red, green and blue value as well as its alpha (transparency). So the very first pixel, the pixel located at 0,0 in our grid are the first four values in the pixel array.
pixels = [R, G, B, A, ..........]
The formula for going from a 2d grid to a one-dimensional array is (x + y * width) * 4
.
Playing with pixels
function setup() {
createCanvas(320, 240);
pixelDensity(1);
}
function draw() {
background(51);
loadPixels();
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var index = (x + y * width)*4;
pixels[index+0] = x;
pixels[index+1] = 0;
pixels[index+2] = y;
pixels[index+3] = 255;
}
}
updatePixels();
}
Our laptops have built-in webcams, and we can access them with p5.js. The video we get from the camera we call a capture.
var capture;
function setup() {
createCanvas(400, 400);
capture = createCapture(VIDEO);
capture.hide();
imageMode(CENTER);
}
function draw() {
background(50);
image(capture, mouseX, mouseY, 160, 120);
}
Using nested for loops and optionally the camera, make an interactive work that uses grids in the creation of the work.
createCanvas(windowWidth, windowHeight);