Skip to content

Instantly share code, notes, and snippets.

@tim-peters
Last active December 28, 2015 18:59
Show Gist options
  • Save tim-peters/7547167 to your computer and use it in GitHub Desktop.
Save tim-peters/7547167 to your computer and use it in GitHub Desktop.
A dirty, short test of how to create diagonal animations in processing, depending on a n*m matrix.
int width = 12; // Set amount of rectangles in a row
int height = 12; // Set amount of rectangles column
int outer_size = 70; // Set size of the (outer) rectangles
int inner_size = 100; // Set size of the rectangles/circles inside (must be smaller than outer_size!!!)
int marginX = 30; // Set margin between (outer) rectangles in a row (if you like)
int marginY = 30; // Set margin between (outer) rectangles in a column (if you like)
float animation_offset = -.48; // Set offset between rectangles anmiation
////////////////////////////////////
int sizeX =width*outer_size+width*marginX; // calculate the windows width
int sizeY =height*outer_size+height*marginY; // calculate the windows height
/* create random color in 3 variables [r,g,b] */
int r = int(random(255));
int g = int(random(255));
int b = int(random(255));
/* create nessesary variables */
int count = 0;
int col_ic;
float sr, sg, sb, is;
boolean space_pressed = false;
void setup() { // On setup...
size(sizeX,sizeY); // create a window with calculated width and height
noStroke(); // render without stroke
background(0); // Set the background color to black
}
void draw() { // Do repeatingly...
count +=8;
/* Calculate color (r,g & b), oscillating from the randomly given color to its complimentary color */
sr = r-(r-(255-r))/2+Math.abs(r-(255-r))/2 * sin(count/2*0.01+(r/255*PI));
sg = g-(g-(255-g))/2+Math.abs(g-(255-g))/2 * sin(count/2*0.01+(g/255*PI));
sb = b-(b-(255-b))/2+Math.abs(b-(255-b))/2 * sin(count/2*0.01+(b/255*PI));
background(sr,sg,sb); // Set background to calculated color
for(int y=0;y<height;y++) // for each row...
{
int top = (y*outer_size+y*marginY); // calculate the space to top
for(int x=0;x<width;x++) // for each column
{
int left = (x*outer_size+x*marginX); // calculate space to left windows border
col_ic = y*height+x+1; // calculate an unique id for each rectanle
is = (inner_size*.5) + (inner_size*.5) * sin(count*.01+col_ic*animation_offset); // calculate the size of the figure inside (oscillating +-50% from 50% of the given size), "delayed" by its animation_offset
float inner_top = (top+(outer_size-is)/2); // calculate position from top for inner figure
float inner_left = int(left+(outer_size-is)/2); // calculate position from left windows border for inner figure
fill(255-sr,255-sg,255-sb); // set ellipse color to complimentary color
ellipseMode(CORNER); // Set ellipse to be created from the corner
ellipse(inner_left,inner_top,is,is); // draw a circle (ellipse) inside the rectangle
}
}
/* Show a hint until [space] is pressed */
if(!space_pressed)
{
fill(255);
text("Press [space] to generate new color and [+, -] to change angle (= depending on animation offset: "+animation_offset+")",10,20);
}
}
void keyReleased()
{
if(key == ' ') // if user presses [space]
{
/* "rerandom" colors */
r = int(random(255));
g = int(random(255));
b = int(random(255));
space_pressed = true;
}
/* change offset depending on [+, -] */
if(key == '+')
animation_offset += .01;
if(key == '-')
animation_offset -= .01;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment