Author: jloosh

art deco ish?

i struggled quite a bit with keeping my variables in check without rotating absolutely everything chaotically. to deal with this, I ended up hard-coding too many numbers…

sketch
// jaden luscher
// jluscher
// section a
// project 05

// this program draws an art deco-influenced wallpaper

// initializing variables
var tileSize = 30;

// random color variables
var stemColor;
var budColor;
var frondColor;

function setup() {
    createCanvas(450, 650);
    background("#7F246B");    // fuschia
    angleMode(DEGREES);
    rectMode(CENTER);
    noLoop();

    stemColor = "#E09D00";  // ochre
    budColor = "#FFD470";   //light yellow
    frondColor = "#033B63";   // dark blue
}

function draw() {
  for(var i = 0; i < 5; i++) {
    drawBand();
    translate(-3.21*tileSize, 3*tileSize);
  }
}


function drawBand() {
  translate(tileSize, 3*tileSize);   // temporary, just to see tile in center
  for(var k = 0; k < height/(3*tileSize); k++) {
    for(var j = 0; j < width/(tileSize); j++) {
      oneTile();
      rotate(180);
      translate (2.15*tileSize, tileSize/10);
      // I cant figure out why the row slants if i dont move it
      // vertically by the arbitrary number tileSize/10 :-(
    }
    translate(-3.21*tileSize, tileSize);
    rotate(180);
  }
  print(height/ (6*tileSize));
}


function oneTile() {
  flowerStem();
  push();
  noStroke();
  // draw 2 fronds
  translate(0,-tileSize/10);  //bottom of fronds align to triangle edge
  rotate(-90);
  frond(tileSize);  // right frond
  rotate(-90);
  frond(tileSize);  //left frond

  fill(budColor);
  ellipse(0, 0, tileSize/3, tileSize*1.5)
  pop();
}


function flowerStem() {
  // rotate(180);
  fill(stemColor);
  stroke(stemColor);
  triangle(0, -tileSize, -tileSize, 0, tileSize, 0);    // triangle base
  arc(0, -1.5*tileSize, tileSize, tileSize, -135, -45, PIE);    // flower base
  strokeWeight(2);
  line(0, -tileSize, 0, -1.5*tileSize); // stem


  // stamen
  push();
  translate(0, -1.5*tileSize);
  rotate(45);   // align stamen lines with base of flower arc
  fill(budColor);
  var numStamen = tileSize/2;
  var angle = 90/numStamen;
  for(var i=0; i <= numStamen; i++) {
    strokeWeight(0.5);
    line (0, 0, 0, -tileSize);
    push();
    noStroke();
    ellipse(0, -tileSize, tileSize/12); // flower buds
    pop();
    rotate(-angle);
  }
  pop();


}

function frond(tileSize) {
  fill(frondColor);
  push();
  var x = 0;
  var y = 0;
  var leafSize = tileSize/7;  // width of leaf. /6 creates woven pattern, /8 is more leaf-like
  var numLeaves = leafSize*2;
  // left half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, -y, x+leafSize, -y);
    rotate(90/numLeaves);
    x += leafSize;
    y += leafSize;
  }
  pop();

  // right half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, y, x+leafSize, y);
    rotate(90/numLeaves);
    x -= leafSize;
    y -= leafSize;
  }
  pop();
}

LO 5: first 3D animation

video shows a 3D animation of a hand and face

The first 3D animation was created in 1972 by Edwin Catmull and Frederic Parke, students(!) at the University of Utah. The film shows the process of creating a mold of a hand, tracing the mold with precise polygons, and translating this data via an analog computer.

I admire the commitment and precision of this tedious process because we now take for granted the power of 3D computation for countless purposes. These techniques may seem dated, but they are the process upon which our sophisticated 3D animation is based now (Edwin Catmull is a co-founder of Pixar…)

This is more of a “Looking Backwards” report, but I feel it essential to learn about the backstory of the tools we depend on and to understand how absolutely mathematical and physics-based it is.

lab 212 – passifolia

video by Lab 212 demonstrating the installation in action

Passifolia is an audiovisual installation by Lab 212, exhibited in Paris in 2020. Visitors enter a dark and hazy room shaped by 16 vertical light beams. When one steps into a light beam, a camera sensor detects the change in pixels, the light beam widens, and directional speakers play a pre-composed melody of bird songs and ambient nature sounds, and the beam narrows again. I appreciate how this invites the visitor to explore the space and relish in the sounds of nature, literally spotlighted. While the sound itself is not computationally generated, the layers of signal processing are numerous (i.e. sending a Midi note to Ableton Live, to the light projector, and to the directional speakers).

visitors exploring the installations’ light beams

getting stringy

sketch
// Jaden Luscher
// jluscher
// section A
// project 4: string art

// increments along lines
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;

// line density
var numLines = 50;

// determines location / quadrant of strings1 function
// when mycount = 0, the top left quadrant is drawn
var mycount = 0;

function setup() {
    createCanvas(400, 600);
    background(200,200,0);
}

function draw() {
  dx1 = (50-100)/numLines;
  dy1 = (150-300)/numLines; // split up L1

  dx2 = (200-200)/numLines;
  dy2 = (250-50)/numLines; // split up M1

  dx3 = (350-300)/numLines;
  dy3 = (150-300)/numLines; // split up R1

  dx4 = (350-50)/numLines; // split up horizontal line
  dy4 = (600-0)/numLines/2;  // split up long vertical (height)

  // brown lines
  push();
  strokeWeight(0.2);
  stroke("brown");
  bgStrings(350, 300, 200, 0);
  bgStrings(350, 300, 400, 0);
  bgStrings(50, 300, 200, 0);
  bgStrings(50, 300, 0, 0);
  pop();

  stroke(255);
  strokeWeight(0.7);
  outline(); // draw base lines (L1, M1, R1, L2, M2, R2)

  push();
  strings1(50, 150, 200, 250);  // call function to connect L1 to M1
  mycount = 1;
  strings1(350, 150, 200, 250);  // connect R1 to M1

  translate(width, height); // flip canvas to mirror strings
  rotate(PI);
  mycount = 0;  // reset to 0
  strings1(50, 150, 200, 250);  // L1 to M1
  mycount = 1;  // string1 uses "else" conditional do draw top right quadrant
  strings1(350, 150, 200, 250);  // R1 to M1
  pop();

  // lines at center of canvas (resemble parallelogram)
  strings2(200, 250, 50, 300);
  strings2(200, 350, 50, 300);

  noLoop();
}

function outline() {
  // top lines
  line(50, 150, 100, 300);  // L1
  line(200, 250, 200, 50);   // M1
  line(350, 150, 300, 300);   // R1

  // bottom lines
  line(50, 450, 100, 300);  // L2
  line(200, 550, 200, 350);  // M2
  line(350, 450, 300, 300);   // R2

  push();
  strokeWeight(2);
  line(width/2, 0, width/2, 250);
  line(width/2, height, width/2, 350);
  pop();

  // other lines
  line(0, height/2, width, height/2);   // horizontal line
}

function bgStrings(a, b, x, y) {
  for (var i = 0; i <= numLines*2; i += 1) {
    line(a, b, x, y);
    y += dy4;
  }
}

function strings1(x1, y1, x2, y2) {
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    if(mycount == 0) {  // top left quadrant
      x1 -= dx1;
      y1 -= dy1;
      x2 -= dx2;
      y2 -= dy2;
    } else {          // top right quadrant
      x1 -= dx3;
      y1 -= dy3;
      x2 -= dx2;
      y2 -= dy2;
    }
  }
}

function strings2(a, b, x, y) {
  for (var i = 0; i <= numLines; i += 1) {
    line(a, b, x, y);
    x += dx4;
  }
}

SnP chair / project

The SnP chair by Daniel Widrig & Material Architecture Lab is an injection-molded recycled plastic sculpture of sorts. Its interlocking parts don’t require any additional fasteners, thus allowing the structural system to be disassembled and reassembled in any number of combinations, from the scale of a stool to an entire pavilion.

the SnP chair: just one configuration of the structural system

I admire the adaptability and wide applicability of this project, as well as the use of recycled material. With so many realized parametric projects, there is a tendency to disregard concerns of material use for the sake of the art.

Additionally, the interlocking “S” and “P”-shaped pieces are beautifully designed, with so many different configurations possible (as illustrated in the teams’ diagrams). The name “SnP” alludes to the s-traps and p-traps used in plumbing, though the project portfolio doesn’t elaborate much on the geometric reasoning of the individual module.

project 03: cube-y

the hardest part for me was sticking with an idea, and resisting the urge to scrap my code constantly. it was also tricky to keep my variables in check without rewriting them with each function… anyway, try moving your mouse around the canvas and clicking!

sketch
// Jaden Luscher
// section A
// project 03

var x = 0;
var y = 0;
var square1 = 0;
var square2 = 0;
var rot1 = 0;
var rot2 = 0;
var col = 200;

function setup() {
    createCanvas(600, 450);
    background(200,200,100);
}

function draw() {
  background(200,200,100);
  rectMode(CENTER);
  noStroke();
  fill(col);
  translate(width/2, height/2); // move origin to center of canvas

  square1 = (mouseX + mouseY) / 2; // move mouse to change square size
  rot1 += 0.01; // makes square 1 spin
  rotate(rot1);
  rect(x, y, square1, square1); // center square (square 1)

  square2 = (mouseX - mouseY); // size of four squares differs from square 1
  if(mouseX > mouseY) {
    rot2 = 2 * rot1; // spins clockwise
  } else {
    rot2 = -2 * rot1; // spins counter clockwise
  }
  rotate(rot2);
  rect(x + square2, y + square2, square2, square2);
  rect(x - square2, y - square2, square2, square2);
  rect(x + square2, y - square2, square2, square2);
  rect(x - square2, y + square2, square2, square2); // four squares at corners

  if (mouseIsPressed) { // squares "jitter" & turn white
    rot1 *= -1;
    col = 255;
  } else {
    col = 0;
  }

  print("square2 = ", square2);

}

project 02 – click it!

sketch
//Jaden Luscher
//jluscher@andrew.cmu.edu
//Section A

var eyeSize = 40;
var r;
var g;
var b;

function setup() {
    createCanvas(200,200);
    background(205);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background(157, 102, 31); //brown "hair" is the background
  noStroke();

  //generates random color values for flashing background)
  r = random(200);
  g = random(100,200);
  b = random(100);

  if (mouseIsPressed){  //surprised face
    background(r,g,b);  //flashing background

    fill(255, 120, 100);  //blushing skin color
    ellipse(random(118,122),random(98,102),120,150); //jittering face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize);  //wide eyes
    fill(120, 50, 50);
    ellipse(random(99,101),random(89,91),eyeSize/4);  //small iris

    fill(255);
    rect(random(120,122),140,6,8);
    rect(random(128,130),140,6,8);
    rect(random(136,138),140,6,8);
    rect(random(144,146),140,6,8);
    rect(random(152,154),140,6,8);  //jittering teeth

    noFill();
    stroke(115, 74, 21);
    strokeWeight(2);
    arc(100,90,eyeSize*1.5,eyeSize*2,4,5,OPEN);   //raised eyebrow
    stroke(0);
    line(120,140,160,140); //flat mouth


  } else {  //resting face
    fill(40, 110, 154);
    quad(120,0,186.666,200,200,200,200,0); //blue: 2nd background color

    fill(236, 196, 163);
    ellipse(120,100,120,150); //still face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize/2);  //resting eyes
    fill(120, 50, 50);
    ellipse(constrain(mouseX,95,105),constrain(mouseY,85,95),eyeSize/2.5);
    //iris follows mouse

    fill(213, 152, 133);
    triangle(160,150,145,145,120,150);  //top lip
    triangle(160,151,145,156,120,151);  //bottom lip

    noFill();
    strokeWeight(5);
    stroke(115, 74, 21);
    ellipse(100, constrain(mouseY,90,100),eyeSize*1.75);  //large glasses lens
    ellipse(175, constrain(mouseY,75,85),eyeSize);  //small glasses lens
    strokeWeight(2);
    arc(100,90,60,40,3.7,5.8,OPEN);   //eyebrow
  }
  //the earring and nose do not change
  noStroke();
  fill(213, 152, 133);
  ellipse(55,177,10);
  ellipse(55,190,10);
  fill(40, 110, 154);
  triangle(50,170,55,120,60,170);   //earring

  strokeWeight(2);
  stroke(0);
  noFill();
  line(120,0,160,120);
  line(160,120,145,125);  //lines for nose
}

