Week 8 - Camera and Pixel Array

Today

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

10print

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

10print
10print gif, Wikipedia

Fonts review

Fonts are a type of media and loaded similar to loading images with a key difference.

Calling loadFont() inside preload() guarantees that the load operation will have completed before setup() and draw() are called.

Steps:

  1. Find a font! You can use a system font that everyone has installed, like Arial or Tahoma, or find a new one that will be loaded from the web.
  2. For example, there are fonts at Google Fonts
  3. Add a link to the font in your index.html file inside the <head> section.
  4. Use textFont to change to your font.
  5. Change size with textSize(18); and display text with text("my words",x,y);

Note that fill and stroke affect your fonts!

You can specify a width and height parameter to display text inside a box.

More info in the reference.

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

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.

chessboard

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

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?