Creative Coding Week 4: Exercise 2 - One Pixel Cinema
A sketch was supplied in the course material that draws vertical bars of a single colour corresponding to points in the picture. The points in the picture are circled and the circles migrate down the page updating the vertical bars. I amended the sketch to use a picture of any size; scaling the picture to fit in the sketch.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 4, 03 - one pixel cinema
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014 Monash University
*
* Modified by Gerard Holden to load a picture of any size and scale it.
*
* This simple sketch demonstrates how to read pixel values from an image
* It simulates a 10 pixel "scanner" that moves from the top to the bottom of the image
* reading the colour values for 10 equally spaced points, then displaying those colours
* as vertical bars on the left half of the screen.
*
*/
PImage myImg;
color[] pixelColors;
int scanLine; // vertical position
float imgH;
float iScale;
void setup() {
// size(800, 800);
myImg = loadImage("Garden.jpg");
float picW = myImg.width;
float picH = myImg.height;
iScale = 500/picW;
imgH = picH*iScale;
size(800,(int) imgH);
pixelColors = new color[10];
scanLine = 0;
smooth(4);
}
void draw() {
background(0);
// read the colours for the current scanLine
int interval = (int) myImg.width/10;
for (int i=0; i < 10; i++) {
pixelColors[i] = myImg.get(interval/2 + i * interval, scanLine);
}
// draw the sampled pixels as vertical bars
for (int i=0; i < 10; i++) {
noStroke();
fill(pixelColors[i]);
rect(i*30, 0, 30, imgH);
}
// draw the image
pushMatrix();
scale(iScale);
image(myImg, 300/iScale, 0);
popMatrix();
// increment scan line position every second frame
// if (frameCount % 2 == 0) {
scanLine ++;
// }
if (scanLine > myImg.height) {
scanLine = 0;
}
// draw circles over where the "scanner" is currently reading pixel values
for (int i=0; i < 10; i++) {
stroke(255, 0, 0);
noFill();
ellipse(300 + (interval/2 + i * interval)*iScale, scanLine*iScale, 5, 5 );
}
}