Kevyn McPhail

21 Jan 2014

FinalGIF_500

 

As someone who has only touched processing here and there, this project was a tiny bit challenging at first. However as I formulated a more concrete Idea of the motions that I wanted to create, and peeked at a bit of inspiration, the juices began to flow. I had some early ideas, as shown in the sketches, of having the GIF have a focal point, with a static or dynamic background, that emphasized the focal point.

2014-01-21 00.41.12

So, the concept that I had for this project was inspired by the “All Seeing Eye”, as the title shows. I tried to replicate the feel of an ominous, omnipotent being, ever-fixated on you. I also set out to give the GIF a sort of hypnotic feel, which is achieved by the rotation and the pulsating ring. The most difficult part of this project for me was getting the timing right for the outer rings of circles so that they loop while each ring maintains its own varied speed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

//Kevyn McPhail
//Interactive Art and Computational Design
//Lenticular Animation
 
int nFrames = 30;
int elapsedFrames; 
boolean isRecording;
 
void setup(){
size(500,500);
elapsedFrames = 0;
frameRate (nFrames); 
}
 
void keyPressed(){
isRecording = true;
elapsedFrames = 0;
}
 
void draw(){
float percentCompleted = 0;
if (isRecording){
percentCompleted = (float) elapsedFrames / (float) nFrames;
}
else{
float modFrame = (float) (frameCount % nFrames);
percentCompleted = modFrame / (float) nFrames;
}
 
renderGIF(percentCompleted); 
 
if(isRecording) {
saveFrame("output/" + "kmcphail" + "-loop" + nf(elapsedFrames, 4) + ".png");
elapsedFrames ++;
if (elapsedFrames == nFrames) {
isRecording = false;
}
}
}
 
// Redners Gif
void renderGIF(float percent){
 
//Fading Background
if (percent < 0.5){
background(percent*255);
}else{
background(255 - (percent*255));
}
//background(255);
smooth();
 
float cx = width/2; 
float cy = height/2;
 
int numSpokes = 20;
 
//Shooting Circles
for (int i=0; i<numSpokes; i++){
float armAngle = (percent + i) * (TWO_PI/numSpokes); 
float px = cx + (percent*width)*cos(armAngle); 
float py = cy + (percent*height)*sin(armAngle); 
fill(0,255-(255*percent*2));
noStroke();
ellipse(px,py,(percent*(width/5)),(percent*(height/5)));
}
 
//Orbiting Rings
int numRings = 20;
for (int i=0; i<numRings; i++){
for (int j=0; j<20; j++){
float armAngle = (percent + j) * (TWO_PI/(10*i));
float px = cx + ((width/2.5)+((width/17)*i))*cos(armAngle); 
float py = cy + ((height/2.5)+((height/17)*i))*sin(armAngle); 
if (percent > 0.5){
fill(percent*255);
}else{
fill(255 - (percent*255));
}
ellipse(px,py,width/25,height/25);
}
}
 
//Rotating Eye
pushMatrix();
fill(0);
translate(cx,cy);
rotate(radians(-12*(map(percent,0,1,1,30))));
float a = map(percent,0,1,1,30);
println(a);
ellipse(0,0,width/3,height/6);
popMatrix();
fill(255);
ellipse(cx,cy,width/6.5,height/6.5);
fill(0);
ellipse(cx,cy,width/12,height/12);
 
//Orbiting Eyes
for (int i=0; i<15; i++){
float armAngle = (percent + i) * (TWO_PI/(15));
float px = cx + (width/4)*cos(armAngle); 
float py = cy + (height/4)*sin(armAngle); 
float px_2 = cx + (width/17)*cos(armAngle); 
float py_2 = cy + (height/17)*sin(armAngle);
if (percent > 0.5){
stroke(percent*255);
}else{
stroke(255 - (percent*255));
} 
strokeWeight(width/200);
line(px,py,px_2,py_2);
}
 
//InnerArc
pushMatrix();
fill(0);
translate(cx,cy);
rotate(radians(-12*(map(percent,0,1,1,30))));
noFill();
strokeWeight(width/100);
arc(0,0,width/1.75,width/1.75,0,PI);
popMatrix();
 
//Outer Arc
pushMatrix();
fill(0);
translate(cx,cy);
rotate(radians(12*(map(percent,0,1,1,30))));
noFill();
strokeWeight(width/100);
arc(0,0,width/1.5,width/1.5,0,PI);
popMatrix();
}