Author: carson michaelis

Project 11

For this project I decided to create a series of clouds and planes which would move across the blue sky. With the amount of time spent indoors the past few months, it’s helpful to remember what it’s like to look up.

sketchDownload
var clouds = [];
var xcNoise = [];
var ycNoise = [];
var scNoise = [];
var planes = [];

function setup() {
    createCanvas(480, 480);
//creating initial number of objects
    for (var i = 0; i < 4; i++){
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }

    for (var i = 0; i < 2; i++){
        var rx = random(width);
        planes[i] = makePlanes(rx);
    }

    for (var i = 0; i < 20; i++) {
        xcNoise[i] = random(-40,40);
        ycNoise[i] = random(-40,40);
        scNoise[i] = random(60,70)
    }

    frameRate(10);
}


function draw() {
    background(200,215,255);

    updateAndDisplayPlanes();
    updateAndDisplayClouds();
    offScreenPlanes();
    offScreenClouds();
    newPlanes();
    newClouds();
}

//making sure objects move across the screen
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}
function updateAndDisplayPlanes(){
    for (var i = 0; i < planes.length; i++){
        planes[i].move();
        planes[i].display();
    }
}
//removing objects once they're no longer needed
function offScreenClouds(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}
function offScreenPlanes(){
    var planesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + planes[i].breadth > 0) {
            planesToKeep.push(planes[i]);
        }
    }
    planes = planesToKeep;
}

//different probabilities for adding new objects
function newClouds() {
    var newCloud = 0.0095;
    if (random(0,1) < newCloud) {
        clouds.push(makeClouds(width+100));
    }
}
function newPlanes() {
    var newPlane = 0.007;
    if (random(0,1) < newPlane) {
        planes.push(makePlanes(width+100));
    }
}
//moving the objects across the screen at different speeds
function cloudMove() {
    this.x += this.speed;
}
function planeMove() {
    this.x += this.speed;
}
//creating the actual objects for clouds and planes
function cloudDisplay() {
    fill(255);
    stroke(0);
    push();
    translate(this.x, this.placement);
    stroke(200);
    noStroke();
    fill(255);
    for (let i = 0; i < this.nFloors; i ++) {
        circle(xcNoise[i], ycNoise[i], scNoise[i]);
    }
    pop();
}

function planeDisplay() {
    push();
    stroke(0);
    fill(0);
    translate(this.x, this.placement);
    ellipse(0,0,40,8);
    triangle(2,0,5,-25,-10,0);
    triangle(2,0,5,25,-10,0);
    triangle(15,0,15,8,10,0);
    triangle(15,0,15,-8,10,0);
    pop();
}

//creating the objects for clouds and planes, and their parameters
function makeClouds(birthLocationX) {
    var cld = {x: birthLocationX,
                breadth: 50,
                speed: random(-2,-.8),
                nFloors: round(random(4,10)),
                move: cloudMove,
                display: cloudDisplay,
                placement: random(0,height)}
    return cld;
}
function makePlanes(birthLocationX) {
    var pln = {x: birthLocationX,
                breadth: 20,
                speed: random(-4,-2),
                move: planeMove,
                display: planeDisplay,
                placement: random(0,height)}
    return pln;
}

Looking Outwards 11

For this looking outwards, I took a closer look at a project and architect that I knew of, but not about, Jenny Sabin. She began her career with two arts degrees from the University of Washington, and went back to school a few years later and received a Masters in Architecture from the University of Pennsylvania. She has her own studio based in Philadelphia, and is now also a part of the Department of Architecture at Cornell University. Her work focuses on computational design, as well as digital fabrication. The project below is titled Lumen, and was on display in the summer of 2017 at MoMA PS1. The project is a great example of how digital fabrication can create precise spaces without giving way to corners or flat walls. Lumen is a knitted structure which serves to create private and shaded spaces in the summer heat, while lighting up to create dynamic and exciting spaces at night. The project was successful enough that it became one of a series of similar works from her and her studio.

