Week 8 - Camera and Pixel Array

Today

  • due: drawing software
  • warmup: workshop on 10 print CHR$(205.5+RND(1)); : GOTO 10
    • aka a special workshop on programming history, mazes and fun with nested grids
  • fonts
  • 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

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

Resources

Generative Design - Entire book online with code here