MacKenzie Bates

21 Jan 2014

pigeon_gif_background_90_redp
Unsure which of these two I like more. The smoothness of the above one is nice, but so is the variation in the below one.
pigeon_gif_background_90_red2p

Of all the artist print on GifPop’s website Pixelfucks‘ smeared doe caught my eye.  I real liked the gif. I also thought it would print well since its composition stayed mostly the same and the doe was created in such a way that even if the colors weren’t right, it’d still stand out.

It took me a while to figure out what I wanted to make for my gif. I kept playing around in processing hoping something would pop out. I had created a series of photos (Walking in the Sky) in December that I wanted to animate in some way so I decided to try this, which lead me to create the shimmering diamond effect.

On my journey of tinkering I decided to incorporate a pigeon I made in Illustrator a while ago. And when I tried it out, I realized that I had created my own version of Pixelfuck’s doe.

Origins – Ze Pigeon (Made in Illustrator):

Pig2 [Converted]

 Origins – Background Pattern Source (Made in Photoshop/Illustrator):

background copy

Red Pigeon:

pigeon_gif_red_90

 Background Strobe:

pigeon_gif_background2

Alternative Version (Original Blue Background):

pigeon_gif_background_903

I was not sure about the shimmering diamond effect with this color choice or it could be that I have messed with it way too much that I have lost any sense of what it truly looks like.

Alternative Version (Pigeon Swarm):

pigeon_gif_swarm_90

 Sketch:

sketch_final

 Ze Code:

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292

// This is a template for creating a looping animation in Processing. 
// When you press a key, this program will export a series of images
// into an "output" directory located in its sketch folder. 
// These can then be combined into an animated GIF. 
// Prof. Golan Levin, January 2014 - CMU IACD
 
//===================================================
// Global variables. 
 
int     nFramesInLoop = 7; // for lenticular export, change this to 10!
int     nElapsedFrames;
boolean bRecording; 
PImage img, img2;
 
String  myName = "itbmac-902";
 
int offsetX = 45;
 
int arraySize = 33; // 8;
int[] xPoints = {
  234, 207, 236, 190, 237, 209, 237, 188, 234, 207, 236, 191, 236, 188, 237, 191, 236, 284, 237, 284, 234, 282, 236, 265, 234, 284, 236, 267, 236, 283, 236, 266, 234
};
 
int[] yPoints = {
  7, 58, 92, 125, 168, 212, 258, 302, 343, 383, 438, 494, 539, 584, 632, 679, 719, 679, 633, 586, 540, 492, 438, 381, 343, 303, 258, 212, 168, 127, 91, 58, 9
};
 
int arraySize2 = 35; 
int[] xPoints2 = {
  240, 268, 237, 284, 239, 269, 238, 285, 239, 269, 237, 284, 237, 267, 239, 285, 243, 321, 284, 331, 276, 332, 283, 329, 282, 331, 286, 327, 281, 334, 284, 331, 282, 324, 240
};
int[] yPoints2 = {
  9, 58, 93, 125, 169, 211, 258, 303, 342, 381, 440, 493, 540, 585, 632, 678, 719, 718, 677, 632, 586, 539, 496, 437, 381, 344, 307, 257, 212, 170, 126, 91, 55, 11, 10
};
 
//===================================================
void setup() {
  size (1500, 1500); 
  img = loadImage("pigeon.png");
  img2 = loadImage("pigeon_2.png");
  colorMode(HSB, 1500, 100, 100, 1.0);
  bRecording = false;
  nElapsedFrames = 0;
  frameRate (nFramesInLoop);
}
//===================================================
void keyPressed() { 
  // Press a key to export frames to the output folder
  bRecording = true;
  nElapsedFrames = 0;
}
 
//===================================================
void draw() {
 
  // Compute a percentage (0...1) representing where we are in the loop.
  float percentCompleteFraction = 0; 
  if (bRecording) {
    percentCompleteFraction = (float) nElapsedFrames / (float)nFramesInLoop;
  } 
  else {
    float modFrame = (float) (frameCount % nFramesInLoop);
    percentCompleteFraction = modFrame / (float)nFramesInLoop;
  }
 
  // Render the design, based on that percentage. 
  renderMyDesign (percentCompleteFraction);
 
  // 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;
    }
  }
}
 