Website

Looking Outwards – 10

For this week’s Looking Outwards, I decided to dive deeper into the Drum Machine used in Steely Dan’s 1980 album Gaucho. By this time the band was quite popular and had access to the best studio musicians in the country to assist in their recordings, but found that often even they weren’t capable of the specificity that the band desired. In 1978 while recording, they contracted Roger Nichols to create their own high quality digital sampling drum machine, Wendel, for recordings on the album. This happened a whole two years before the release of the groundbreaking Roland TR-808 and 909, and the 1978 recordings set an example of what was to come in the next decade.

Project 10 – Sonic Story

sketchDownload
//Carson Michaelis
//Section B

var frameCount = 0;
var rackTime = 0;
var pinsTime = 0;
var ballTime = 0;
var ballColor = 0;
var knockedTime = 0;
var pinsX = [100, 77, 100, 55, 32, 77, 133, 145, 158, 133];
var pinsY = [40, 30, 18, 18, 6, 6, 30, 18, 6, 6];
var pinsAngles = [];
var rollSound;
var strikeSound;
var backgroundSound;
var cheerSound;

function preload() {
//    NAME OF SOUND = loadSound("web address");
    rollSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonRoll.wav");
    strikeSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonStrike.wav");
    backgroundSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonBackground.wav");
    cheerSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonCheer.wav");


    //image loading
    bowlingLane = loadImage("https://i.imgur.com/58QdPGi.jpg");
}

function setup() {
    createCanvas(200, 400);
    frameRate(20);
    background(220);
    ballColor = color(random(100,200),75,75);
    for (let i = 0; i < 10; i ++) {
        pinsAngles[i] = random(360);
    }

    useSound();
}

function soundSetup() {
    rollSound.setVolume(1);
    strikeSound.setVolume(.5);
    backgroundSound.setVolume(.25);
    cheerSound.setVolume(.25);
}

function draw() {
    background(220);
    bowlingLane.resize(160,400);
    image(bowlingLane,20,0);

    rack(rackTime);
    bowlingPins(pinsTime);
    bowlingBall(ballTime);
    pinsKnocked(knockedTime);

    frameCount++;

    if (frameCount > 50 & frameCount < 175) {rackTime++; pinsTime++;}
    if (frameCount > 225) {rackTime = 0;}
    if (frameCount > 250) {ballTime -= 1;}
    if (frameCount > 330 & frameCount < 350) {knockedTime++; pinsTime = -100;}

    backgroundSound.play();
    if (frameCount > 250 & frameCount < 330) {rollSound.play();}
    if (frameCount > 330 & frameCount < 360) {strikeSound.play();}
    if (frameCount > 360 & frameCount < 500) {cheerSound.play();}
}

function rack(t) {
    push();
      noStroke();
      fill(100);
      rect(15,0+t,170,-10);
      fill(50);
      rect(15,-10+t,5,-100);
      rect(180,-10+t,5,-100);
    pop();
}

function bowlingBall (t) {
    push();
      noStroke();
      fill(ballColor);
      circle(100,height+20+(t*9),30);
    pop();

}

function bowlingPins(t) {
    push();
      fill(255);
      noStroke();
      circle(100,40-64+t,15);
      circle(77,30-64+t,15);
      circle(100,18-64+t,15);
      circle(55,18-64+t,15);
      circle(32,6-64+t,15);
      circle(77,6-64+t,15);
      circle(100+(100-77),30-64+t,15);
      circle(100+(100-100),18-64+t,15);
      circle(100+(100-55),18-64+t,15);
      circle(100+(100-32),6-64+t,15);
      circle(100+(100-77),6-64+t,15);
      strokeWeight(1);
      stroke(255,0,0);
      circle(100,40-64+t,9);
      circle(77,30-64+t,9);
      circle(100,18-64+t,9);
      circle(55,18-64+t,9);
      circle(32,6-64+t,9);
      circle(77,6-64+t,9);
      circle(100+(100-77),30-64+t,9);
      circle(100+(100-100),18-64+t,9);
      circle(100+(100-55),18-64+t,9);
      circle(100+(100-32),6-64+t,9);
      circle(100+(100-77),6-64+t,9);
    pop();
}

