Processing Javascript test ….

a snap of the src

//shoots red green & blue lasers from bottom of fram to top
//or surface-to-air Star Wars anti-Communist anti-satellite
//laser defense sys emulator in 2d
//inspired by TRW Research (active per local eyewitness 10/17/16
//IP Tapper@ssstudios LA,CA
//global vars
int bluelxpos = 38;
int bluelypos = 398;
int laserwidth = 6;
int laserheight = 188;
int redlxpos = 200;
int redlypos = 366;
int gnlxpos = 325;
int gnlypos = 333;
int framecount = 0; //for testing & frame-tracking
void setup(){
frameRate(120);//default fr x2
void drawlasers(){
fill(38, 38, 200);
rect(bluelxpos, bluelypos, laserwidth, laserheight);
rect(redlxpos, redlypos, laserwidth, laserheight);
rect(gnlxpos, gnlypos, laserwidth, laserheight);
}//end drawlasers
void draw(){
//shoot lasers up
fill(38, 38, 200);
bluelypos--; //delta y blue laser
rect(bluelxpos, bluelypos, laserwidth, laserheight);
bluelxpos = (int)random(1,399);
bluelypos = 398;
}//end if
redlypos--; //delta y red laser
rect(redlxpos, redlypos, laserwidth, laserheight);
redlxpos = (int)random(1,399);
redlypos = 366;
}//end if
gnlypos--; //delta y gn laser
rect(gnlxpos, gnlypos, laserwidth, laserheight);
gnlxpos = (int)random(1,399);
gnlypos = 333;
}//end if
}//end draw

fb compatibility test….

a picture of paris at dawn or dusk with the words hashtag pray for paris inscribed over the skyline and signed by chris welke

as we cycle through the changes to style and funtion; dear reader; I wanted to share with you an editorial I piced together in the immediate aftermath of the tragedies in Paris. I snapped 15-odd shots from around social media to show how quickly/disturbingly hateful invective against Muslims was growing. At the moment I put this commentary together and shared it on fb; HATE itself was going viral. My intent was alert my “real-life” friends…ask them to keep an opn mind that they not fall prey to the fear-mongering, hate-mongering, monger-mongering…u get the idea. as much as “dislike” (note — didn’t take bait to be hypocrite and say I “hate” fb; even though technically I do and technically that’s ok w/ this writer morally because fb is a corporate-adevertising-agency-subdivision-og-google-and-not-a-person;….there ok to hate fb) Facebook, I like the way they package prose that has a great deal of pics to illustrate it.

What i’m getting at is…as long as we are “under-construction” I will audit my privacy level on fb, so how well MY fb page can communicate to you VIA The SoCal Picayune…and as always, give the “handshake” between my fb & my wp a check-up.

<h2>wp post: fb–we’re going start with the usual checkup, just cough while I put my finger here…

your browser: *coughs* link to post that may or may not be public–coughing from

“fb Chris Welke #9” aka /* TEST!

Coughing TO: you@your_ip using your device, os & browser.

prediction – you will not be able to read (10/18) due to privacy setting on fb

WIP – find a way to embed or mimck a fb “story” of this nature in WP & || customize privacy setting to make stories initially written in fb jive with the site, so there is no rework when creative energy strikes, news breaks, or both</h2>

Ok my browser says you are using an older-model desktop PC, so go back to work dummy! This site is #nsfw, labeled “mature” in the meta-data and contains graphic depictions of truth; reality and (God forgive me) the above FB post; once you are able to read it; is political in nature. You’v beean warned 😉 –ed []

