Before I started this project, I had never heard of Processing or made anything like this GIF.  I looked at some of the examples for a while, but crazy trippy optical tricks aren’t really my thing, so I decided to do something figurative.  I wanted it to still look simple and only have a couple of colors so it would look good on the card.  A minimalist design was also ideal for someone just figuring out how to use Processing.  I decided to pick an object from everyday life that was easy to simplify into something pretty, so I somehow arrived at blinds in an empty room.

Here are some pages from my largely unintelligible sketchbook (I’m not sure why I get 1000% worse at drawing when I’m thinking).

I like the way this looks, so I’m glad that I managed to make something nice as a beginner. However, it’s still totally obvious that someone didn’t take years of experience to figure out how to make this GIF, so in the future I’m sure I could do better.   If I had taken less time to do simple things, I would have maybe added some more detail to the blinds and made them more believably 3-dimensional.  It also would have been nice to be able to loop in 10 frames, but it looked terrible so I chose not to.

(I’m not sure why the code below doesn’t look quite right; I followed the directions…)
 

//Nastassia Barber
//IACD 2014
//Professor Golan Levin

Blind blinds;
Cord cord;
float framerate=10;
//some stuff for saving frames
boolean bRecording;
int nElapsedFrames;
String myName="blindsyay";
int nFramesInLoop=20;

void setup()
{
size(1500,1500);
blinds =new Blind();
cord =new Cord();
}

void keyPressed()
{ 
// Press a key to export frames to the output folder
bRecording = true;
nElapsedFrames = 0;
}

class Blind
//the blinds and also the light are in here
{
float wide;
float front_height;
float side_height;
float ypos;
float lightlen;
float opacity;

Blind()
{
wide=600;
front_height=50;
side_height=0;
ypos=100;
lightlen=0;
opacity=100;
}
void rotateBlind()
//to decrease the height of front slat while increasing the height of the visible part of the side slat so it appears to rotate
{
if (front_height>10)
{
front_height=front_height-(40/framerate);
side_height=side_height+(10/framerate);
}
else
{
front_height=48;
side_height=0;
}
}
void growLight()
//increases size of light patch on floor as blinds open
{
if (lightlen<20)
{
lightlen=lightlen+(20/framerate);
opacity=opacity+(150/framerate);
}
else
{
lightlen=0;
opacity=100;
}
}
}
class Cord
//a separate class for the blinds' pull cord just because
{
float cordl;

Cord()
{
cordl=400;
}
void pullCord()
//increases length of cord as blind opens
{
if (cordl<500)
{
cordl=cordl+100/framerate;
}
else cordl=400;
}
}

void draw()
{
background(30,30,30);
//fill(121,53,211); 
//rect(100,100,600,500);
float xpos=100;
float starty;
for (int i = 0; i<10; i=i+1)
//draw blinds themselves
{
starty=blinds.ypos+(50*i);
fill(#FFFFFF);
//rect(xpos,blinds.ypos,blinds.wide,blinds.front_height);
quad(xpos,starty,xpos+blinds.wide,starty,xpos+blinds.wide+5,starty+blinds.front_height, xpos+5, starty+blinds.front_height);
fill(#868686);
quad(xpos+5,starty+blinds.front_height,xpos+blinds.wide+5, starty+blinds.front_height,xpos+blinds.wide+6,starty+blinds.front_height+blinds.side_height, xpos+6, starty+blinds.front_height+blinds.side_height);
}
//draw cord on blinds
strokeWeight(2);
line(680,100,680,100+cord.cordl);
fill(#FFFFFF);
strokeWeight(1);
ellipse(680,100+cord.cordl,8,11);
float start_y=650;
float start_x=120;
float lightl=600;
float opacity=blinds.opacity;
for (int i = 0; i<10; i=i+1)
//draw light on floor
{
float slope_up=150;
fill(107,63,165,opacity);
quad(start_x,start_y, start_x+lightl-20,start_y, start_x+lightl+blinds.lightlen,start_y+blinds.lightlen, start_x+blinds.lightlen,start_y+blinds.lightlen);
start_y=start_y+20;
start_x=start_x+20;
lightl=lightl+20;
opacity=opacity-20;
}
blinds.rotateBlind();
blinds.growLight();
cord.pullCord();

// If we're recording the output, save the frame to a file. 
if (bRecording)
{
saveFrame("output/"+ myName + "-loop-" + nf(nElapsedFrames, 4) + ".png");
nElapsedFrames++; 
if (nElapsedFrames == nFramesInLoop)
{
bRecording = false;
}
}
}