The viewer plays the role of Sisyphus, condemned to drag a rock up a mountain for eternity. Every time you try and fail to do so, the rock scores a point. (It's an existentialist joke, and like the PHB in the Dilbert cartoon series said, it has a certain sense of playfulness, if you look at it from the rock's point of view.)
I exhibited this as a work at my company's employee art show by using an iPad as a kind of virtual frame, you can see it on the left here:
In the processing.js code setup, I started with:
size(document.documentElement.clientWidth, document.documentElement.clientHeight);
Then in the html file I had the following meta tags:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
Just to be sure, I set padding and margin to 0px for both the body and the canvas tag processing.js uses.
(The apple-specific tag is kind of neat, adding that meant I could send the webpage to the homescreen from Safari, and then when I launch it from the home screen, it just has a minimal black bar at top, and skips the usual Safari address bar and what not.)
BONUS: HOW TO MAKE CLOUDS
I ended up being pleased with how nicely my cloud algorithm came out, using stretched ovals to get a nicely organic/cartoony feel. Here was my Cloud class:
class Cloud {
float x,y;
ArrayList<Fluff> fluffs;
Cloud(){
y = random(0,height * 3 / 8);
fluffs = new ArrayList();
int count = round(random(2,8));
for(int i = 0; i < count; i++){
fluffs.add(new Fluff());
}
x = width - getLeftmost();
}
void move(){
x -= random(.1,.5);
}
float getLeftmost(){
float lowest = 9999;
for(Fluff f : fluffs){
float side = f.getLeftmost();
if(side < lowest) lowest = side;
}
return lowest;
}
float getRightmost(){
float highest = -9999;
for(Fluff f : fluffs){
float side = f.getRightmost();
if(side > highest) highest = side;
}
return highest;
}
void draw(){
stroke(0);
noStroke();
fill(200);
pushMatrix();
translate(x,y);
for(Fluff f : fluffs){
f.draw();
}
popMatrix();
}
}
class Fluff{
float w,h,x,y;
Fluff(){
w = random(width/9,width /3);
h = random(height/24, height / 8);
x = random(-w/3,w/3);
y = random(-h/3,h/3);
}
float getLeftmost(){
return x-w/2;
}
float getRightmost(){
return x+w/2;
}
void draw(){
ellipse(x,y,w,h);
w += random(-.1,.1);
h += random(-.1,.1);
x += random(-.1,.1);
y += random(-.1,.1);
}
}
(Much of the code was just getting the maximum left and right extents, so I would know when it was safe to remove a cloud from the world, and making sure it appeared off the right side of the screen.)
My main cloud generating loop was:
Cloud cloudToKill = null;
for(Cloud c : clouds){
c.move();
c.draw();
if(c.x + c.getRightmost() < 0){
cloudToKill = c; //only one but it doesn't matter
}
}
if(cloudToKill != null) clouds.remove(cloudToKill);
if(clouds.size() < 5){
if(random(250) < 1){
clouds.add(new Cloud());
}
}
It could only remove one cloud per frame, but that wasn't such a problem. And it maxed out at 5 clouds at a time.
So, that was it! Let me know if you ever manage to drag that rock to the top!
