From static frames to animation – JavaScript, Java & Processing; coding Art ….

As part of my research, I endeavored to build a frame and tile itevenly…as you would a column in a upscale restaurant, or as Billy-Buster tiled his lesser-known below-ground pool in the hilltop paradise above San Simeon. Drawing squares, keeping track of their quantity, position and spacing proved unweildy. So back to the drawing board I turned. The first task was to completely fill a window with squares, evenly spaced, uniformed – no holes. My first breakthrough was a rectangular grid – from the drawing board I found that instead of looping to keep track of the squares (their origins in CGI coordinates space, their quantity, when to drop down a row, when to stop building them…) oy! I located a KISS-simple solution in the following functions and abstract data types:

Click to see it transform.
Some tweaks to a nested-for loop, appropriate “pops” nee popMatrix(); and the careful application of a “random” number generator to produce cool-colored tiles —but not TOO cool — experiment yielded a random range in Green and Blue to give the tiles a watery sheen, sans magenta, indigo, dark purple and the like. For personal intersest and further research I added a mouse event that slows down the animation, eliminates the thin black borders on each tile and zooms in on the whole operation.
At long last “Random dynamic & cool tiles” is up for public consumption:
I could see a pool in Laguna, LA, Vegas or Laughlin with swanky, swarthy, light-up tiles in a pool or on a wall of it’s club …. Bill R. Hearst would be pleased…I like to think so.
Next – I thought about Neil Degrasse Tyson. He says that the “snow” we see on the “TV channels in-between TV channels,” (something our Millennial friends may never fully appreciate…) is ACTUALLY a visual representation of the background radiation that’s permeated the Universe since the Big Bang. UHF & VHF cathode-ray displays pick up this noise and spit out the “ssshhhhhhhh” and the black, white & gray snow we may’ve found on Channel 1 or 3. Mostly, it was annoying and caused us to quickly dial up to CBS, PBS, NBC, FOX or ABC to see what was cookin’….but in the context of nostalgia, the scientific implication of looking back seven trillion years; this “snow” is worth an emulation. Using similar logic I fashioned version 1. The snow doesn’t dance around the screen, but the small circular “flakes” and the way they appear to move based on random gray-scale shadings is a nice start. It looks like they move – kinda.
^^^^I slowed the frame rate down to avoid headaches.
After random “cool” I had to attempt random “warm” –this graphic reminds me of a HollyWood or Vegas marquee. Bright lights seize attention; underscoring the glitz and glamour purported to be found within. The difference is that I think the bulbs this animation emulates are controlled in strict, looping sequences as opposed to my random flashes of “bright” colors controlled by logic.
This animation reminds me of the “Sushi”scene from “Defending Your Life” — Albert Brooks’ barmate proudly states that his life accomplishment was coining the phrase “All Nude. (You know those strip clubs out by LAX? ….“) You needn’t be a fan of his quirky brand of humor to get huge kick out this classic.
That said, I FINALLY got the computer graphic programs to not only display but animate! The “random- (random number generators are not TRULY random, but they are close)-ness” of the algorithms give the displays a kind of innate ability for the computers to create something of THEIR OWN — MY LOGIC & Design—> the computers’ brushstrokes.
All of the “sketches” (as they call them) on my new OpenProcessing Profile are completely original – designed, built, tested, tweaked and deployed by this writer. If you visit my new page & graphics, the source code is easily visible. Feel free to reproduce it yourself, or make changes/improvements to it. You will find that all of them are optimized –nee “code-golfed.” I designed these algorithms to use the fewest lines of code, fewest commands and simplest logic to add a layer of mathematical elegance to the aesthetic of each sketch. Please feel free to download my source code…just plz note that all of them are intellectual property- if you plan to use them in a public/educational or commercial setting…just ask! chris@tapper7.com
More coming soon….plus a litany of fresh podcasts – “I swear it by the old gods & the new.” -t []

Processing animation .js Test ….

Animation *update* unresponsive – posting src and snapshot of fully developed animation as featured image (above).

/*Random lerp circle spirals – cwelke @ SSStudios
last stable build 8/29/2015
Rendered in Java 1.8 using the Processing API which access OpenGL w/in Microsoft Windows 8.1*/
//global vars
float r = 0;
float angle = 0;
float rSteps;
float maxR;
float angleSteps;
float cirSZ;
float centerX;
float centerY;
float r1 = 0;
float angle1 = 0;
float rSteps1;
float maxR1;
float angleSteps1;
float cirSZ1;
float centerX1;
float centerY1;
void setup(){
size (840, 720);
smooth();
setRandomValues();
background(#0E0517); //dk purple-k
}
void draw(){
int i = 0;
int maxBlasts = 0;
//warm & cool spherical sprails ~=40
while(maxBlasts < 21){
displayEllipse2();
moveAngle();
moveAngle1();
checkEdges();
maxBlasts++;
}
while(i < 11){
displayEllipse();
moveAngle();
moveAngle1();
checkEdges();
i++;
}
maxBlasts = 0; //layering
while(maxBlasts < 8){
displayEllipse2();
moveAngle();
moveAngle1();
checkEdges();
maxBlasts++;
}
i = 0;
while(i < 4){
displayEllipse();
moveAngle(); moveAngle1(); checkEdges(); i++;
} //noLoop(); }
void setRandomValues(){
rSteps = random(4, 8); maxR = random(20, 160); angleSteps = random(PI/90, PI/9);
cirSZ = random (12, 44); centerX = random(width); centerY = random(height);
rSteps1 = random(6, 12); maxR1 = random(40, 250); angleSteps1 = random(PI/36, PI/18);
cirSZ1 = random (36, 44); centerX1 = random(width); centerY1 = random(height);
}
void moveAngle(){
angle = angle + angleSteps;
r = r + angleSteps*rSteps; }
void moveAngle1(){angle1 = angle1 + angleSteps1;
r1 = r1 + angleSteps1*rSteps1;
}
void displayEllipse(){
float colorValue = map(r, 0, maxR, 0, 1);
color c = lerpColor(#FF0000, #00FF00, colorValue); fill(c); stroke(#ffffff);
float x = centerX + cos(angle)*r;
float y = centerY + sin(angle)*r;
ellipse(x, y, cirSZ, cirSZ);
}
void displayEllipse2(){stroke(#000000); float colorValue1 = map(r1, 0, maxR1, 0, 1);
color d = lerpColor(#6600FF, #8A2EE6, colorValue1); fill(d);
float x1 = centerX1 + cos(angle1)*r1;
float y1 = centerY1 + sin(angle1)*r1;
ellipse(x1, y1, cirSZ1, cirSZ1);
}
void checkEdges(){
if(r >= maxR || r1 >= maxR1)
r = 0;
r1 = 0;
angle = 0;
angle1 = 0;
setRandomValues();
}
//rest
void mousePressed(){
r = 0;
r1 = 0;
angle = 0;
angle1 = 0;
setRandomValues();
}

//apologies if formatting is bad – ill conjure this up as another convenient XML “fast-loader”
//in fact code will appear as such in future posts for convenience and as jpegs for visualization -c