02 – Reading

Here's a major major throwback: Craig Reynolds' Boids

I believe that this project is one of the earliest examples of effective complexity in digital and generative art - where simple rules create a generative behaviour that ends up becoming a good mixture between order and disorder. In the spectrum between total order and total randomness, I believe that this sits somewhere in the middle, which is what makes it so effective. Though this slide can be adjusted depending on the number of boids in the system, and the complexity of the rules being followed.

The Problem of Postmodernity

This problem hits closest to home for me, as someone who is an acute observer/believer in the postmodern phenomenon. The shift away from modernist top-down approaches (where the whole must resemble the parts, or the theory of composition) to the postmodern beliefs of bottom-up generation, complex systems and chaos theory hold more truth in the contemporary world, especially one where technology plays such a decisive role. The world unfortunately just is not that coherent anymore.

ocannoli-Scope

Scope GIF:

Description:

My praxinoscope is a very simple design, centered around rotating circles. Initially, I was really inspired by planets and was thinking about maybe having a planet with a single asteroid. However, I thought that looked boring and decided to play around with rotation patterns and spirals. There is not much conceptually behind the design, instead it was mainly an experimentation with rotation patterns and how to make a trippy image that hurts your eyes.

Scope PDF:

ocannoli-praxinoscope-output

Scope Code:

import processing.pdf.*;
boolean bRecordingPDF = false;
 
float inch = 72; 
float diamArtInner = inch * 1.50; 
float diamArtOuter = inch * 4.80; 
float diamCutInner = inch * 1.41; 
float diamCutOuter = inch * 4.875; 
float holeDy = inch * 0.23;
float holeDx = inch * 0.20;
float holeD = inch * 0.1;
 
final int nFrames = 10; 
int myFrameCount = 0;
int exportFrameCount = 0; 
boolean bAnimate = true; 
boolean bExportFrameImages = false;
 
//-------------------------------------------------------
void setup() {
  size(792, 612); // 11x8.5" at 72DPI
  frameRate(15);
  smooth();
} 
 
//-------------------------------------------------------
void draw() {
  background(240); 
  if (bRecordingPDF) {
    beginRecord(PDF, "praxinoscope-output.pdf");
  }
 
  // Do all the drawing. 
  pushMatrix(); 
  translate(width/2, height/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 Praxinoscope.
    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("Praxinoscope Template", 0, 0-diamCutOuter/2-6); 
 
  stroke(0); 
  strokeWeight(1.0);
 
  noFill(); 
  if (!bRecordingPDF) {
    fill(255); 
  }
  ellipse(0, 0, diamCutOuter, diamCutOuter);
 
  noFill(); 
  if (!bRecordingPDF) {
    fill(240); 
  }
  ellipse(0, 0, diamCutInner, diamCutInner);
 
  noFill(); 
  ellipse(diamCutOuter/2 - holeDx, 0-holeDy, holeD, holeD); 
 
  line (diamCutInner/2, 0, diamCutOuter/2, 0);
}
 
//-------------------------------------------------------
void drawGuides() {
  // This function draws the guidelines. 
  // Don't draw these when we're exporting the PDF. 
  if (!bRecordingPDF) {
 
    noFill(); 
    stroke(128); 
    strokeWeight(0.2); 
    ellipse(0, 0, diamArtInner, diamArtInner); 
    ellipse(0, 0, diamArtOuter, diamArtOuter);
 
    for (int i=0; i<nFrames; i++) {
      float angle = map(i, 0, nFrames, 0, TWO_PI); 
      float pxi = diamArtInner/2 * cos(angle);
      float pyi = diamArtInner/2 * sin(angle);
      float pxo = diamArtOuter/2 * cos(angle);
      float pyo = diamArtOuter/2 * sin(angle);
      stroke(128); 
      strokeWeight(0.2);
      line (pxi, pyi, pxo, pyo);
    }
 
    // Draw the red wedge outline, highlighting the main view.
    int redWedge = 7; // assuming nFrames = 10
    for (int i=redWedge; i<=(redWedge+1); i++) {
      float angle = map(i, 0, nFrames, 0, TWO_PI); 
      float pxi = diamArtInner/2 * cos(angle);
      float pyi = diamArtInner/2 * sin(angle);
      float pxo = diamArtOuter/2 * cos(angle);
      float 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);
    float startAngle = redWedge*TWO_PI/nFrames;
    float endAngle = (redWedge+1)*TWO_PI/nFrames;
    arc(0, 0, diamArtInner, diamArtInner, startAngle, endAngle); 
    arc(0, 0, diamArtOuter, diamArtOuter, startAngle, endAngle); 
 
 
    for (int i=0; i<nFrames; i++) {
      float angle = map(i, 0, nFrames, 0, TWO_PI); 
 
      pushMatrix();
      rotate(angle); 
      float 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); 
 
      popMatrix();
    }
  }
}
 
//-------------------------------------------------------
void drawAllFrames() {
  for (int i=0; i<nFrames; i++) {
    float angle = map(i, 0, nFrames, 0, TWO_PI); 
    float originY = ((diamArtOuter + diamArtInner)/2)/2;
 
    pushMatrix();
    rotate(angle); 
    translate(0, 0-originY); 
    scale(0.8, 0.8); // feel free to ditch this 
 
    int whichFrame = i; 
    if (bAnimate) {
      whichFrame = (i+myFrameCount)%nFrames;
    }
    drawArtFrame (whichFrame); 
    // drawArtFrameAlternate (whichFrame); 
 
    popMatrix();
  }
  myFrameCount++;
}
 
 
//-------------------------------------------------------
void drawArtFrame (int 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!
 
  // Draw the frame number
  fill(0); 
  noStroke(); 
 
  // Draw a pulsating ellipse
  noFill(); 
  stroke(0);
  strokeWeight(1); 
  float t = map(whichFrame, 0, nFrames, 0, 1); 
  float diam = map(cos(t*TWO_PI), -1, 1, 25, 50); 
  ellipse(0, 0, diam, diam); 
 
  //rotating circle
  float radius = diam/2; 
  float rotatingArmAngle = (whichFrame*.1) * TWO_PI; 
  float px = 0 + radius*cos(rotatingArmAngle); 
  float py = 0 + radius*sin(rotatingArmAngle); 
  fill    (0); 
  stroke(51);
  ellipse(px, py, 8, 8);
 
  //rotating circle
  float rotatingArmAngle2 = (whichFrame*.1) * TWO_PI; 
  float px2 = 15 + radius*cos(rotatingArmAngle2); 
  float py2 = 15 + radius*sin(rotatingArmAngle2); 
  fill    (0); 
  stroke(51);
  ellipse(-px2, -py2, 8, 8);
 
  float px3 = -12 + radius*cos(rotatingArmAngle2); 
  float py3 = -20 + radius*sin(rotatingArmAngle2); 
  fill    (0); 
  stroke(51);
  ellipse(-px3, -py3, 8, 8);
 
  //rect figure
  float amplitude=100;
  float f=.1;
  float xR=160;
  float yR=(160)+amplitude*sin(f*whichFrame);
  rect(xR,yR,10,10); 
}
//-------------------------------------------------------
void drawArtFrameAlternate(int 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); 
    int nL = 10;
    for (int i=0; i<nL; i++) {
      float a = HALF_PI + map(i, 0, nL-1, 0, TWO_PI);
      float cx = 12 * cos(a);
      float cy = 10 * sin(a); 
      float dx = 16 * cos(a);
      float 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
  float t = map(whichFrame, 0, nFrames-1, 0, 1); 
  float t2 = pow(t, 2.0); 
  float rh = 8 + whichFrame * 0.5; // wee stretch
  float ry = map(t2, 0, 1, 0, 100-rh) - 50; 
 
  noStroke(); 
  fill(0, 0, 0);
  rect(-5, ry, 10, rh);
}

 

nannon-Scope

Kit Kat Scope

 

Originally, I wanted to do an animation using eyes for my Looping Gif assignment, but I ultimately decided not to. However, since I had a lot of sketches left over from that idea, I put them to use here instead. After drawing the eyes, and having them animate side to side, it actually reminded me a lot of the Kit Kat clocks, which I was belatedly inspired by. The starter code was super helpful, and this assignment was a fun break for the Looping Gif.

 
/*
// 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 mouseClicked() {
  console.log(mouseX, mouseY);
}
 
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(250); 
  strokeWeight(1.0);
 
 
  if (bRecordingSinglePNG) {
    fill(0); 
  }
  ellipse(0, 0, diamCutOuter, diamCutOuter);
 
 
  if (bRecordingSinglePNG) {
    fill(0); 
  }
  ellipse(0, 0, diamCutInner, diamCutInner);
 
  fill(255); 
  ellipse(diamCutOuter/2 - holeDx, 0-holeDy, holeD, holeD); 
 
  stroke(240)
  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!
 
  // Draw the frame number
  fill(0); 
  noStroke(); 
  textAlign(CENTER, CENTER); 
  text (whichFrame, 0, -45);
 
  // Draw eyes
  fill(255); 
  stroke(255);
  strokeWeight(1); 
 
  ellipse(-18, -48, 28,28); 
  ellipse(18, -48, 28,28); 
  ellipse(0,-33,15,10);
 
 
  //draw eye balls
  fill(0);
  noStroke();
  var xAxis = map(whichFrame, 0,nFrames, 0,PI)
  arc(sin(xAxis)*16-18-14+6, -48, 12,12,PI/6,(11*PI)/6, PIE);
 
  arc(sin(xAxis)*16-18-14+6+36 , -48, 12,12,PI/6,(11*PI)/6, PIE);
 
  //clock
  fill(255);
  stroke(255);
  rect(-25,-23, 50, 70, 10);
 
//clock tix
  stroke(0);
  strokeWeight(2 );
  line (0, -13, 0, -18);
 
  line (0, -13, 0, -18);
  line (0, 35, 0, 40);
  line (-18,12, -13,12);
 
   line (18,12, 13,12);
 
  //whiskers 
  stroke(255)
  line (-20,-30, -45,-35);
  line (-20,-25, -45,-20);
  line (20,-30, 45,-35);
  line (20,-25, 43,-20);
 
 
 
 
 
  // Draw some rotating spokes
    var cx = 0; 
    var cy = 12; 
    var u = 0 - map(whichFrame, 0, nFrames, 0, 1);
    var sx = cx + 15 * cos(u * TWO_PI); 
    var sy = cy + 15 * sin(u* TWO_PI); 
    stroke(0); 
 
    line (cx, cy, sx, sy);
 
 
  	var dx = 0; 
    var dy = 12; 
    var u2 = 0 - map(whichFrame, 0, nFrames/2, 0, 1);
    var vx = dx + 20 * cos(u2 * (TWO_PI+1.2)); 
    var vy = dy + 20 * sin(u2* (TWO_PI+1.2)); 
    stroke(0); 
    strokeWeight(1);
    line (dx, dy, vx, vy);
}

sapeck-Scope

My design is a simple yet slightly humorous attempt to animate an emoji. The head and eyes move with in a sinusoidal manner, and the tongue stays stationary but lengthens in accordance with the frame number.

sapeck-praxinoscope-output (PDF download)

/* Sapeck    9/12/2017
"sapeck-Scope"
60-212                        Carnegie Mellon University
Copyright (C) 2018-present  Sapeck
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License version 3 as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*/
void drawArtFrame (int whichFrame) { 
  pushMatrix();
  // move the head up and down sinusoidally
  translate(0, -10+30*sin(map(whichFrame, 0, 10, 0, 6)));
 
  // draw the head
  fill(0);
  ellipse(0, 0, 50, 50);
 
  // draw the eye sockets
  fill(255);
  ellipse(-10, -10, 20, 20);
  ellipse(10, -10, 20, 20);
 
  // draw the eyes
  fill(0);
  int eyeSize = 6+int(6*sin(map(whichFrame, 0, 10, 6, 2)));
  ellipse(-10, -10, eyeSize, eyeSize);
  ellipse(10, -10, eyeSize, eyeSize);
 
  // draw the tongue
  fill(color(255,0,0,255));
  rect(-10, 10, 20, 10+2*whichFrame, 7);
 
  popMatrix();
}

lass-Scope

download png 

For my praxinoscope, I decided to create an animation of a russian matryoshka doll opening. I liked this idea because it loops easily.
I drew the doll using p5's beginShape() and curveVertex(), but in hindsight I probably could have done it a lot more easily if I just uploaded png images for the top and bottom halves. Still, I got to experiment with drawing curves and using the p5 transformations, which was fun.

Initially, I couldn't decide between doing matryoshkas or the same concept with eggs. I think eggs would have been cool too.

function drawArtFrame ( whichFrame ) { 
  push(); 
  rotate(Math.PI); //because i made it upside down on accident. haha
  fill(255); 
  //vertices form the upper and lower matryoshka halves
  var upperHalf = [ [1.3, 2], [1.3, 0], [1.2, 1.3], [.8, 2], [0, 2.3]];
  var lowerHalf = [[1.3, 2], [1.3, 0], [1.5, -1.8], [0, -2.3]];
 
  //drawing the outer matryoshka
  sWidth = map((whichFrame ) % 10, 0, 9, 6, 12); 
  sHeight = map((whichFrame ) % 10, 0, 9, 7, 14); 
  var heightChange = 0
  fill(200);
 
  strokeWeight(1); 
  stroke(0); 
  fill(0);
  drawMatryoshka(lowerHalf, sWidth, sHeight, -1 * heightChange); 
  fill(255);
  drawMatryoshka(upperHalf, sWidth, sHeight, heightChange); 
  drawDetails(heightChange, sHeight, sWidth, 255); 
 
  //drawing the inner matryoshka
  whichFrame = (whichFrame + 0) % 10; 
  sWidth = map(whichFrame, 0, 9, 12, 15); 
  sHeight = map(whichFrame , 0, 9, 14, 20); 
  var heightChange = map(whichFrame, 0, 9, 6, 80); 
 
  var opacity =   map(whichFrame, 0, 10, 255, 0);
 
  fill(0, opacity);
  fill(0, opacity);
  stroke(0, opacity); 
  drawMatryoshka(lowerHalf, sWidth, sHeight, -1 * heightChange); 
  fill(255, opacity);
  drawMatryoshka(upperHalf, sWidth, sHeight, heightChange); 
  drawDetails(heightChange, sHeight, sWidth, opacity); 
  pop(); 
}
 
//draws shape based on the vertices w/ vertical symmetry 
function drawMatryoshka(verts, sWidth, sHeight, heightChange){
  beginShape();
  for(var i = 0; i  < verts.length; i++ ){
    curveVertex(verts[i][0] * sWidth, verts[i][1] * sHeight + heightChange); 
  }
  for(var i = verts.length - 2; i  >=0; i-- ){
    curveVertex(verts[i][0] * sWidth * -1, verts[i][1] * sHeight + heightChange); 
  }
  endShape(); 
  line(-1.3 * sWidth + .5,  heightChange, sWidth * 1.3 - .5,  heightChange);
}
 
function drawDetails(heightChange, sHeight, sWidth, opacity){
  //face
  strokeWeight(1); 
  fill(255, opacity); 
  ellipse(0, heightChange + sHeight * 1.3, sWidth * 1.7, sWidth * 1.7); 
 
  //hair
  fill(0, opacity);
  arc(0, heightChange + sHeight * 1.3, sWidth * 1.7, sWidth * 1.7, PI * 2, HALF_PI, CHORD); 
  arc(0, heightChange + sHeight * 1.3, sWidth * 1.7, sWidth * 1.7, HALF_PI, PI , CHORD); 
  strokeWeight(0); 
 
  //blush
  fill(255, 150, 150, opacity); 
  ellipse(.4 * sWidth, heightChange + sHeight * 1.2,sWidth * .4, sWidth * .4); 
  ellipse(- .4 * sWidth, heightChange + sHeight * 1.2, sWidth * .4, sWidth * .4); 
 
  //eyes and mouth
  fill(0,  opacity); 
  ellipse(.25 * sWidth, heightChange + sHeight * 1.4, sWidth * .2, sWidth * .2); 
  ellipse(- .25 * sWidth, heightChange + sHeight * 1.4, sWidth * .2, sWidth * .2); 
  ellipse(0, heightChange + sHeight , sWidth * .5, sHeight * .05);
 
  //bow
  fill(255, opacity);
  push(); 
  translate(0, -1 * heightChange);
  rotate(10); 
  ellipse(.2 * sWidth,  -.1 * sHeight, sWidth * .6, sWidth * .3); 
  rotate(-20); 
  ellipse(-.2 * sWidth,  -.1 * sHeight, sWidth * .6, sWidth * .3); 
  pop(); 
 
  //flower
  fill(255, opacity); 
  push();
  translate(0, -1.1 * sHeight -1 * heightChange);
  rotate(sWidth * .2); 
  for(var i = 0; i < 3; i++){
    ellipse(0,  0, sWidth * .3, sWidth * 1.2); 
    rotate(PI / 1.5 ); 
  }
  pop(); 
  fill(0, opacity);
  ellipse(0, -1.1 * sHeight -1 * heightChange, sWidth * .4, sWidth * .4); 
  fill(255); 
  strokeWeight(1); 
}

yuvian-Scope

download design as pdf here

For my praxinoscope design, I chose to keep it simple. In order to create this sketch, I first conducted research on bezier vertices and objects in Java and learned how to implement them in this project. In this praxinoscope, I used two, pulsing hearts - inspired by this heart emoji because it's one of my favorite emojis ¯\_(ツ)_/¯.


void drawArtFrame (int whichFrame) { 

  // Draw the frame number
  fill(0); 
  noStroke(); 
  textAlign(CENTER, CENTER); 
  text (whichFrame, -1, -47);

  // Draw expanding double heart emojis
  int nHearts = 3;
  for (int i=0; i
	

dinkolas-Reading02

A) Slime mold is one of my favorite examples of a natural system that exhibits effective complexity. There was an experiment that put food sources in locations imitating the destinations of the Tokyo railway system, and then allowed the slime mold to grow. It ultimately formed a network that matched the efficiency of the actual Tokyo area railway system. Each cell makes decisions on the highly ordered and simple side of the spectrum, but the emergent system with many cells vastly boosts effective complexity.

(Images from the American Association for the Advancement of Science, GIF by Mark Fricker)

B) Galanter's The Problem of Meaning is the problem that I have struggled with the most in generative art. I would like my art to be relevant beyond just the intrigue of the medium, and I would argue that generative art is wholly capable of achieving meaning in just about every subject matter that non-generative art can. However, in artwork where the system that made it is so significant, it's difficult to make something interesting enough that the viewer sees past medium and into content.

weirdie-Scope

/wp-content/uploads/2018/09/Buggos.png

For the praxinoscope I just wanted to make some little bugs crawling around. There are two bugs coded that start from opposite ends and walk along a sine curve. It was a good learning process in making the legs draw properly and for all of the pieces to move together. Pretty simple, but this partially inspired my final GIF design.

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!
 