function bowlingGutter() {
    push();
    noStroke();
    fill();
    rect(0,0,20,height);
    rect(width-20,0,20,height);
}

function pinsKnocked(t) {
    if (t > 1) {
        for (let i = 0; i < 10; i++) {
            push();
              translate(pinsX[i],pinsY[i]);
              if (frameCount < 350) {
                  rotate(radians(random(360)));
              } else if (frameCount >= 350) {
                  rotate(radians(pinsAngles[i]));
              }
              pinSide();
            pop();

        }
    }
}

function pinSide() {
    push();
      noStroke();
      fill(255);
      ellipse(0,0,5,15);
      circle(0,-7,9);
      strokeWeight(3);
      stroke(255,0,0);
      line(-4,-7,4,-7);
    pop();
}

In my short story I decided to create a sonic scene of a bowling alley, since this week I watched The Big Lebowski to relieve some election stress.

Project 09 – Portrait

I decided to use an image of my friend and sample individual pixels to slowly fill out the screen. I made sure to keep the size of the pixels big enough to keep the image abstract.

sketchDownload
// Carson Michaelis
// Section C
// cmmichae

// variable to hold my image
let myImage;

// loading in my image
function preload () {
    myImage = loadImage("https://i.imgur.com/Rd1FDlT.jpg");
}

function setup() {
    // scaling down the image becuase it was too big
    myImage.resize(myImage.width/4, myImage.height/4);
    myImage.loadPixels();

    // sizing the canvas to work with other images as well
    createCanvas(myImage.width, myImage.height);
    background(220);
}

function draw() {
    // picking a random pixel out from within the image
    var pixelX = floor(random(myImage.width));
    var pixelY = floor(random(myImage.height));

    // retrieving the color of the pixel selected
    var pix = myImage.get(pixelX,pixelY);

    rectMode(CENTER);

    // defining the size and stroke(or lack thereof)
    fill(pix);
    noStroke();

    // drawing pixel big enough to provide some level of abstraction and overlap
    rect(pixelX, pixelY, 10, 10);
}

//picture is of my friend who gave permisson for the photo to be used

Looking Outwards 08

For this looking outward, I watched a talk by Manuel Lima called “Why Circles” from his 2017 talk at the Eyeo Festival. Lima is a designer who operates in the margins between data and art. He has written three books, the most recent of which is his book on circles, and the subject of the lecture. All of his books are studies of network mapping, first of general mapping, then of network trees, and then of circles representing networks. I am very interested in networks and how they operate, and I think that people like Lima who are not only interested in the vast array of network types, but also the history of these networks can create meaningful parallels between current and previous human ideas and connections. In the book, he is able to generalize all circular networks and diagrams into 21 different types, and then abstract the 21 types into 7 categories. This level of abstraction among the variety of diagrams shown is really helpful for understanding how each diagram is meant to be read. When presenting, Lima began by giving a history of the topic, from ancient to present, while describing how these diagrams were categorized in parallel. He then moved on to interesting juxtapositions between many of the examples that he collected in his research. I think that these juxtapositions were very powerful for better understanding the similarities between previous and current ideas of networking, as well as the similarities between visualization of different professions and areas of study. From this, I think I am first more willing to use circles when presenting my ideas in the future, but also much more open to looking towards different fields and areas of study when thinking about how I visually represent my projects and ideas.

mslima.com

Project 07: Curves

For this assignment I began with the equation for the Quadratrix of Hippias, and scaled the equation based on the Y-Coordinate of the mouse. I also identified the limits of the formula and changed their visibility based on the X-Coordinate of the mouse.

