Notes for NextCS

Fri, (1/14):
- We talked about Fade-to-black, and the two different methods of doing it:
- Let's suppose that we need to take color image to black in 10 steps (at the normal 60 frames/sec, that's 1/6 sec).
- We can keep a copy of the original image, as we loaded from disk, and access its pixels array, and reduce each color value by subtracting the same amount from the color value on its way to zero.
- Another way of saying the same thing, is that on the first step, each color in each pixel is reduced to 90% of its original value. And then to 80%, and to 70%, etc.

PImage fred;
Iter = 0;
MaxIters =10; // fade in 10 steps

void setup() {
size(600,600);
fred = loadImage("fred.jpg");
fred.resize(width,height);
fred.loadPixels();
image(fred,0,0);
loadPixels();
}

void draw() {
if (Iter <= MaxIters) {
    float factor = (MaxIters - Iter) / MaxIters;
    for (int i = 0; i < width*height; ++i) {
      int pixel = fred.pixels[i];
      float r = red(pix) * factor;
      float g = green(pix) * factor;
      float b = blue(pix) * factor;
      pixels[i] = color(r,g,b);
    }
    updatePixels();
    Iter += 1;
}
}

Wed (1/12): We covered:
- A PImage object has a number of instance variables like width and height, and useful methods like image(), resize(). Take a look at the other methods available in PImage.

Tues (1/11): We covered:
- How to convert from screen coordinates (row,col) to the index in the pixels[] array:
      index = row*width + col
And vice versa:
      row = index / width
      col = index % width

- We can load the data from a picture file (located in the current sketch's directory). Assume a picture file: "harry.jpg" ... let's display it on the screen.

PImage fred;
void setup() {
   size(600,600);
   fred = loadImage("harry.jpg");
   image(fred,0,0);
}

- Look at the documentation for the image() function...

- Task: show a grayscale version of the "harry.jpg"...

PImage fred;
void setup() {
   size(600,600);
   fred = loadImage("harry.jpg");
   image(fred,0,0);
   loadPixels();
   for (int i = 0; i < width*height; ++i) {
      float myred, mygreen, myblue;
      myred = red(pixels[i])
      mygreen = green(pixels[i]);
      myblue = blue(pixels[i]);
      pixels[i] = color((myred+mygreen+myblue)/3);
   updatePixels();
}

Mon (1/10): We covered:
- loadPixels(): which copies the pixels from the screen to a linear array called pixels[] whose size is width*height of ints
- each element of the pixels[] array is the color of the corresponding pixel on the screen
- you can modify the pixels and then send them back onto the screen using updatePixels()

To create a white screen with a horizontal red line and vertical blue line, both going through the origin:


void setup() {
  size(600,500);
  loadPixels();
  // paint the pixels[] white:
  for (int i = 0; i < width*height; ++i)
    pixels[i] = color(255);
  // horizontal red line through the origin
  for (int i = 0; i < width; ++i)
    pixels[height*width/2 + i] = color(255,0,0);
  // vertical blue line through the origin
  for (int i = 0; i < height; ++i)
    pixels[i*width + width/2] = color(0,0,255);
  updatePixels();
}