Looking Alp-wards

Leander Herzog’s “Alp” (2021) is a browser-based program that presents an “alpine” landscape of (presumably) randomly generated shapes. It layers 6-7 coordinated colors in a random yet recognizable landscape form, which is simple yet beautiful to me. The colors are especially eye-catching, and I wonder if they are determined by the same code used by color swatch-generating sites like Coolors and Adobe Color.

my favorite variation of Herzog’s “Alp”

Both the colors and the shapes of the “rocks” seem to be generated concurrently and randomly. Perhaps the shapes are polygons with constrained coordinates that change whenever the function repeats itself. The ellipse in the top left “sky” area doesn’t change in placement or diameter, but its color changes to fit the palette.

Herzog’s other work generally seems to share the “less is more” ideology. Many of his other algorithms use only 2 colors and simple geometry that reacts to mouse clicks and movement. The graphics are so mesmerizing, I could play around with them for hours, and I think you all should too!

project 01

here is my face(ish)

sketch
//Jaden Luscher
//Section A

function setup() {
    createCanvas(200,200);
    background(205);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background(157, 102, 31)
  noStroke()

//blue: 2nd background color
  fill(40, 110, 154)
  quad(120,0,186.666,200,200,200,200,0);

//face
  fill(236, 196, 163)
  ellipse(120,100,120,150);

//eye
  fill(255)
  ellipse(100,90,40,20);
  fill(120, 50, 50)
  ellipse(100,90,20);

//lips
  fill(213, 152, 133)
  triangle(160,150,145,145,120,150)
  triangle(160,151,145,156,120,151);

//earring
  ellipse(55,177,10)
  ellipse(55,190,10)
  fill(40, 110, 154)
  triangle(50,170,55,120,60,170);

//black lines
  strokeWeight(2)
  stroke(0)
  noFill()
  line(120,0,160,120)
  line(160,120,145,125)
  arc(100,90,60,40,3.7,5.8,OPEN);

//glasses
  strokeWeight(5)
  stroke(115, 74, 21)
  ellipse(100,90,70)
  ellipse(175,80,40);

}

LO: Audio-reactive 3D visuals

Jaden Luscher
Section A

Struggling Asteroids / Stars Map
by Sabina Studio / Art and Technology

video demo of Sabina Studio’s audio-reactive Max patch

Struggling Asteroids is an audio-reactive video created by Sabina Studio
/ Art and Technology. She created the script “Stars Map” in Max Msp Jitter.

I love this project because it brings music to life in the form of a beautiful
morphing fabric-like form. This takes not only computational skill but also
a clear artistic vision. The resulting graphics are pulsing and complex, yet
imply a three-dimensional structure by the way the lines appear to stack.

By modifying some parameters in her script, the artist has created both
far-away and close-up views of these 3D modules. Close up, they look like sticks
and nodes (or like the toothpick and marshmallow models that kids make).
From far away, they resemble something like a topographic model or mapping of constellations.

link to patch and demos