stroke(0);
strokeWeight(1.5);
fill(0);
 
//bug one!
var moveY = whichFrame * 17;
var a = 20*cos(whichFrame*0.5 + 50);
 
ellipse(0+a, 80-moveY, 12, 20);
ellipse(0+a, 70-moveY, 5, 5);
 
line(0+a, 80-moveY, 10+a, 70-moveY);
line(0+a, 80-moveY, -10+a, 70-moveY);
 
line(0+a, 75-moveY, 10+a, 90-moveY);
line(0+a, 75-moveY, -10+a, 90-moveY);
 
line(0+a, 75-moveY, 12+a, 80-moveY);
line(0+a, 75-moveY, -12+a, 80-moveY);
 
line(0+a, 70-moveY, 5+a, 65-moveY);
line(0+a, 70-moveY, -5+a, 65-moveY);
 
//bug two!
 
rotate(PI);
var a = -20*cos(whichFrame*0.2 + 50);
 
ellipse(0+a, 60-moveY, 12, 20);
ellipse(0+a, 50-moveY, 5, 5);
 
line(0+a, 60-moveY, 10+a, 50-moveY);
line(0+a, 60-moveY, -10+a, 50-moveY);
 
line(0+a, 55-moveY, 10+a, 70-moveY);
line(0+a, 55-moveY, -10+a, 70-moveY);
 
line(0+a, 55-moveY, 12+a, 60-moveY);
line(0+a, 55-moveY, -12+a, 60-moveY);
 
line(0+a, 50-moveY, 5+a, 45-moveY);
line(0+a, 50-moveY, -5+a, 45-moveY);
 
}

 

weirdie-Reading02

1A. Something I've always been fascinated with that exhibits effective complexity is the appearance of the Fibonacci sequence in nature. Not only do (most) flowers have a number of petals which is a Fibonacci number, but the arrangement of the seeds in the centers of flowers is determined by Fibonacci numbers. For example, the flower below has seeds arranged in spirals. There are 55 spirals going to the right, and 34 spirals going to the left, both numbers in the Fibonacci sequence. This is an example of almost total order - while different flowers have different numbers, flowers of the same type are virtually indistinguishable from one another.

 

 

 

 

 

 

 

1B. I relate to Galanter's idea of the problem of meaning. While I value creating works that are visually or technically interesting and enjoyable to see, there is a big difference for me between that and a piece that holds a lot of meaning. I struggle with whether or not the process or the product is more important to me as well as the viewer, but I think they are equally as valuable in different ways. Intent and concept are important in making art to me, but I'm certainly open to "happy accidents" that are part of the process of making generative art.

shuann-Reading02

Question 1A. Aquaponics is a system that exhibits effective complexity. It is in fact a very simple symbiotic system that mimics a natural waterway where plants can live off of the nutrient rich water that a fish tank produces. In this sense, it is highly ordered since the the stream of energy transfer is strictly from fish food to fish and then to the plant. On the other hand, it is also highly disordered because on a molecular level, the ran formation of energy happens ver organically and it's very hard say how energy is exactly being transported to a new place.

Question 1B. I would like to say a few words on the problem of authorship here. The example that the article refers to in the second last paragraph of this section really brings me back to an other probable that I have been thinking of recently regarding the popular recommendation engine that is now omnipresent on the internet. Similarly in that case, if the engines suggest you things that you might like, how do we make sure that the results are truly derived correctly from your personal preferences? Even if you do end up liking the suggestions, how ca new know it is not a confirmation bias in the sense that "Since the powerful machine that I believed in suggested that I would like these things thus I must have a higher chance of actually liking it". Here, regarding the authorship of the generative art work, we face the same dilemma once the system becomes highly intelligent. I think if we, as the creator of the systems that generate art work, believe that we still posses full control over the system and we know exactly how the magic is done, then we still have full ownership over the work. However, on the other hand, if the work is truly accidental then the ownership becomes more of a problem.