FINAL PROJECT

I was inspired by digital interactive infographics and how they are able to relay important information to educate the audience in a very effective and engaging way. I thought it was important to show the visuals in order to help visual learners better understand and connect the information to the real world. I feel that 2020 was a rough year for many things but the current world has always been harsh to the environment. I had my infographic focused on the environment because I didn’t want people to forget about the horrible things happening to the environment because of the pandemic. I had my birds turn to grayscale to show the decrease in biodiversity due to the accelerating extinction of birds. I intended for the hills to turn to a dimmer color in order to fit the final image where the clouds and sky look gloomy with trees on fire and stone like birds flying across the page. However, I originally intended it to show how satellite images showed that the Amazon Forest is slowly becoming less green and less efficient at processing carbon dioxide due to the pollution. I am pretty happy with how the project turned out and I think I learned a lot during the debugging process and problem solving!

sketch
var trees = [];
var bird = [];
var cloud = [];
var hillVar= 0.009
var r = 188
var g = 219
var b = 245
var tr =14
var tg = 99
var tb = 42
var sky = 0
var newTreeLikelihood = 0.03; 
var newBirdLikelihood= 0.2;
var newCloudLikelihood=0.04;
var textShown = 1
var hillCondition = 0
var clickCondition = 0
var fire = 0
var fx = []
var fy = []
var birdcolor = 0
var birdDiv = ["https://i.imgur.com/L7k89AJ.png",
               "https://i.imgur.com/dnY7u7s.png",
               "https://i.imgur.com/a1m3PWp.png"]

function preload() {
  img = loadImage("https://i.imgur.com/W9zRul7.png");
  brd = loadImage(random(birdDiv));
  brdgray = loadImage("https://i.imgur.com/ile7nc8.png")
  //crackling = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/414767__samarobryn__crackling-fire.wav')
}

function soundSetup(){
    crackling.setVolume(7)
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings


    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        trees[i] = makeTree(rx);
        bird[i] = makeBird(rx);
        for(var f = 0; f< 8; f++){

          fx[f] = trees[i].x-trees[i].breadth*2-350//random(trees[i].x-1,trees[i].x+1);
          fy[f] = -trees[i].nFloors*20//random(trees[i].nFloors*20,-90)
      }
}
frameRate(10);
    }
    

    


function draw() {
    background(r, g, b);
    if (sky == 0) {
    r = 188
    g = 219
    b = 245
  }
  else if (sky==1) {
    r = 177
    g = 194
    b = 199
  } else if (sky == 2) {
    r = 167
    g = 169
    b = 171
  } 



    drawHill() 

    updateAndDisplayCloud();
    removeCloud();
    addNewCloud()


    

    displayHorizon();

    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    updateAndDisplayBird();
    removeBird();
    addNewBird()

    instructionbox()

}

function makeclouds(birthLocationX) {
  var k ={x: birthLocationX,
    y:round(random(10,180)),
    sizer:round(random(25,30)),
    speed:-3,
    move:cloudMove,
    display:cloudDisplay,
    click:cloudClick,
    }
    return k 
  //noStroke()
}

function cloudClick(cx,cy) {
  push()

  let dc = dist(cx,cy,this.x+20,this.y);

  if (dc < 30 ) {
      newCloudLikelihood += 0.1
      this.sizer += 3
      textShown = 4
  }
  pop()
}

function cloudMove() {
  this.x += this.speed;
  this.y += random(-3,3);
}

function cloudDisplay() {
  push();
  noStroke();
  fill(r-20,g-20,b-20);
  ellipse(this.x,this.y,this.sizer,this.sizer)
  ellipse(this.x+10,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+20,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+40,this.y,this.sizer,this.sizer)

  
  pop()
}

function updateAndDisplayCloud(){
  for (var i = 0; i <cloud.length; i++){
    cloud[i].move();
    cloud[i].display()
  }
}
function removeCloud(){
  var cloudToKeep = [];
  for (var i = 0; i <cloud.length; i++){
    if (cloud[i].x+40>0){
      cloudToKeep.push(cloud[i])
    }
  }
  cloud = cloudToKeep
}

function addNewCloud(){
  
  if(random(0,1)<newCloudLikelihood){
    cloud.push(makeclouds(width));
  }
}



function instructionbox() {
  push()
  rectMode(CENTER)
  fill(255)
  strokeWeight(8)
  rect(240,400,440,100)
  noStroke()
  fill(0)
  textSize(19.7)
  if (textShown==1){
      text("Click on objects to see how WE affected them",40,405)
    } else if (textShown==2) {
      textSize(15)
      text("Scientists have recently found that birds are going extinct",40,395)
      text("much quicker than we thought. Help by donating to RSPB!",40,415)
    } else if ( textShown ==3) {
      textSize(16.5)
      text("Wildfire has burned more than 4% of California in 2020",40,395)
      text("Help by donating to California's wildfire relief fund!",40,415)
    } else if (textShown == 4) {
      textSize(15)
      text("China has surpassed pre-COVID air pollution levels soon",40,395)
      text("after business returned to normal.",40,415)
    } else if (textShown == 5) {
      textSize(15)
      text("Satelite image shows that Amazon forest has became less ",40,395)
      text("green over time due to pollution",40,415)
    }
  
  pop()
}

function birdbox() {
  push()
  rectMode(CENTER)
  fill(255)
  strokeWeight(8)
  rect(240,400,440,100)
  noStroke()
  fill(0)
  textSize(20)
  text("Bird are ded",40,405)

  pop()
}

function mouseClicked(){
  sky += 1
  if (sky>2){
    r -= 10
    g -= 10
    b -= 10
  }

  clickCondition = 1 

  for (var i = 0; i <bird.length; i++){
    bird[i].click(mouseX, mouseY)
  }

  for (var i = 0; i <trees.length; i++){
    trees[i].click(mouseX, mouseY)
  }

  for (var i = 0; i <cloud.length; i++){
    cloud[i].click(mouseX, mouseY)
  }




}

function makeBird(birthLocationX) {
  var k ={x: birthLocationX,
    y:round(random(-60,-280)),
    breadth:round(random(40,70)),
    speed:2,
    birdHeight:round(random(9,15)),
    move:birdMove,
    display:birdDisplay,
    click:birdClick,
    color:color(random(50,240),random(50,240),random(50,240))}
    return k 
}

function birdClick(bx, by) {
  let d = dist(bx, by, this.x, height-190+this.y)
  if (d <= this.breadth){
    this.color = color(40)
    textShown = 2
    birdcolor = 1
  }


}

function birdMove() {
  this.x += this.speed
}

function birdDisplay() {
  push();
  fill(this.color)
  translate(this.x, height-190);
  strokeWeight(1);
  stroke(0);
  push()
  if (birdcolor == 1){
    image(brdgray,-0,this.y,this.breadth,this.breadth)
  } else {
    image(brd,-0,this.y,this.breadth,this.breadth)
  }
  pop()
  pop()
}

function updateAndDisplayBird(){
  for (var i = 0; i <bird.length; i++){
    bird[i].move();
    bird[i].display()
  }
}
function removeBird(){
  var birdToKeep = [];
  for (var i = 0; i <bird.length; i++){
    if (bird[i].x+bird[i].breadth>0){
      birdToKeep.push(bird[i])
    }
  }
  bird = birdToKeep
}

function addNewBird(){
  var newBirdLikelihood=0.1;
  if(random(0,1)<newBirdLikelihood){
    bird.push(makeBird(0));
  }
}



function drawHill() {
  push()
  noStroke()
  fill(tr, tg, tb)
  beginShape()
  for (var h = 0; h<width; h++){
    var a = (h*hillVar)+(millis()*0.0002)
    var y = map(noise(a),0,1,height/8,height/9*5);
    vertex(h,y)
    if (mouseY < h & y-1< mouseX =72 && tg <=87 && tb >=77){
    tr = 72
    tg = 87
    tb = 77
  }  


  pop()

  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

function updateAndDisplayTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}


function addNewTreesWithSomeRandomProbability() {
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}



function treeMove() {
    this.x += this.speed;
}
    


function treeDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(74, 21, 22);  
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()

    for (var i = 0; i < this.nFloors; i++) {
      fill(2, 61, 21)
      noStroke()

      triangle(this.breadth/2,0-(i * floorHeight)-60,-20,20-(i * floorHeight)-40,this.breadth+20,20-(i * floorHeight)-40);
    }

    var fireSize = random(10,80)

    if( fire == 1){
      for(var f = 0; f < 8; f++){
        image(img,fx[f],fy[f],fireSize,fireSize)
      }
    }

    strokeWeight(3)
    pop();
}



function makeTree(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 15,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: treeMove,
                click: treeClick,
                display: treeDisplay}
    return bldg;
}

function treeClick(tx,ty) {
  var floorHeight = 20;
  var bHeight = this.nFloors * floorHeight;
  let dtx = dist( tx, height-170, this.x+this.breadth/2, height-170)
  let dty = dist( this.x , ty, this.x, -bHeight/2+height-170 )
  if (dtx<20+this.breadth/2 & dty

Project-11

sketch
var buildings = [];
var people = [];
var hillVar= 0.009

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        buildings[i] = makeBuilding(rx);
        people[i] = makePeople(rx);
    }
    frameRate(10);
}


function draw() {
    background(33, 28, 77);
    drawHill() 


    
    displayStatusString();
    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    updateAndDisplayPeople();
    removePeople();
    addNewPeople()

    drawTrainCart()
}

function makePeople(birthLocationX) {
  var k ={x: birthLocationX,
    breadth:round(random(9,15)),
    speed:-4,
    peopleHeight:round(random(24,30)),
    move:peopleMove,
    display:peopleDisplay,
    color:color(random(50,240),random(50,240),random(50,240))}
    return k 
}

function peopleMove() {
  this.x += this.speed
}

function peopleDisplay() {
  push();
  fill(this.color)
  translate(this.x, height-190);
  strokeWeight(1);
  stroke(0);
  ellipse(-0,this.peopleHeight/2,this.breadth,this.peopleHeight) //body
  fill(160)
  ellipse(0,-this.peopleHeight/2+13,8,8) //head
  pop()
}

function updateAndDisplayPeople(){
  for (var i = 0; i <people.length; i++){
    people[i].move();
    people[i].display()
  }
}
function removePeople(){
  var peopleToKeep = [];
  for (var i = 0; i <people.length; i++){
    if (people[i].x+people[i].breadth>0){
      peopleToKeep.push(people[i])
    }
  }
  people = peopleToKeep
}

function addNewPeople(){
  var newPeopleLikelihood=0.1;
  if(random(0,1)<newPeopleLikelihood){
    people.push(makePeople(width));
  }
}

function drawTrainCart(){
  noStroke()
  var cartwidth = 70
  fill(66, 85, 102)
  rect(0,0,cartwidth,height)
  rect(480-cartwidth,0,cartwidth,height)
  rect(cartwidth,0,width-(cartwidth*2),50)
  fill(161, 104, 80)
  quad(cartwidth,height-120,width-cartwidth,height-120,480,480,0,480)
  

  push()
  //drink
  fill(232, 184, 100)
  quad(320,460-10,315,430-10,365,430-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(210, 184, 100)
  ellipse(340,430-10,50,15)

  //cup
  fill(255,255,255,80);
  quad(320,460-10,310,400-10,370,400-10,360,460-10)
  stroke(174, 203, 230)
  strokeWeight(4)
  line(320,460-10,310,400-10)
  line(370,400-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(191,151,135)
  ellipse(340,400-10,60,17)

  noStroke()
  fill(255, 246, 199,32)
  quad(140,0,340,0,500,480,-20,480)

  pop()


 }

function drawHill() {
  push()
  noStroke()
  fill(6, 31, 12)
  beginShape()
  for (var h = 0; h<width; h++){
    var a = (h*hillVar)+(millis()*0.0002)
    var y = map(noise(a),0,1,height/8,height/9*5);
    vertex(h,y)
  }
  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
        //trees[i].move();
        //trees[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.008; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(12, 12, 51); 
    stroke(185); 
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()
    triangle(0,-bHeight+1,0+(this.breadth/2),-bHeight-10,this.breadth,-bHeight+1)
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
      fill(247, 235, 111)
      strokeWeight(random(0.1,2))
      rect(5, -15 - (i * floorHeight), this.breadth - 10,5);
    }
    strokeWeight(3)
    line(0+(this.breadth/2),-bHeight-10,this.breadth+5,-bHeight+1)
    line(0+(this.breadth/2),-bHeight-10,-5,-bHeight+1)
    pop();
}



function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-170, width, height-170); 
    fill(40, 40, 41)
    rect(0,height-170,width,170)
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Buildings = " + buildings.length;
    text(statusString, 5,20); 
}

I was inspired by the view of Hong Kong where there are many skyscrapers but they are always accompanied by a mountain in the backdrop. All of Hong Kong’s major financial districts are close to tall mountain ranges. This creates a very interesting composition in my opinion. I included the people of varying height and color to suggest how crowded it is in Hong Kong. The image shows a person viewing out of a train that has a table attached to the window drinking a glass of apple juice. The surrounding is dark and I think that helps the image tells a more interesting story.

LO-11

Eva Schindling explores the boundaries of technology, science, design, and art through her large collection of projects. Her projects include sculptures, digital imagings, and software systems. I was particularly interested in her work that involves physics and science that affects our daily lives such as sound, light, and motion. Schindling demonstrates superb data visualization skills in her project, Liquid Sound Collision. The software uses fluid dynamic qualities to visualize and mix sound. The relationship between the amplitude of the music and the velocity of the water creates a visually and auditory stunning piece of work. I found her other project, “Ana + Kata”, very interesting. She explores 4-dimensional relationships and represents them as solid volumes. The resulting solids resemble ghosted volumes that feel like an optical illusion. It feels intuitive at first to understand the shape, but upon careful inspection, some lines don’t match up and create a very interesting illusion. I feel that this piece of work has really captivated me with how I could interpret the work.

http://www.evsc.net/category/home

LO-10

Robert Henke explores boundaries between music and mathematical equations and algorithms. Inspired by radical club music and the complexity of modern-day compositions, Henke sets out on a journey to re-invent music production through computer systems and codes. He has utilized his experience in music production to help create mixing software. In his concert, Lumiere, Henke also utilized light and geometric shapes to help host a new experiential environment for the audience. This idea has lead him to reiterate this concept multiple times. Henke also often works on art installations that are featured in museums such as Tate Modern in London and PS-1 in New York.
https://roberthenke.com/

Project 10 – Sonic Story

sketch
var fish = []
var bigfish 
var smallfish
var fishrod
var bigx = 480
var bigy = 240
var smallx = 0
var smally = 240
var chew
var frameCount
var waves
var lineY = 200
var lineX = 160

function preload() {
    chew = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/412068__inspectorj__chewing-carrot-a.wav');
    waves = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/531453__mitchanary__ocean-designed-loop.wav');

}


function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 104; i++) {
        fish[i] = new Object();
        fish[i].x = random(25, width-25);
        fish[i].y = random(25, height-25);
        fish[i].dx = random(-2, 2);
        fish[i].c = color(random(255), random(255),0);
    }
    frameRate(5)
}

function soundSetup(){
    chew.setVolume(10)
    waves.setVolume(1)
}



function draw() {
    background(74, 142, 237);
    text(frameCount,10,10)

    
    for (var i = 0; i < 104; i++) {
        draw_fish(fish[i]);
        fish[i].x += fish[i].dx;
        if (fish[i].x > width-25 || fish[i].x < 25) {
            fish[i].dx = -fish[i].dx;
        }
    }

    stroke(70)
    strokeWeight(3)
    line(lineX,0,lineX,lineY)
    noFill()
    arc(lineX,lineY-25,50,50,0,PI + QUARTER_PI)


    drawsmallfish()
    drawbigfish()

    if(frameCount == 1){
        waves.play()
    }

    if(frameCount == 5){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 10){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 15){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 20){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 25){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 30){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 35){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 40){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 45){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 55){
        bigx -= 22
        smallx += 40
        lineY -=10
        chew.play()
    }
    if(frameCount >= 55){
        bigx -= 30
        smallx -= 30
        lineY -=10
    }
   
}

function drawbigfish() {
    stroke(0)
    strokeWeight(3)
    fill(237, 164, 74)
    ellipse(bigx, bigy, 60, 40);
    triangle(bigx+30,bigy, bigx+45, bigy-15, bigx+45, bigy+15);
}

function drawsmallfish() {
    stroke(0)
    strokeWeight(3)
    fill(111, 227, 113)
    ellipse(smallx, smally, 30, 20);
    triangle(smallx-15,smally, smallx-20, smally+10, smallx-20, smally-10);

}

function draw_fish(f) {
    strokeWeight(1)
    fill(f.c);
    ellipse(f.x, f.y, 20, 10);
    if (f.dx < 0) {
        triangle(f.x+10, f.y, f.x+15, f.y-5, f.x+15, f.y+5);
    } else {
        triangle(f.x-10, f.y, f.x-15, f.y-5, f.x-15, f.y+5);
    }
}

