Arrays and Images
Arrays and Images¶
/* Code from the tutorial, refactored with added flexibility. */
int[] x = {
50, 61, 83, 69, 71, 50, 29, 31, 17, 39
};
float barHeight; // height in relation to height of the canvas
float factor; // increase bar length to fit canvas width
void setup() {
size(400, 500);
barHeight = height/x.length;
factor = float(width)/max(x);
println(factor);
noStroke();
}
void draw() {
for (int n = 0; n < x.length; n++) {
fill(map(x[n], 0, max(x), 0, 255));
rect(0, n*barHeight, x[n]*factor, barHeight);
}
noLoop();
}
/* Code from the section "Record Data" from within the tutorial, modified.*/
int num = 50;
int[] x = new int[num];
int[] y = new int[num];
color c = color(255, 30, 60, 102);
void setup() {
size(800, 800);
fill(c);
}
void draw() {
background(100, 160, 210);
// Shift the values to the right
for (int i = num-1; i > 0; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}
// Add the new values to the beginning of the array
x[0] = mouseX;
y[0] = mouseY;
// Draw the circles
for (int i = 0; i < num; i++) {
noStroke();
ellipse(x[i], y[i], i/2.0, i/2.0);
stroke(c);
line(width/2, height/2, x[i], y[i]);
}
}
/* Code from above applied to the "irregular mapping" example. */
int num = 50;
int[][] xy1 = new int[num][2];
int[][] xy2 = new int[num][2];
int[][] xy3 = new int[num][2];
void setup() {
size(500, 300);
background(125);
noStroke();
noCursor();
fill(255, 102);
}
void draw() {
background(50);
// First
// Shift the values to the right
for (int i = num-1; i > 0; i--) {
xy1[i][0] = xy1[i-1][0];
xy1[i][1] = xy1[i-1][1];
xy2[i][0] = xy2[i-1][0];
xy2[i][1] = xy2[i-1][1];
xy3[i][0] = xy3[i-1][0];
xy3[i][1] = xy3[i-1][1];
}
// Add the new values to the beginning of the array
xy1[0][0] = mouseX;
xy1[0][1] = mouseX/2;
xy2[0][0] = mouseY;
xy2[0][1] = mouseX/2;
xy3[0][0] = mouseX;
xy3[0][1] = mouseY/2;
// Draw the circles
for (int i = 0; i < num; i++) {
circle(xy1[i][0], xy1[i][1], i/2.0);
circle(xy2[i][0], xy2[i][1], i/2.0);
circle(xy3[i][0], xy3[i][1], i/2.0);
}
}
/* Modified version of an example from Processing: A Programming Handbook for Visual Designers by Casey Reas and Ben Fry */
PImage img;
int y = 0;
void setup() {
size(749, 564);
img = loadImage("image_.png");
}
void draw() {
image(img, 0, 0);
y = mouseY;
for (int x = 0; x < img.width/2; x++) {
color c = get(x, y);
stroke(c);
int posx = x + img.width/2 + 1;
line(posx, 0, posx, height);
}
// white line at the mouse position
stroke(255);
line(0, y, img.width/2 -1, y);
}
PImage img;
int y = 0;
void setup() {
size(749, 564);
img = loadImage("image_.png");
}
void draw() {
image(img, 0, 0);
y = mouseY;
for (int x = 0; x < img.width; x += 2) {
color c = get(x, y);
stroke(c);
line(x+1, 0, x+1, height);
}
// white line at the mouse position
stroke(255);
line(0, y, img.width, y);
}
/* Modified version of an example from Processing: A Programming Handbook for Visual Designers by Casey Reas and Ben Fry */
PImage img;
PImage img_mod;
int index;
void setup() {
size(1500, 560);
fill(0);
img = loadImage("image_.png");
img.loadPixels();
}
void draw() {
background(204);
color c = img.pixels[index];
float r = red(c);
circle(width/2, height/2, r);
index++;
if (index == width*height) {
index = 0;
}
}
PImage img;
PImage img_mod;
int index = 0;
int alpha = 150;
void setup() {
size(1500, 560);
noStroke();
img = loadImage("image_.png");
img.loadPixels();
}
void draw() {
int pix = img.pixels[index];
int posx = index % img.width;
int posy = round(index / img.width);
background(pix);
image(img, 0, 0);
posy = constrain(posy, 0, img.height);
fill(0);
rect(posx, posy, 4, 4);
float r = red(pix);
float g = green(pix);
float b = blue(pix);
fill(255, 0, 0, alpha);
circle(width/4 * 3, height/3, map(r, 0, 255, 0, 400));
fill(0, 255, 0, alpha);
circle(width/4 * 2.5, height/2, map(g, 0, 255, 0, 400));
fill(0, 0, 255, alpha);
circle(width/4* 3.5, height/2, map(b, 0, 255, 0, 400));
index++;
if (index == width*height) {
index = 0;
}
}
/* Set index to cursor */
void mousePressed() {
index = mouseX + mouseY*img.width;
}
import controlP5.*;
ControlP5 cp5;
PImage img;
PImage img_mod;
int matrix_size = 3;
/* Initial matrix */
// Sharpen
//float[][] matrix = { { -1, -1, -1 },
// { -1, 9, -1 },
// { -1, -1, -1 } };
// Edge detect
//float[][] matrix = { { 0, 1, 0 },
// { 1, -4, 1 },
// { 0, 1, 0 } };
//float[][] matrix = { { 0, 1, 0 },
// { 1, -3, 1 },
// { 0, 1, 0 } };
//float[][] matrix = { { 1, 1, 0 },
// { 0, -3, 0 },
// { 0, 1, 1 } };
float[][] matrix = { { 1, -1, 1 },
{ -1, 1, -1 },
{ 1, -1, 1 } };
void setup() {
size(1500, 560);
img = loadImage("image_.png");
image(img, 0, 0);
img_mod = createImage(img.width, img.height, RGB);
/* Add controls */
cp5 = new ControlP5(this);
// Loop through all positions of the matrix and create
// a numberbox for each
for (int x = 0; x < matrix_size; x++) {
for (int y = 0; y < matrix_size; y++) {
cp5.addNumberbox(str(x)+str(y))
.setPosition(50*(x+1),30*(y+1))
.setSize(40,20)
.setRange(-10,10)
.setScrollSensitivity(10)
// set the value of the initial matrix
.setValue(matrix[x][y])
// set an ID which will be used for controlEvents
.setId(x+y*matrix_size)
;
}
}
}
void draw() {
img.loadPixels();
img_mod.loadPixels();
// Begin our loop for every pixel
for (int x = 0; x < img.width; x++) {
for (int y = 0; y < img.height; y++ ) {
// Each pixel location (x,y) gets passed into a function called convolution()
// which returns a new color value to be displayed.
color c = convolution(x,y,matrix,matrix_size, img);
int loc = x + y*img.width;
img_mod.pixels[loc] = c;
}
}
img_mod.updatePixels();
image(img_mod, width/2, 0);
}
/* Access the value of a controller via its name. */
void m00 (int val) {
println(val);
}
/* Access all controlEvents.
These are fired when the controls are used. */
public void controlEvent(ControlEvent theEvent) {
// Get id and value from the controller
int id = theEvent.getId();
int value = (int)(theEvent.getController().getValue());
println(value);
// Resolve the ide to the position inside the matrix
int pos1 = round(id / matrix_size);
int pos2 = id % matrix_size;
pos2 = constrain(pos2, 0, matrix_size);
// Set the value to that position
matrix[pos1][pos2] = value;
}
color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img) {
float rtotal = 0.0;
float gtotal = 0.0;
float btotal = 0.0;
int offset = matrixsize / 2;
// Loop through convolution matrix
for (int i = 0; i < matrixsize; i++){
for (int j= 0; j < matrixsize; j++){
// What pixel are we testing
int xloc = x+i-offset;
int yloc = y+j-offset;
int loc = xloc + img.width*yloc;
// Make sure we have not walked off the edge of the pixel array
loc = constrain(loc,0,img.pixels.length-1);
// Calculate the convolution
// We sum all the neighboring pixels multiplied by the values in the convolution matrix.
rtotal += (red(img.pixels[loc]) * matrix[i][j]);
gtotal += (green(img.pixels[loc]) * matrix[i][j]);
btotal += (blue(img.pixels[loc]) * matrix[i][j]);
}
}
// Make sure RGB is within range
rtotal = constrain(rtotal,0,255);
gtotal = constrain(gtotal,0,255);
btotal = constrain(btotal,0,255);
// Return the resulting color
return color(rtotal,gtotal,btotal);
}