sketchDownload
var t = 0;
var points = 200;
var eX = [];
var eY = [];
var a = 0;
var b = 0;
var r = 200;

function setup() {
    createCanvas(480, 480);
    background(0);

    stroke(255);
    strokeWeight(1);
    noFill();

    a = 15;
    b = mouseY;
}

function draw() {
  background(0);

  if (mouseY < 150 || mouseY > 330) {
    a = map(mouseY,0,height,-40,40);
  } else {a = 15}

  for (let i = 0; i < height; i += 1) {
    eY[i] = i;

    eX[i] = eY[i]*((1)/(tan((PI*eY[i])/(2*a))));

    line(eX[i]+240,eY[i]+240,eX[i+1]+240,eY[i+1]+240);
    line(eX[i]+240,-eY[i]+240,eX[i+1]+240,-eY[i+1]+240);

    if (abs((eX[i])-(eX[i+1])) > 400) {
      push();
      strokeWeight(2);
      stroke(map(mouseX,0,width,0,255),0,0);
      line(eX[i]+240,eY[i]+240,eX[i+1]+240,eY[i+1]+240);
      line(eX[i]+240,-eY[i]+240,eX[i+1]+240,-eY[i+1]+240)
      pop();
    }
  }
}

Looking Outwards 07: Information Visualization

Of the examples I looked at, I really enjoyed the 7 sets Venn Diagram, made by Santiago Ortiz’s Moebio Labs. I really like that they use colors instead of numbers or letters, since it makes the intersections between the different sets much simpler to understand. The work was created by looking at a static set of the 7 way Venn Diagram, and using the shapes as a base to create an interactive version. Similar to much of the other work on the Moebio website, they use a lot of color, specifically intersections of color, in order to help with visualization and gradients between zones. I think that it is also great that they didn’t stop at the first success, and went on to add a second side of the diagram which consists of only the gradients of different colors.

Project-06-Abstract Clock

For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.

sketchDownload
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];


function setup() {
    createCanvas(480, 480);
    background(220);

    h = hour();

    for (let i = 0; i <= 29; i++) {
      theta[i] += 2;
      c[i] = ((8.5*i));
      if (i == 0) {
        side[i] = 480
      } else if (i > 0) {
        side[i] = (side[i-1])-((side[i-1])/40);
      }
    }

    for (let i = 0; i < 60; i++) {
      if (i %6 == 0) {
        mx[i] = -5;
      } else {
        mx[i] = mx[i-1]+20;
      }
      if (i < 6) {
        my[i] = -90;
      } else {
        my[i] = my[i-6]+20;
      }
    }
}

function draw() {
  s = floor((second())/2);
  translate(240,240);
  rectMode(CENTER);

  for (let i = 0; i <= s; i++) {
    noStroke();
    rotate(radians(theta[i]));
    fill(c[i]);
    rect(0,0,side[i],side[i]);
  }

  if (h > 12) {
    h = h-12;
  }

  if (h < 7) {
    for (let i = 1; i <= h; i ++) {
      fill(0);
      circle(-80,-122+(i*35),30);
    }
  } else {
    for (let i = 1; i <= 6; i ++) {
      circle(-80,-122+(i*35),30);
    }
    for (let i = 1; i <= h-6; i++) {
      circle(-45,-122+(i*35),30);
    }
  }

  for (let i = 0; i < minute(); i++) {
    circle(mx[i],my[i],17);
  }
}

Project 05 – Wallpaper

I really wanted to try to imitate some feeling of classical old wallpapers. I made sure to include the fleur-de-lis, as well as some of the colors and shapes from an old soccer team’s crest. I also wanted to capture some depth in the wallpaper, so there are some overlapping parts to begin to invoke that feeling.

sketchDownload
var x = 0
var y = 0

function setup() {
    createCanvas(600, 600);
    background(0,56,120);
}