I tried to tackle this with a graphically relatively simple approach because I wanted to be able to grasp how the code works first. I found using frameCount to keep track of each frame and coordinate individual characters very helpful. Framecount was a great tool for implementing sound at the right time and animation in general.

Project-09-Portrait

sketch
let foto;

function preload() {
  foto = loadImage('https://i.imgur.com/3x32MS3.jpg?1'); //load image
  tak = ["dickson"] //establish text
  print(tak) 
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER); 
  noStroke();
  background(240);
  foto.loadPixels();
}

function draw() {
  let x = floor(random(foto.width)); //randomizing where text pops up
  let y = floor(random(foto.height));
  let pic = foto.get(x, y); 
  fill(pic, 128); //setting color to match the photo
  textSize(mouseX/30) //adjustable text size
  text(tak,x,y)

}

function mousePressed() {
    filter(GRAY) //click to turn photo black and white
}

I thought it would be interesting to literally build myself with my name. This strongly resembles my identity through my name and my face. With each click, color is drawn away from the drawing to slowly resemble me as just a face and less of a person.

LO-9

I found Isabel’s post on Ethmode’s solution to reducing material waste in the fashion industry super innovative. With rendering technology skyrocketing in recent years, it seems relatively intuitive to bring fashion design to the virtual world. This goes to show how applicable rendering technology is to our modern world. There are so many ways rendering can help how we think about design. There are now companies that render sites for construction and architectural designs for clients to experience the place in virtual reality. This is an ideal solution to help clients visit sites without being there due to travel restrictions from COVID. The ways rendering can help us is essentially limitless.

LO-08

Nicole Aptekar is a sculpture that went through different media and found her calling in digital fabrication through laser cutting. With experience in various ways of fabrication, Aptekar challenges the boundaries of shapes and voids relationships to develop interesting forms that tell her artistic intentions. Aptekar uses codes and scripts in a Rhino compatible software called grasshopper to push the limits of the abstraction of the shapes she’s developing. Her coding allowed her to develop her workflow and refine her bodies of work more easily in the long term. Aptekar’s “It’s no longer safe here” took over her body of work and she struggled to top that piece; that lead her to develop new tools to help reinvent her style. I really admire her constant drive to rework her pieces and explore new shape relationships. During the presentation, I really appreciated the use of sound that accompanies her work. I think that brings a new dimension to her art.
http://nicoleaptekar.com/

LO-7-

http://feltron.com/BikeCycle.html
I found Nicholas Felton’s data representation very intriguing. The BikeCycle project gathers cyclists’ data over a year and represents them on screens in MoMa to show patterns of people’s commute and journey. The data is represented through various diagrams and breakdown of information in order to visualize it for easier digestion. The visualization of the bike patterns are lively and constantly changing. I feel that this is a very interesting way to portray Manhattan, a city that never sleeps. The constant buzz of the city is well represented by the ever changing patterns and movement in the visualization of cyclists and bikes.

Project-07-Curves

sketch
var x ;
var y ;

function setup() {
    createCanvas(480, 480);
    strokeWeight(0.7);
    frameRate(5);

}

function draw() {
    background(10, 20, 60);
    translate(89,89);
    for (var j = 1; j <=2 ; j++ ){ //setting up 2x2 grid for circles 
        for (var k = 1; k <=2 ; k++){
            push();
            translate (j*100,k*100); //moving the grid to the center
            drawpattern();
            pop();
        }
    }

}

function drawpattern() {
    var a = map(mouseX, 0, height, 10, 80); //establishing variables that lead the cruves to vary
    var b = map(mouseX, 0, width, 10, 20);
    var h = map(mouseX, 0, width, 0, 100);

    noFill();
    stroke(mouseY, mouseX, 200);
    beginShape(); //drawing geometry
    for (var n=0; n <=800; n++) {
        var Deg = map(n, 0, 100, 0, TWO_PI); 
        x = (a-b)*cos(Deg) + h*cos(((a-b)/b)*Deg);
        y = (a-b)*sin(Deg) - h*sin(((a-b)/b)*Deg);
        vertex(x, y);
    }
    endShape();


}

I wanted to give this piece as much variation in structural form as I could.