//===================================================
void renderMyDesign (float percent) {
 
  // This is an example of a function that renders a temporally looping design. 
  // It takes a "percent", between 0 and 1, indicating where we are in the loop. 
  // This example uses two different graphical techniques. 
  // Use or delete whatever you prefer from this example. 
  // Remember to SKETCH FIRST!
 
  //----------------------
  // here, I set the background and some other graphical properties
  background (180);
  smooth(); 
  stroke (0, 0, 0, 0); 
  strokeWeight (0); 
 
  //----------------------
  // Here's a set of linearly-moving circles
  float ballSize = 80;
  float topY = 0 ;//- ballSize - 2;
  float botY = height+100;
  float spanY = botY - topY; 
 
  int nMovingBalls = 90; // 30; 
  for (int i=0; i < = nMovingBalls; i++) {
    float ballSpacing = spanY / (float)nMovingBalls;
    float yBase = -100; // offset for radius of ball 
    float yPercent = map(percent, 0, 1, topY, topY+ballSpacing);
    float yPosition = yBase + (yPercent + (i*ballSpacing))%spanY; 
 
    // stroke (yPercent, 100, 100); //random(255), random(255), random(255), 0.8); 
 
    //float cPos = map(yPosition, -100, 1600, 600, 1200); // old
    //float cPos = map(yPosition, -100, 1600, 00, 300); //red
    float cPos = map(yPosition, -100, 1600, 780, 1120);
    fill (cPos+10, 75, 100, 0.8);
    rect (0, yPosition, 1500, 80);
  }
 
  //float yPerc = map(percent, 0, 1, 0, -500);
  float yPerc = map(percent, 0, 1, 0, -1500);
  float offsetY = yPerc; //-1 * (20 + percent*300)%500;//90;
 
  float offsetY2 = offsetY + 2100;
 
  float offsetXD = 3.0;
 
   float offsetC = 3.0;
  //float offsetC = 1.0; // red
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + offsetX, yPoints[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 90 + 250) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD + 0 + offsetX, yPoints2[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 140 + 175) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + 300  + offsetX, yPoints[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 90 + 275) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD + 300 + offsetX, yPoints2[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 140 + 175) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD - 300 + offsetX, yPoints[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 90 + 250) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD - 300 + offsetX, yPoints2[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 90 + 275) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD - 600 + offsetX, yPoints2[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD - 600 + offsetX, yPoints[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + 600 + offsetX, yPoints[i] * offsetXD + offsetY);
  }
  endShape();
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + offsetX, yPoints[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 90 + 250) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD + 0 + offsetX, yPoints2[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 140 + 175) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + 300  + offsetX, yPoints[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 90 + 275) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD + 300 + offsetX, yPoints2[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 140 + 175) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD - 300 + offsetX, yPoints[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 90 + 250) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD - 300 + offsetX, yPoints2[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 90 + 275) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize2; i++)
  {
    vertex(xPoints2[i] * offsetXD - 600 + offsetX, yPoints2[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD - 600 + offsetX, yPoints[i] * offsetXD + offsetY2);
  }
  endShape();
 
  fill ((percent * 140 + 150) * offsetC, 75, 100);
  beginShape();
  for (int i = 0; i < arraySize; i++)
  {
    vertex(xPoints[i] * offsetXD + 600 + offsetX, yPoints[i] * offsetXD + offsetY2);
  }
  endShape();
 
  for (int i=0; i <= nMovingBalls; i++) {
    float ballSpacing = spanY / (float)nMovingBalls;
    float yBase = -100; // offset for radius of ball 
    float yPercent = map(percent, 0, 1, topY, topY+ballSpacing);
    float yPosition = yBase + (yPercent + (i*ballSpacing))%spanY; 
 
    float cPos = map(yPosition, -100, 1600, 780, 1120);
    //float cPos = map(yPosition, -100, 1600, 000, 300); //red
    //float cPos = map(yPosition, -100, 1600, 600, 1200); // old
    fill (cPos+10, 75, 100, 0.2); // non-swarm
    //fill (cPos+10, 75, 100, 0.30); // swarm
    rect (0, yPosition, 1500, 80);
 
    println(percent);
  }
 
  //image(img, 0, 0);
  //image(img2, 0, 0);
 
}