Processing
I spent a bit of time this unit getting to know some of the basics of Processing. I went through a few of the tutorials found on the web site to familiarize myself with some simple mouse input codes, grayscale and RGB coloring, drawing lines and shapes, and finally creating Two-Dimensional arrays. I went through the tutorial found here
I used the code in the tutorial to create a grid of cells whose brightness oscillated from 0 to 255 with a sine function.
// 2D Array of objects
Cell[][] grid;
// Number of columns and rows in the grid
int cols = 10;
int rows = 10;
void setup() {
size(200,200);
grid = new Cell[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
// Initialize each object
grid[i][j] = new Cell(i*20,j*20,20,20,i+j);
}
}
}
void draw() {
background(0);
// The counter variables i and j are also the column and row numbers and
// are used as arguments to the constructor for each object in the grid.
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
// Oscillate and display each object
grid[i][j].oscillate();
grid[i][j].display();
}
}
}
// A Cell object
class Cell {
// A cell object knows about its location in the grid as well as its size with the variables x,y,w,h.
float x,y; // x,y location
float w,h; // width and height
float angle; // angle for oscillating brightness
// Cell Constructor
Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
angle = tempAngle;
}
// Oscillation means increase angle
void oscillate() {
angle += 0.02;
}
void display() {
stroke(255);
// Color calculated using sine wave
fill(127+127*sin(angle));
rect(x,y,w,h);
}
}
I changed a bit of the code to change the color of the lines in the cells as well as the angle at which the cells oscillate brightness. I then added a mousePressed() function to change between a very steep negative angled cell grid with red lines and less fill to a positive agled cell grid with blue lines and a darker fill. When pressed it seems to have a calmer/slower pattern and when left unpressed a very quick/alarming red pattern zips by. Quick! Hold the mouse!
Modifed code:
// 2D Array of objects
Cell[][] grid;
// Number of columns and rows in the grid
int cols = 50;
int rows = 50;
void setup() {
size(600,700);
grid = new Cell[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
// Initialize each object
grid[i][j] = new Cell(i*20,j*20,20,20,i+j);
}
}
}
void draw() {
background(0);
// The counter variables i and j are also the column and row numbers and
// are used as arguments to the constructor for each object in the grid.
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
// Oscillate and display each object
grid[i][j].oscillate();
grid[i][j].display();
}
}
}
// A Cell object
class Cell {
// A cell object knows about its location in the grid as well as its size with the variables x,y,w,h.
float x,y; // x,y location
float w,h; // width and height
float angle; // angle for oscillating brightness
// Cell Constructor
Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
angle = tempAngle;
}
// Oscillation means increase angle
void oscillate() {
if(mousePressed) {
angle -= 0.12; }
else { angle += 0.52; }
}
// If mouse is pressed, display darkens and changes color
// Mouse not pressed, alarming RED pattern, quick! Press the Mouse!
void display() {
if(mousePressed) {
stroke(20, 100, 200);
// RGB Color
fill(100+100*sin(angle));
rect(x,y,w,h); }
else { stroke(255, 0, 0);
fill(500+555*sin(angle));
rect(x,y,w,h); }
}
}
Screen Capture can be seen here:
