Category: 02

chaine-Scope

My zoetrope was the main reason behind my looping gif. I wanted to mostly play around with circles and how multiple circles can create different illusions. For example, a growing and shrinking circle can look like a person blinking. Incorporating multiple circles growing at different speeds can give off an alien feel and it could look like a signal receiver. I decided to use part of the template of the elongating ellipse to create the shadow at the base depending on the "growth" of the circle while it was bouncing and being enveloped by two larger circles.

/*
// Template for KidzLabs/4M/Toysmith Animation Praxinoscope
// https://www.amazon.com/4M-3474-Animation-Praxinoscope/dp/B000P02HYC
// https://www.walmart.com/ip/Animation-Praxinoscope-Science-Kits-by-Toysmith-3474/45681503
// Developed for p5.js, September 2018 * Golan Levin 
 
*/
 
var inch = 72.0; 
var diamArtInner = inch * 1.50; 
var diamArtOuter = inch * 4.80; 
var diamCutInner = inch * 1.41; 
var diamCutOuter = inch * 4.875; 
var holeDy = inch * 0.23;
var holeDx = inch * 0.20;
var holeD = inch * 0.1;
 
var nFrames = 10; 
var myFrameCount = 0;
var exportFrameCount = 0; 
 
var bAnimate = true;
var bExportFrameImages = false;
var bRecordingSinglePNG = false;
 
//-------------------------------------------------------
function setup() {
  createCanvas(792, 612); // 11x8.5" at 72DPI
  frameRate(20);
  smooth();
} 
 
 
//-------------------------------------------------------
function draw() {
  background(240); 
 
  // Do all the drawing. 
  push(); 
  translate(width/2, height/2);
  drawCutLines(); 
  drawGuides(); 
  drawAllFrames();
  pop();
 
 
  if (bExportFrameImages){
    // Note that myFrameCount is incremented elsewhere.
    var filename = "myZoetrope_" + nf(myFrameCount,2) + ".png";
    saveCanvas(filename, 'png');
    if (myFrameCount >= nFrames){
      bExportFrameImages = false;
    }
  }
 
 
  if (bRecordingSinglePNG) {
    saveCanvas('myPraxinoscope.png', 'png');
    bRecordingSinglePNG = false;
  }
}
 
 
//-------------------------------------------------------
function keyPressed() {
  switch (key) {
  case ' ': 
    // Press spacebar to pause/unpause the animation. 
    bAnimate = !bAnimate;
    break;
 
  case 'p':
    case 'P':
      // Press 'p' to export a single PNG for the Zoetrope. 
      // Note: This is for 17x11" paper! 
      // Be sure to print at 100%!
      bRecordingSinglePNG = true;
      break;
 
    case 'f':
    case 'F':
      // Press 'f' to export multiple frames 
      // (in order to make an animated .GIF)
      // such as with http://gifmaker.me/
      myFrameCount = 0;
      exportFrameCount = 0;
      bExportFrameImages = true;
      bAnimate = true;
      break;
  }
}
 
//-------------------------------------------------------
function drawCutLines() {
  fill(0); 
  textAlign(CENTER, BOTTOM); 
  text("Praxinoscope Template", 0, 0-diamCutOuter/2-6); 
 
  stroke(0); 
  strokeWeight(1.0);
 
  noFill(); 
  if (!bRecordingSinglePNG) {
    fill(255); 
  }
  ellipse(0, 0, diamCutOuter, diamCutOuter);
 
  noFill(); 
  if (!bRecordingSinglePNG) {
    fill(240); 
  }
  ellipse(0, 0, diamCutInner, diamCutInner);
 
  noFill(); 
  ellipse(diamCutOuter/2 - holeDx, 0-holeDy, holeD, holeD); 
 
  line (diamCutInner/2, 0, diamCutOuter/2, 0);
}
 
//-------------------------------------------------------
function drawGuides() {
  // This function draws the guidelines. 
  // Don't draw these when we're exporting the PNG. 
  if (!bRecordingSinglePNG) {
 
    noFill(); 
    stroke(128); 
    strokeWeight(0.2); 
    ellipse(0, 0, diamArtInner, diamArtInner); 
    ellipse(0, 0, diamArtOuter, diamArtOuter);
 
    for (var i=0; i<nFrames; i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
      var pxi = diamArtInner/2 * cos(angle);
      var pyi = diamArtInner/2 * sin(angle);
      var pxo = diamArtOuter/2 * cos(angle);
      var pyo = diamArtOuter/2 * sin(angle);
      stroke(128); 
      strokeWeight(0.2);
      line (pxi, pyi, pxo, pyo);
    }
 
    // Draw the red wedge outline, highlighting the main view.
    var redWedge = 7; // assuming nFrames = 10
    for (var i=redWedge; i<=(redWedge+1); i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
      var pxi = diamArtInner/2 * cos(angle);
      var pyi = diamArtInner/2 * sin(angle);
      var pxo = diamArtOuter/2 * cos(angle);
      var pyo = diamArtOuter/2 * sin(angle);
      stroke(255, 0, 0); 
      strokeWeight(2.0);
      line (pxi, pyi, pxo, pyo);
    }
    noFill(); 
    stroke(255, 0, 0); 
    strokeWeight(2.0);
    var startAngle = redWedge*TWO_PI/nFrames;
    var endAngle = (redWedge+1)*TWO_PI/nFrames;
    arc(0, 0, diamArtInner, diamArtInner, startAngle, endAngle); 
    arc(0, 0, diamArtOuter, diamArtOuter, startAngle, endAngle); 
 
 
    for (var i=0; i<nFrames; i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
 
      push();
      rotate(angle); 
      var originY = ((diamArtOuter + diamArtInner)/2)/2;
      translate(0, 0-originY); 
 
      noFill(); 
      stroke(128); 
      strokeWeight(0.2);
      //line (-inch/2, 0, inch/2, 0); 
      //line (0, -inch/2, 0, inch/2); 
 
      pop();
    }
  }
}
 
//-------------------------------------------------------
function drawAllFrames() {
  for (var i=0; i<nFrames; i++) {
    var angle = map(i, 0, nFrames, 0, TWO_PI); 
    var originY = ((diamArtOuter + diamArtInner)/2)/2;
 
    push();
    rotate(angle); 
    translate(0, 0-originY); 
    scale(0.8, 0.8); // feel free to ditch this 
 
    var whichFrame = i; 
    if (bAnimate) {
      whichFrame = (i+myFrameCount)%nFrames;
    }
    drawArtFrame (whichFrame); 
    // drawArtFrameAlternate (whichFrame); 
 
    pop();
  }
  myFrameCount++;
}
 
 
//-------------------------------------------------------
function drawArtFrame ( whichFrame ) { 
  // Draw the artwork for a generic frame of the Praxinoscope, 
  // given the framenumber (whichFrame) out of nFrames.
  // NOTE #1: The "origin" for the frame is in the center of the wedge.
  // NOTE #2: Remember that everything will appear upside-down!
 
  push();
  fill(0); 
  noStroke(); 
 
  // Draw a pulsating ellipse
 
  //draw the shadow
  noStroke();
  fill(150,150,150);
  var t = map(whichFrame, 0, nFrames, 0, 1); 
  var shadow = map(cos(t*TWO_PI), 1, -1, 10, 30); 
  ellipse(0, 45, shadow, shadow*0.5);
 
 
  noFill(); 
  stroke(0);
  strokeWeight(1); 
 
  var diam = map(cos(t*TWO_PI), -1, 1, -30, 50); 
 
  //first circle (biggest)
  var ell1 = map(cos(t * TWO_PI), 1, -1, 17, (30*(whichFrame/3)));
  ellipse(0, diam, ell1, ell1);
 
  //second circle (second biggest)
  var ell2 = map(cos(t * TWO_PI), 1, -1, 16, (30*(whichFrame/4)));
  ellipse(0, diam, ell2, ell2);
 
  //center black circle
  fill(0);
  var diam2 = map(cos(t * TWO_PI), 1, -1, 15, 30);
  ellipse(0, diam, diam2, diam2);
  pop();
 
}
 
//-------------------------------------------------------
function drawArtFrameAlternate( whichFrame ) { 
  // An alternate drawing test. 
  // Draw a falling object. 
 
 
  // Draw a little splat on the frame when it hits the ground. 
  if (whichFrame == (nFrames-1)) {
    stroke(0, 0, 0); 
    strokeWeight(0.5); 
    var nL = 10;
    for (var i=0; i<nL; i++) {
      var a = HALF_PI + map(i, 0, nL-1, 0, TWO_PI);
      var cx = 12 * cos(a);
      var cy = 10 * sin(a); 
      var dx = 16 * cos(a);
      var dy = 13 * sin(a); 
      line (cx, 45+cy, dx, 45+dy);
    }
  }
 
  // Draw a little box frame
  fill(255); 
  stroke(0, 0, 0);
  strokeWeight(1); 
  rect(-5, -50, 10, 100); 
 
  // Make the puck accelerate downward
  var t = map(whichFrame, 0, nFrames-1, 0, 1); 
  var t2 = pow(t, 2.0); 
  var rh = 8 + whichFrame * 0.5; // wee stretch
  var ry = map(t2, 0, 1, 0, 100-rh) - 50; 
 
  noStroke(); 
  fill(0, 0, 0);
  rect(-5, ry, 10, rh);
}

nerual-Scope

Process:

I really liked the aesthetics of the line pop explosion thing, so I wanted to make use of it somehow. I was also fixated on making something meta, in preparation for the GIF project.

Actual Code:

function drawArtFrame(whichFrame) {
  // Draw the artwork for a generic frame of the Zoetrope, 
  // given the framenumber (whichFrame) out of nFrames.

  drawMyArtFrame(whichFrame);
}
  
function drawMyArtFrame(whichFrame){
  noFill();
  stroke(0);
  strokeWeight(1);
  var padding = 30;
  var pos = map(whichFrame, 0, nFrames, artAreaHeight-padding, padding);
  var t = map(whichFrame, 0, nFrames, 0, 1);
  var diam = map(cos(t * TWO_PI), -1, 1, artAreaHeight-padding, padding+10);
  //ellipse(0, pos, 10, 10);
  var dir = map(whichFrame, 0, nFrames, -1, 1);
  if(whichFrame > 9 || whichFrame < 3) 
    drawPop(0, padding-10, 5, 10);
  drawMouseScaled(0, diam, 5);
}

 

casher-Scope

Since I am still new to Javascript/p5.js, I didn't totally understand what the code in the template meant when I began this assignment. As a result, most of my design is from experimentation. I started out by writing some groups of statements similar to the template's, and then I just started changing values of variables and parameters, testing the limits of the application. I spent a long time perfecting everything so it looked aesthetic.

There's not much else to explain, but I love the way it turned out! And I am pleased with the effort I put in because now I definitely better understand how the code works.

/*
// Template for KidzLabs/4M/Toysmith Animation Praxinoscope
// https://www.amazon.com/4M-3474-Animation-Praxinoscope/dp/B000P02HYC
// https://www.walmart.com/ip/Animation-Praxinoscope-Science-Kits-by-Toysmith-3474/45681503
// Developed for p5.js, September 2018 * Golan Levin 
 
*/
 
var bRecordingPNG = false;
 
var inch = 72.0; 
var diamArtInner = inch * 1.50; 
var diamArtOuter = inch * 4.80; 
var diamCutInner = inch * 1.41; 
var diamCutOuter = inch * 4.875; 
var holeDy = inch * 0.23;
var holeDx = inch * 0.20;
var holeD = inch * 0.1;
 
var nFrames = 10; 
var myFrameCount = 0;
var exportFrameCount = 0; 
var bAnimate = true; 
var bExportFrameImages = false;
 
//-------------------------------------------------------
function setup() {
  createCanvas(792, 612); // 11x8.5" at 72DPI
  frameRate(20);
  smooth();
} 
 
 
//-------------------------------------------------------
function draw() {
  background(255); 
 
  // Do all the drawing. 
  push(); 
  translate(width/2, height/2);
  drawCutLines(); 
  //drawGuides(); 
  drawAllFrames();
  pop();
 
 
  if (bRecordingPNG) {
    saveCanvas('myPraxinoscope.png', 'png');
    bRecordingPNG = false;
  }
}
 
 
//-------------------------------------------------------
function keyPressed() {
  switch (key) {
  case ' ': 
    // Press spacebar to pause/unpause the animation. 
    bAnimate = !bAnimate;
    break;
 
  case 'p': 
  case 'P':
    // Press 'p' to export a PNG for the Praxinoscope.
    bRecordingPNG = true; 
    break;
 
  case 'f':
    case 'F':
      // Press 'f' to export multiple frames 
      // (in order to make an animated .GIF)
      // such as with http://gifmaker.me/
      myFrameCount = 0;
      exportFrameCount = 0;
      bExportFrameImages = true;
      bAnimate = true;
 
      if (bExportFrameImages) {
        var recordFramerate = 1.0;
        var recordDuration = nFrames * 1.01; 
        frameRate(recordFramerate); // 1 FPS baby
        saveFrames('Praxinoscope_', 'png', recordDuration, recordFramerate); 
        bExportFrameImages = false;
      }
 
      break;
  }
}
 
//-------------------------------------------------------
function drawCutLines() {
  fill(0); 
  textAlign(CENTER, BOTTOM); 
  text("Praxinoscope Template", 0, 0-diamCutOuter/2-6); 
 
  stroke(0); 
  strokeWeight(1.0);
 
  noFill(); 
  if (!bRecordingPNG) {
    fill(255); 
  }
  ellipse(0, 0, diamCutOuter, diamCutOuter);
 
  noFill(); 
  if (!bRecordingPNG) {
    fill(240); 
  }
  ellipse(0, 0, diamCutInner, diamCutInner);
 
  noFill(); 
  ellipse(diamCutOuter/2 - holeDx, 0-holeDy, holeD, holeD); 
 
  line (diamCutInner/2, 0, diamCutOuter/2, 0);
}
 
//-------------------------------------------------------
function drawGuides() {
  // This function draws the guidelines. 
  // Don't draw these when we're exporting the PNG. 
  if (!bRecordingPNG) {
 
    noFill(); 
    stroke(128); 
    strokeWeight(0.2); 
    ellipse(0, 0, diamArtInner, diamArtInner); 
    ellipse(0, 0, diamArtOuter, diamArtOuter);
 
    for (var i=0; i&lt;nFrames; i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
      var pxi = diamArtInner/2 * cos(angle);
      var pyi = diamArtInner/2 * sin(angle);
      var pxo = diamArtOuter/2 * cos(angle);
      var pyo = diamArtOuter/2 * sin(angle);
      stroke(128); 
      strokeWeight(0.2);
      line (pxi, pyi, pxo, pyo);
    }
 
    // Draw the red wedge outline, highlighting the main view.
    var redWedge = 7; // assuming nFrames = 10
    for (var i=redWedge; i&lt;=(redWedge+1); i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
      var pxi = diamArtInner/2 * cos(angle);
      var pyi = diamArtInner/2 * sin(angle);
      var pxo = diamArtOuter/2 * cos(angle);
      var pyo = diamArtOuter/2 * sin(angle);
      stroke(255, 0, 0); 
      strokeWeight(2.0);
      line (pxi, pyi, pxo, pyo);
    }
    noFill(); 
    stroke(255, 0, 0); 
    strokeWeight(2.0);
    var startAngle = redWedge*TWO_PI/nFrames;
    var endAngle = (redWedge+1)*TWO_PI/nFrames;
    arc(0, 0, diamArtInner, diamArtInner, startAngle, endAngle); 
    arc(0, 0, diamArtOuter, diamArtOuter, startAngle, endAngle); 
 
 
    for (var i=0; i&lt;nFrames; i++) {
      var angle = map(i, 0, nFrames, 0, TWO_PI); 
 
      push();
      rotate(angle); 
      var originY = ((diamArtOuter + diamArtInner)/2)/2;
      translate(0, 0-originY); 
 
      noFill(); 
      stroke(128); 
      strokeWeight(0.2);
      line (-inch/2, 0, inch/2, 0); 
      line (0, -inch/2, 0, inch/2); 
 
      pop();
    }
  }
}
 
//-------------------------------------------------------
function drawAllFrames() {
  for (var i=0; i&lt;nFrames; i++) {
    var angle = map(i, 0, nFrames, 0, TWO_PI); 
    var originY = ((diamArtOuter + diamArtInner)/2)/2;
 
    push();
    rotate(angle); 
    translate(0, 0-originY); 
    scale(0.8, 0.8); // feel free to ditch this 
 
    var whichFrame = i; 
    if (bAnimate) {
      whichFrame = (i+myFrameCount)%nFrames;
    }
    drawArtFrame (whichFrame); 
    // drawArtFrameAlternate (whichFrame); 
 
    pop();
  }
  myFrameCount++;
}
 
 
//-------------------------------------------------------
function drawArtFrame ( whichFrame ) { 
 
  //ellipses
  fill(random(0, 255), random(150,200), random(200,230));
  stroke(255);
  strokeWeight(2);
  for (var i = 0; i &lt; nFrames; i++)
  {
    var t = map(whichFrame, 1, nFrames, 1, i*.38);
  	var diam = map(cos(t*TWO_PI*.22), -1, 1, -i*8, i*8);
  	ellipse(0,i*7-10,diam*.7,diam*0.4);
  }
 
  //lines
  p1 = -45;
  p2 = 70;
  p3 = -0;
  p4 = 54;
  stroke(100);
  strokeWeight(1.2);
  line2 = map(whichFrame, -1, 1, -50, 50);
  for (var i = 0; i &lt; nFrames; i++) {
    line(p1+8*whichFrame,p2,p3,p4);
  }
 
  //triangles
  var p1x = 50;
  var p1y = -25;
  var p2x = 60;
  var p2y = -60;
  var p3x = -40;
  var p3y = -10;
  strokeWeight(2);
  stroke(255);
  for (var i = 0; i &lt; nFrames; i++) {
    fill(25*whichFrame);
    triangle(p1x/(whichFrame*-1)-10, p1y-40, p2x/(whichFrame**2)+20, p2y+20, p3x+whichFrame*10, p3y);
    fill(30*whichFrame);
    triangle(p1x/(whichFrame*2)-3, p1y-30, p2x/(whichFrame)+20, p2y+20, p3x+whichFrame*-2+15, p3y);
  }
 
  //circles
  var p1 = -50;
  var p2 = 0;
  noFill();
  stroke(50);
  strokeWeight(1);
  for (var i = 0; i &lt; nFrames-4; i+=2) {
    stroke(2**whichFrame);
    ellipse(p1-whichFrame*5, p2+20, 10, 10);
    p1 = 0;
    p2 = 0;
  }
}

lass-Reading02

1A) Something I like that exhibits effective complexity is the circle patterns made in sand by pufferfish. These patterns are highly ordered as they always follow a specific geometric procedure that seems to create nearly identical circles each time. I find this interesting because the pattern is created so instinctively, but cannot be perfect as it was created by a living being under varying underwater conditions.

(photo from National Geographic)

1B) The Problem of Dynamics

This problem stood out to me because I thought it was strange that people would try to put a restriction on generative art, saying that it MUST exhibit change over time in order to be truly generative, otherwise it is just an artifact. While I think that being dynamic is an interesting quality to have, I don't think that it should be what qualifies art as generative or not. Even when results are "frozen", the process through which they were created was generative.

 

breep-Reading02

1A

I was immediately reminded of Ian Cheng's work Emissaries in relation to efficient Complexity. The work seems entirely arbitrary, and in some ways his design of it is, but the underlying relationships between his avatars organize this system in a way that is simultaneously perceptible as both ordered and chaotic. I would say that it tends toward the randomness as a viewer unaware in the skills required for generative making, but the underlying narrative and relationship structure is what makes it ordered.

gif courtesy of : http://www.contemporaryartdaily.com/2017/09/ian-cheng-at-moma-ps1/

1B

The Problem of Uniqueness: Given that alot of my work before CMU was primarily in the medium of print making, the idea of the uniqueness of prints strongly echoed for me in this statement. Through this, I fully agree that generative art creates completely new and unique artifacts, which contribute to a larger body that comes together to make that work of art. In a way this problem explores how the same idea can also evolve rapidly with the smallest of changes that generative systems inherently produce.

chromsan-Reading02

1A. I think a good example of something exhibiting effective complexity is the structure of a tree. Trees grow in a random way, so no two trees are alike. In this sense they posses some randomness. That said, trees can be relied upon to grow in a fairly recognizable way; everyone can recognize the shape and structure of a tree when they see it. They are ordered in this regard. I think trees, among many natural things, perfectly straddle the line between chaos and order.

1B. The Problem of Locality, Code, and Malleability. This is philosophically an interesting problem, there are clear parallels between it and the mind-body problem. It is an important one as well, as it frames how we think of generative art. The dualist might argue that the art exists discretely from the code, that it exists in the place in which it is seen. The materialist might argue that the art is the code itself. I think to some degree both are correct; though the art is a function of the code, the code may have artistic properties and running it produces other artistic properties that cannot be experienced from just the code itself.

 

chaine-Reading02

Question 1A: I had already known before reading this that there was a complexity to biological life that seemed generated or highly ordered, but I really enjoyed reading about this scale of total order and randomness. When thinking of an example, my mind automatically goes to the appearance of the golden ratio in nature. For example, these flower heads:

And plenty of other examples from https://io9.gizmodo.com/5985588/15-uncanny-examples-of-the-golden-ratio-in-nature.

In terms of its effective complexity, disregarding its microscopic, structured atoms, it also displays a highly structured form. This example would be closer to total order, near crystal lattices.

Question 1B: "The Problem of Dynamics" is something I am currently struggling with. I always question what defines a certain subset within art. I always feel like generative art is art that is constantly "generating" itself, but I think that generation can also happen behind the scenes. For example, while a piece of code is in the process of generating art, it is still generating. 

 

nixel-Scope

 

pdf: zoetrope-output

For my zoetrope design, I experimented a lot with arcs. I started off with just one eye because I wanted to make some sort of illuminati related loop, but then decided to go in a simpler direction. I like the result, although I wish there was more time to make the animation actually loop instead of clearly starting over every time.

Here are some very rough initial designs. My first idea was a jump roping ball. Second was a blinking eye looking around. I initially programmed this one using ellipses but was not satisfied so I switched to arcs and got the final result you see.

 
// Processing Template for Zoetrope toy by Eye Think
// https://www.amazon.com/Zoetrope-Animation-Toy-Victorian-Illusion/dp/B007VM9HZO/
// Developed for Processing 3.3.6 * http://processing.org
// 24 January 2018 * Golan Levin 
 
// See information about Processing PDF export at: 
// https://processing.org/reference/libraries/pdf/index.html
// PDF generated by Processing can be opened in Adobe Illustrator.
import processing.pdf.*;
boolean bRecordingPDF = false;
 
float inch = 72; 
float paperStripWidth = inch * 12.625;
float paperStripHeight = inch * 1.3125;
float overlapMargin = inch * 0.4375;
float artAreaWidth = paperStripWidth - overlapMargin;
float artAreaHeight = paperStripHeight;
 
final int nFrames = 11; 
int myFrameCount = 0;
int exportFrameCount = 0; 
boolean bAnimate = true; 
boolean bExportFrameImages = false;
 
//-------------------------------------------------------
void setup() {
  size(1224, 792); // 17x11" at 72DPI
  frameRate(15);
  smooth();
} 
 
//-------------------------------------------------------
void draw() {
  background(240); 
  if (bRecordingPDF) {
    beginRecord(PDF, "zoetrope-output.pdf");
  }
 
  // Do all the drawing. 
  pushMatrix(); 
  translate(width/2, height/2);
  translate(0-paperStripWidth/2, 0-paperStripHeight/2); 
 
  drawCutLines(); 
  drawGuides(); 
  drawAllFrames();
  popMatrix();
 
  if (bExportFrameImages) {
    // If activated, export .PNG frames 
    if (exportFrameCount < nFrames) {
      String filename = "frame_" + nf((exportFrameCount%nFrames), 3) + ".png";
      saveFrame("frames/" + filename);
      println("Saved: " + filename); 
      exportFrameCount++;
      if (exportFrameCount >= nFrames) {
        bExportFrameImages = false;
        exportFrameCount = 0;
      }
    }
  }
 
  if (bRecordingPDF) {
    endRecord();
    bRecordingPDF = false;
  }
}
 
 
//-------------------------------------------------------
void keyPressed() {
  switch (key) {
  case ' ': 
    // Press spacebar to pause/unpause the animation. 
    bAnimate = !bAnimate;
    break;
 
  case 'p': 
  case 'P':
    // Press 'p' to export a PDF for the Zoetrope. 17x11" paper!
    bRecordingPDF = true; 
    break;
 
  case 'f': 
  case 'F': 
    // Press 'f' to export .png Frames (to make an animated .GIF)
    myFrameCount = 0; 
    exportFrameCount = 0; 
    bExportFrameImages = true;
    bAnimate = true; 
    break;
  }
}
 
//-------------------------------------------------------
void drawCutLines() {
  fill(0); 
  textAlign(CENTER, BOTTOM); 
  text("Zoetrope Template", paperStripWidth/2, -20); 
 
  stroke(0); 
  strokeWeight(1.0);
  noFill(); 
  if (!bRecordingPDF) {
    fill(255);
  }
  rect(0, 0, paperStripWidth, paperStripHeight);
}
 
//-------------------------------------------------------
void drawGuides() {
  // This function draws the guidelines. 
  // Don't draw these when we're exporting the PDF. 
  if (!bRecordingPDF) {
    float frameSpacing = artAreaWidth / nFrames;
 
    stroke(128); 
    strokeWeight(0.2);
    for (int i=0; i<nFrames; i++) {
      pushMatrix();
      translate(i * frameSpacing, 0);
      rect(0, 0, frameSpacing, artAreaHeight); 
      popMatrix();
    }
  }
}
 
//-------------------------------------------------------
void drawAllFrames() {
  for (int i=0; i<nFrames; i++) {
 
    float frameSpacing = artAreaWidth / nFrames;
 
    pushMatrix();
    translate((i + 0.5) * frameSpacing, 0);
 
    int whichFrame = i; 
    if (bAnimate) {
      whichFrame = (i+myFrameCount)%nFrames;
    }
     drawArtFrame (whichFrame); 
 
 
    popMatrix();
  }
  myFrameCount++;
}
 
 
 
//-------------------------------------------------------
//thank you to golan for the template and examples
void drawArtFrame(int whichFrame) { 
 
  noFill();
  strokeWeight(2);
  stroke(0,0,0);
  float eyeY = map(whichFrame, 0, nFrames-1, 0, artAreaHeight*0.30);
  float eyeLid = map(whichFrame, 0, nFrames-1, artAreaHeight*0.30, 0);
  float irisY = map(whichFrame, 0, nFrames-1, 0, artAreaHeight*0.15);
  float eyebrow = map(whichFrame, 0, nFrames-1, 0, artAreaHeight*0.1);
  float tearY = map(whichFrame, 0, nFrames-1, artAreaHeight*0.7, artAreaHeight*1.1);
  float tearY2 = map(whichFrame, 0, nFrames-1, artAreaHeight*0.9, artAreaHeight*1.2);
 
  //right eye
  fill(255,255,255);
  stroke(0,0,0);
  arc(20, artAreaHeight/2, 30, eyeY, 0, PI);
  stroke(50,100,200);
  strokeWeight(2);
  fill(0,0,0);
  arc(20, artAreaHeight/2+1, 15, irisY, 0, PI);
  stroke(0,0,0);
  strokeWeight(3);
  fill(255,255,255);
  arc(20, artAreaHeight/2-1, 30, eyeLid, 0, PI);
 
 
  //left eye
  fill(255,255,255);
  stroke(0,0,0);
  arc(-20, artAreaHeight/2, 30, eyeY, 0, PI);
  stroke(50,100,200);
  strokeWeight(2);
  fill(0,0,0);
  arc(-20, artAreaHeight/2+1, 15, irisY, 0, PI);
  stroke(0,0,0);
  strokeWeight(3);
  fill(255,255,255);
  arc(-20, artAreaHeight/2-1, 30, eyeLid, 0, PI);
 
  //eyebrows
  strokeWeight(2);
  line(7, -eyebrow+40, 35, 40);
  line(-35, 40, -7, -eyebrow+40);
 
  //sad water
  fill(10,50,200,whichFrame*0.9+200);
  noStroke();
  ellipse(-25, tearY, 2, 10);
  ellipse(-25, tearY2, 2, 10);
}

nixel-Reading02

 

Question 1A. 

In my experience, learning to dance, like most art, has two main components: technical understanding and intuitive understanding. The technical side is orderly and logical, and you can apply any number of systems in order to understand it. However, the intuitive side is chaotic and often illogical, and results in many different interpretations by different people. You can't go extreme on either side because that risks oversimplification and a lack of true understanding of the art, so in employing a mix of the two, you achieve successful execution and therefore effective complexity.

 

Question 1B.

For my personal work, relating to the problem of intent, I don't see why I would use generative methods to create art over other more meaningful and comfortable methods for me. When I look at generative art, I'm not always able to identify the intent behind using that method, and I don't exactly know why people would choose to make art that way, but I think this is just a side effect of me needing to study and understand [technological] art in general.

 

casher-Reading02

1A: One family of things I like that exhibits effective complexity is snowflakes, which lie almost in the middle of total order and total randomness. Snowflakes as a whole are technically just small pieces of ice, which means at a molecular level they are completely ordered, exhibiting crystal lattice-type structures.  The unique look of each snowflake, however, is completely influenced by the flow of heat in the air at that moment, which is ultimately unpredictable; heat itself is random at a molecular level, so it is impossible to know beforehand the rate at which the temperature will microscopically change. Therefore, the outcome of each snowflake is random.

1B: In response to The Problem of Creativity:

I feel like creativity applies the most to me as an artist, but it is hard for me to agree with one "side" or the other because I don't really see sides. I don't think creativity should be considered a problem in the first place -- there is no way to prove that any certain expression of creativity is wrong. Something is creative if it can create. And technically, all generative art is obviously creative at some point -- a human had to create the ideas in their mind before it was computed. I guess it's just a matter of whether one considers using a computer to execute the ideas to be progressive or inauthentic.