Creative Coding Week 2: Exploring Emergence (2)
Further explorations into the effects that changes to frame rate can have on a sketch. This exercise was investigating the effect of frame rate on a sketch. The effect of changing the frame rate can have a dramatic effect on the display. The first sketch below is the example provided in the course. Press the left and right arrow keys to change the frame rate (about 5 or 6 clicks to the right will reveal the more interesting variations.)
> View source code for preceding sketch.
/*
* Creative Coding
* Week 2, 05 - Moving Patterns 1
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014 Monash University
*
* This sketch builds on the previous sketches, drawing shapes based on the
* current framerate. The movement of individual shapes combine to create a
* gestalt field of motion. Use the arrow keys on your keyboard to change the
* frame rate.
*
*/
// variable used to store the current frame rate value
int frame_rate_value;
void setup() {
size(500, 500);
frame_rate_value = 6;
frameRate(frame_rate_value);
rectMode(CENTER);
background(255);
}
void draw() {
background(255);
int num = 20;
int margin = 0;
float gutter = 0; //distance between each cell
float cellsize = ( width - (2 * margin) - gutter * (num - 1) ) / (num - 1);
int circleNumber = 0; // counter
for (int i=0; i < num; i++) {
for (int j=0; j < num; j++) {
circleNumber = (i * num) + j; // different way to calculate the circle number from w2_04
float tx = margin + cellsize * i + gutter * i;
float ty = margin + cellsize * j + gutter * j;
movingCircle(tx, ty, cellsize, circleNumber);
}
}
} //end of draw
void movingCircle(float x, float y, float size, int circleNum) {
float finalAngle;
finalAngle = frameCount + circleNum;
//the rotating angle for each tempX and tempY postion is affected by frameRate and angle;
float tempX = x + (size / 2) * sin(PI / frame_rate_value * finalAngle);
float tempY = y + (size / 2) * cos(PI / frame_rate_value * finalAngle);
noStroke();
fill(0);
rect(tempX, tempY, size/5, size/5);
rect(tempX, tempY, 1, size*5);
stroke(0);
noFill();
stroke(0);
line(x, y, tempX, tempY);
}
/*
* keyReleased function
*
* called automatically by Processing when a keyboard key is released
*/
void keyReleased() {
// right arrow -- increase frame_rate_value
if (keyCode == RIGHT && frame_rate_value < 60) {
frame_rate_value++;
}
// left arrow -- decrease frame_rate_value
if ( keyCode == LEFT && frame_rate_value > 1) {
frame_rate_value--;
}
// set the frameRate and print current value on the screen
frameRate(frame_rate_value);
println("Current frame Rate is: " + frame_rate_value);
}
My sketch changed the shape of the objects and added some colour.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 2, 05 - Moving Patterns 1
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014 Monash University
*
* This sketch builds on the previous sketches, drawing shapes based on the
* current framerate. The movement of individual shapes combine to create a
* gestalt field of motion. Use the arrow keys on your keyboard to change the
* frame rate.
*
*/
// variable used to store the current frame rate value
int frame_rate_value;
color[] shade = new color[13];
void setup() {
size(500, 500);
frame_rate_value = 6;
frameRate(frame_rate_value);
rectMode(CENTER);
background(255);
}
void draw() {
background(255);
int num = 20; // orignally 20
int margin = 0;
float gutter = 0; //distance between each cell
float cellsize = ( width - (2 * margin) - gutter * (num - 1) ) / (num - 1);
shade[0] = 0xFF002200;
shade[1] = 0xFF004400;
shade[2] = 0xFF006600;
shade[3] = 0xFF008800;
shade[4] = 0xFF00AA00;
shade[5] = 0xFF00CC00;
shade[6] = 0xFF00FF00;
shade[7] = 0xFF22FF22;
shade[8] = 0xFF44FF44;
shade[9] = 0xFF66FF66;
shade[10] = 0xFF88FF88;
shade[11] = 0xFFAAFFAA;
shade[12] = 0xFFCCFFCC;
int circleNumber = 0; // counter
for (int i=0; i < num; i++) {
for (int j=0; j < num; j++) {
circleNumber = (i * num) + j; // different way to calculate the circle number from w2_04
float tx = margin + cellsize * i + gutter * i;
float ty = margin + cellsize * j + gutter * j;
movingCircle(tx, ty, cellsize, circleNumber);
}
}
} //end of draw
void movingCircle(float x, float y, float size, int circleNum) {
float finalAngle;
finalAngle = frameCount + circleNum;
int colourSelected1 = circleNum % 12;
int colourSelected2 = colourSelected1 + 1;
//the rotating angle for each tempX and tempY postion is affected by frameRate and angle;
float tempX = x + (size / 2) * sin(PI / frame_rate_value * finalAngle);
float tempY = y + (size / 2) * cos(PI / frame_rate_value * finalAngle);
float r1 = size/1.25;
float r2 = r1 * 0.75;
// float r3 = r1 * 0.33;
// float r4 = r1 * 0.25;
noStroke();
fill(shade[colourSelected1]);
ellipse(tempX, tempY, r1, r1);
fill(shade[colourSelected2]);
arc(tempX, tempY, r2, r2, -PI/2, PI/2);
stroke(0);
noFill();
stroke(0);
}
/*
* keyReleased function
*
* called automatically by Processing when a keyboard key is released
*/
void keyReleased() {
// right arrow -- increase frame_rate_value
if (keyCode == RIGHT && frame_rate_value < 60) {
frame_rate_value++;
}
// left arrow -- decrease frame_rate_value
if ( keyCode == LEFT && frame_rate_value > 1) {
frame_rate_value--;
}
// set the frameRate and print current value on the screen
frameRate(frame_rate_value);
println("Current frame Rate is: " + frame_rate_value);
}
