Today

• nested for-loops
• workshop: 10 print CHR$(205.5+RND(1)); : GOTO 10
  • aka a special workshop on programming history, mazes and fun with nested grids
• 1-on-1 project 1 check-ins
• camera and pixel array

Nested For Loops Grid

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);
    }
  }
}

10print workshop

In computer programming, a one-liner program originally was textual input to the command line of an operating system shell that performed some function in just one line of input. In the present day, a one-liner can be –Wikipedia, One-liner program

10 PRINT CHR$(205.5+RND(1)); :GOTO 10

10print is a well-known “one-liner” program from the early 80s, written in the BASIC language originally for Commodore 64 home computers.

10print gif, Wikipedia

The process of breaking down how “10print” works and to create a generated maze allows us to consider “creative computing” and how computer programs intersect with culture. By porting 10print to other programming languages as well gives us the ability to look at how programming languages work, their various affordances, mechanisms, and present-day community.

Image capture

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.

example code

let capture;
function setup() {
  createCanvas(400, 400);
  capture = createCapture(VIDEO);
  capture.hide();
  imageMode(CENTER);
}
function draw() {
  background(50);
  image(capture, mouseX, mouseY, 160, 120);
}

Multidimensional arrays

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.

Pixel 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 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

example code

//getting started with p5.js
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();

}

Homework

Read

• Read Chapter 11 - Arrays

Watch

• Watch The Pixel Array on The Coding Train on YouTube
• Create Capture to get a live image from the webcam
• Painting With Pixels

Code

For this project you will remix and make a new project based on published open source code. This is a practice of learning to read others’ code, to practice your own code, and to make a new artistic work.

Read through the book and website Generative Design. The entire book is published online with all of its code shared with an open source license that allows you to modify and republish your own work and code built off of theirs.

Use one of these projects as the foundation of your own new project. Start by running the code sketch. Try interacting with it. Then review the code. Go through it and figure out how it functions. How is the code organized? What functions are called? What parts of the code are you confused by? Take notes on anything that is useful.

Now duplicate the code to make the starter for a new sketch. Introduce new variables. Change forms of interactivity. Change scale, shapes, gradients, positions. Reorganize code and add in comments to help yourself. Your modifications should present a significant alteration of the previous work so that yours is clearly a new presentation in your own vision.

Deliverables:

1. Link to the original work you are starting from.
2. Link to your own modification of that work that presents a new piece.
3. Half page writeup: Why did you choose the sketch you selected? What stood out in the work? How did you begin to approach making a new iteration of the project? Describe your own created work and how it differs from the starting piece. What challenges did you run into? (How) did you solve them? In your own words, what does it mean to create an “open source” artwork?