below is a test of another “mobile-freindly” multi-media-enabled advert, this once

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!
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);
background(#0E0517); //dk purple-k
void draw(){
int i = 0;
int maxBlasts = 0;
//warm & cool spherical sprails ~=40
while(maxBlasts < 21){
while(i < 11){
maxBlasts = 0; //layering
while(maxBlasts < 8){
i = 0;
while(i < 4){
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;
void mousePressed(){
r = 0;
r1 = 0;
angle = 0;
angle1 = 0;

//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

More Computer Graphics Artwork rendered in Java – Spirals and Variable Crosshatching….

Square Spiral SRC. I will include two ways to view the source code (since WP doesn’t get along with formatted code all that well….)
Below, 4 snapshots posted as jpegs. (it will stay posted it it looks ok)….

At bottom, a far more practical link using my new XML/WP “do it your own way, upload and forget about it” or whatever it is I called that.
Unfortunately, these files can only appear w/in posts as links…any code is subject to all the PHP/CSS/JS hard-wired into most WP themes. I have modified this theme so heavily I could no longer tell you who wrote it. I don’t credit the original author as I only used his code as a template; this not a child-theme…this is The Socal Picayune 2015 WP Theme by Chris Welke.
My Easy/XML to WP system is brand-new …expect improvements!

The featured artwork is a far less complicated algorithm compared with previously-posted recursive “Circle Splatters” and my Recursive “Impressionist” forest I entitled “June Gloom” …still to come on this topic is a 3D fractal terrain map implemented recursively using triangles and a “random” number generator. That’s how they created a whole planet for Captain Kirk to fly over in Star Trek II. (This was the first commercial application of the Diamond-Square Algoritm” which will make sense to anyone with a general knowledge of Euclidean geometry, but put them in the lab and ask them to implement it in Java3D or OpenGL and they MAY go “shit nuts” as I initaillay did 11 years ago when it was a CSC 407 assignment. I had to take an F because I never solved it. My lab partner on the other hand, solved/implemented AND added color-coded elevation for Extra Credit.
spiral code 1spiral code2spiral code3spiral code4

Sometimes, really smart people make me feel really dumb.

Something Self-Similar ….

see src in post

I named my home-studio “Self-Similarity Studios” because I’ve always had an affinity for things in science and nature that affect this quality. “AS ABOVE …. SO BELOW” Think about a rock. Hold it in your hand…what color is it? What shape does it have? Note that the rock you are holding and a mountain (or significantly large hill) MAY look alike….just on different scales. Two inches of a shoreline, viewed from above, with a few hundred bits of sand – MAY look like … two MILES of shoreline from 100 stories above, with a few hundred large rocks. Rocks, mountains, trees, shells, coastlines….they all exhibit a self-similarity. This is where nature and artificiality intersect and dove-tail in strange and striking ways. (More images, experiments and abstraction forthcoming)

I briefly had access to tools that could render graphics quickly (and cost-free) – this was the Silicon Graphics Lab at Cal Poly, donated by SGI, the lab ran about 30 workstations, each running SPARC SOLARIS 7 and all wired into a mainframe capable of doing the massive amounts of calculations needed to draw a frame (or a million, as in a feature-length CGI-animated motion picture) required to not only calculate and store (print; if need be) but depict images that elicit pure aesthetic beauty.

Ahhh….where Logic and Art intersect. On the chipset just beneath my fingers and the never-ending-thought-machine hard-wired to my skull and backbone.

To me; numbers are a simple, spiritual truth. People use numbers to lie all the time; but one can NEVER be deprived of its “one-ness” Carl Sagan said, “The simplest thought like the concept of the number one; is an elaborate logical underpinning. The brain has it’s own language for testing the elegance and consistency of the world.” One is one. QED.
If WWWIII begins at dawn; two will be a prime number. If x is an odd integer, then x + 2 will also be odd. The square root of 2 will be irrational; The sum of The Cantor Set DsubH will be transcendental. Our universe could be obliterated in an instant, but there will still be five and only five regular solids.*
I don’t know about you but I take comfort in that.

Anyway….I had access to this lab for a year; these machines, combined, would still (many years later) dwarf the computing power of yours or my CPU. These machines were used for Raytracing; most famously 1st used in entertainment/(Art!) by John Laseter; the Academy Award winning producer of the short “Luxo Jr.” (and founder of PIXAR).

a frame from luxo jr
How real does this frame look TO YOU?

Luxo is just a lamp, but it took parallel processors days to make him look up, or turn, or jump. Why? – A raytraced image is a 3D scene (Picture the two lamps)….There is ambient and natural light reflected off them, they also project their own artificial light. That’s a lot of photons bouncing around a simple scene – to make it look real; Laseter perfected a technique whereby:
DO (~a million calculations to determine it’s color in RGB Space)
….or a few billion for one frame
….or difficult-to-express numbers for a 3-min short film.

I never got to build or try a ray-tracer…they took about an hour to render just one frame. Till recently a complete developer environment was required to render computer graphics —Visual Studio, a UNIX lab, Something big and expensive from Microsoft, SGI, Sun — all in my interest faded when I didn’t have access to the tools; I never really got the chance to explore it–I STILL have unsolved problems from back then. Only now can an affordable computer be had, open-source IDE’s set up, and LOGIC be used to make art: Fast and CHEAP.

The featured picture was created using the Processing java template library. If you have the JDK (see column two) you can build things like this yourself.

Here is the SRC (Source Code) It uses (to me) the complex compsci-concept of recursion; whereby by a function (in this case a procedure) calls itself. It will render a slightly different image every-time it runs and is easily customize-able; I hope you enjoy it as much as I enjoyed designing the algorithm
/*Algorithm by cwelke for Self-Similarity Studios
Last stable build: using Processing API, JDK 1.8, win8.1 5/26/15
Dist under The GNU Public License - compliant with ANSI/ISO std.*/
void setup(){
size(1000, 700);
float dec = 0.6;
selfS(width*dec, height*dec, 400);
}//end setup
void selfS(float x, float y, float sz){
float angle, nx, ny;
//last int is transparency--rand switches tint
fill(lerpColor (#002900, #006600, random(1)), 300);
ellipse(x, y, sz, sz);
float rec = 0.6;
if(sz > 1){//recurse to base::do(while px_sz > 1)
angle = random(TWO_PI);
nx = x + sz*rec * sin(angle);
ny = y + sz*rec * cos(angle);
selfS(nx, ny, sz*rec);
angle = random(TWO_PI);
nx = x + sz*rec * sin(angle);
ny = y + sz*rec * cos(angle);
selfS(nx, ny, sz*rec);
angle = random(TWO_PI);
nx = x + sz*rec * sin(angle);
ny = y + sz*rec * cos(angle);
selfS(nx, ny, sz*rec);
}//end selfS

Here is the program run a second time:

only three parameter changes - colors & size
Run again with three parameter changes – colors & size

As long as we are at it check this out:

a recursive forest snap 1
Real…or Artificial?

Same logic – run a second time:

tree snap 2
Algorithmus Eleganten

The source:
/*orig. src by Zack Marlow-McCarthy*/
//modified, formatted, built, debugged and run by Tapper
//last stable build at SSStudios 5/27/15
//Processing API builds on JDK 1.8 running win8.1
//rights+compliance: ANSI/ISO std style, Creative Commons & The GNU Public License
float angleRandom1 = .8;
float angleRandom2 = 1/angleRandom1;
float lengthRandom1 = 1.01;
float lengthRandom2 = .08;
void setup(){
//blue mist mod 5/27
void draw(){
if(mousePressed == true){
branch(30,PI/2, 0,0);
void branch(float branchLength,float angle,float startX,float startY){
if(branchLength<1){//base case fill(#004A00); noStroke(); ellipse(startX,startY,5,10); stroke(0); }else{ float randomNess = random(0,100); strokeWeight(branchLength/2); float endX = cos(angle)*branchLength; float endY = sin(angle)*branchLength; line(startX,startY,startX+endX,startY+endY); startX += endX; startY += endY; if(randomNess>0 && randomNess<90){ branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2), startX,startY); }else if(randomNess>=90 && randomNess<94){ branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2),startX,startY); branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2),startX,startY); }else if(randomNess>=94 && randomNess<98){
branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2),startX,startY);
branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2),startX,startY);
branch(branchLength/(random(lengthRandom1,lengthRandom1+lengthRandom2)), angle*random(angleRandom1, angleRandom2),startX,startY);
}//end else
}//end if
}//end recursion

*Proofs to come….[] -t