function draw() {
  //because the overlapping is happing on the right hand side and bottom,
  //the loop is set up to overlap on the left hand side and top of the
  //previous groups
translate(600,600)
  for (let i = 0; i <= 7; i += 1) {
    push();
    for (let f = 0; f <= 7; f += 1) {
      groups();
      translate(-160,0);
    }
    pop();
    translate(0,-200);
  }
  noLoop();
}

function groups() {
  //assembling each of the functions in the proper order
  baseshape();
  patterning();
  sideshapes();
  fleur();
}

function baseshape() {
    //Background Diamond
      push();
        strokeWeight(4);
        stroke(253,204,80);
        fill(225,33,40);
          quad(0,-100,80,0,0,100,-80,0);
      pop();
}

function patterning() {
  //this creates the pattern of white specks within each large red diamond
  var g = 0;
    for (let i = 0; i <= 6; i += 1) {
        gunner(-60+g,0);
        g += 20
    }
  g -= 140;
    for (let i = 0; i <= 4; i += 1) {
        gunner(-40+g,-20);
        gunner(-40+g,20);
        g += 20
    }
  g -= 100;
    for (let i = 0; i <= 2; i += 1) {
        gunner(-20+g,-40);
        gunner(-20+g,40);
        gunner(-20+g,-60);
        gunner(-20+g,60);
        g += 20;
    }
  noLoop();
}

function gunner(x,y) {
  //creating the individal white dotted groups
push();
  noStroke();
  fill(255);
    circle(x-4,y,4);
    circle(x+4,y,4);
    circle(x,y-2,4);
    triangle(x,y+1,x+3,y+6,x-3,y+6);
pop();
}

function sideshapes() {
    //Horizontal Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(0,60,30,100,0,140,-30,100);
      pop();
    //Side Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(30,0,80,-70,130,0,80,70);
      pop();
}

function fleur() {
  //the fleur de lis coordinates
      push();
      translate(80,0);
        strokeWeight(1.5);
        stroke(255);
        fill(253,204,80);
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (15,-43);
              curveVertex (22,-25)
              curveVertex (10,5);
              curveVertex (8,25);
              curveVertex (25,60);
              curveVertex (25,60);
              curveVertex (15,60);
              curveVertex (10,50);
              curveVertex (10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (-15,-43);
              curveVertex (-22,-25)
              curveVertex (-10,5);
              curveVertex (-8,25);
              curveVertex (-25,60);
              curveVertex (-25,60);
              curveVertex (-15,60);
              curveVertex (-10,50);
              curveVertex (-10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (40,20);
              curveVertex (40,20);
              curveVertex (35,27);
              curveVertex (32,28);
              curveVertex (28,25);
              curveVertex (23,10);
              curveVertex (30,-8)
              curveVertex (40,-15);
              curveVertex (44,-11);
              curveVertex (50,-18);
              curveVertex (46,-24);
              curveVertex (40,-26);
              curveVertex (30,-22);
              curveVertex (20,-10);
              curveVertex (14,10);
              curveVertex (24,30);
              curveVertex (35,35);
              curveVertex (45,32);
              curveVertex (45,27);
              curveVertex (40,20);
              curveVertex (40,20);
          endShape();
          beginShape();
              curveVertex (-40,20);
              curveVertex (-40,20);
              curveVertex (-35,27);
              curveVertex (-32,28);
              curveVertex (-28,25);
              curveVertex (-23,10);
              curveVertex (-30,-8)
              curveVertex (-40,-15);
              curveVertex (-44,-11);
              curveVertex (-50,-18);
              curveVertex (-46,-24);
              curveVertex (-40,-26);
              curveVertex (-30,-22);
              curveVertex (-20,-10);
              curveVertex (-14,10);
              curveVertex (-24,30);
              curveVertex (-35,35);
              curveVertex (-45,32);
              curveVertex (-45,27);
              curveVertex (-40,20);
              curveVertex (-40,20);
          endShape();
          ellipse(0,15,70,15);
    pop();
}
The crest used, specifically for the colors and white specks in the background
Quick sketch from before I began.