Month: September 2019

Jacky Tian’s Project 03

sketch

//Jacky Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment-03-A

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

In this project, I explored the movement of a series of paired lines and as the mouse move across the screen, these vertex of the two paired lines move from the top of the screen to the bottom of the screen. The color of the components change from cold to warm as the mouth move from left to right as well. Moreover, there is a spinning square at the position of the mouse and the speed of the spinning varies as the mouse moves.

Cathy Dong-Looking Outwards-03

BUGA Fibre Pavilion 2019 | University of Stuttgart ICD | Project Photo
Concept and Fabrication Process Documentation

The BUGA Fibre Pavilion is designed by the Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE) at University of Stuttgart. The pavilion design uses the most cutting-edge technologies. They use fibre composites and robotic technologies to build the load-bearing structure. Therefore, the project is extraordinary lightweight.

The pavilion mimics natural and biological structure. It is eventually made with 150,000 meters of spatially arranged glass- and carbon-fibers and the structure spans freely for more than 75 feet. With computational design and robots, fibrous filaments are freely placed between rotating winding scaffolds. Use of pioneered technologies broaden the possibility for form making.

Computational Design
Fabrication
Project Installation

Aaron Lee-LookingOutwards-03

BUGA Fibre pavilion by  University of Stuttgart’s Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE)

The BUGA Fibre Pavilion is a combined work of biomimicry research and computational design through the means of digital fabrication. The pavilion’s 60 woven structural are consisted of using synthetic glass and carbon fibers by robot arms. The resulting cylindrical modules got their inspiration from insect wings and exoskeletons. Both the innovative material and the genuine shape create structural rigidity and integrity that is much stronger than traditional means of steel construction while being much lighter for mobility after disassembly I am especially impressed by the appearance of the project which really features sci-fi aesthetic, we always imagine either in movie or show. Also, the fact that it leaves zero carbon foot print is inspirational.

Researchers and robots team up to build innovative pavilion in a German garden

Shariq M. Shah – Looking Outwards 03


Neri Oxmann and MIT, in this project, explore the intersection of biomimetics, digital fabrication, and material properties. Bio-composites, cellulose, chitosan, and pectin, which are among some of the most abundant organic materials, are digitally fabricated to dynamically respond to changes in heat and humidity. There is an interesting relationship between digital and computational processes and highly organic matter that both intersect to develop something that is neither clearly computational nor organic. However, it is clear that the use of such techniques allows for an architecture that is deeply engaged with natural conditions. Although the process that  creates the artifact is highly calibrated and computational, the result is something that, as a system, behaves and performs like an organic structure. A challenge of this process seems to be quantifying and measuring that which is highly nuanced: natural materials. Many systems in nature are highly complex, and the implementation of digital fabrication techniques into such nuanced systems could prove to be difficult.

https://www.archdaily.com/894979/neri-oxman-and-mit-develop-programmable-biocomposites-for-digital-fabrication

Jacky Tian’s Looking Outwards – 03

Computational Design + Architecture

— The Moving Curtain

BUND FINANCIAL CENTER BY FOSTER + PARTNERS

I grew up in Shanghai, China, a city with plenty of modern architecture and technology. Computational design never lacks in a city like Shanghai. A new mixed-use complex called the Bund Finance Center has just finished its last construction phase. Designed by Norman Foster’s Architecture Firm and collabrated with Thomas Heatherwick’s design studio, The Bund Finance Center becomes a new landmark of The Bund in Shanghai.

Besides the functional spaces for banking services, the building also includes a traditional chinese theatre and combined with the most advanced curtain wall technology controlled by computer calculated programs. The facade of this three-story-height building is composed of curtain like wall of bronze tubes. These bamboo shaped bronze tubes are constructed in three layers, creating semi-transparent screen for the building. The architect in charge described the facade as a “moving veil”, which can adapt and transform based on the current use of the space. 

As a fourth year student in architecture, I was inspired by the connection between architecture and computational fabricated technology. I personally utilized digital fabrication tools like laser cutting machine a lot for my projects. With the help from these tools, a lot of complicated and organic form can be achieved in a much easier manner.

Shariq M. Shah – Dynamic Drawing – Project 03

shariqs_project-03

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// {Project - 03



var posC = 0;
var angle = 0;
var t = 'polar'

var midX = 320
var midY = 240



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

}

function draw() {

//Rotating ellipses creating void in the center

    push();
    translate(320, 240);
    rotate(radians(angle));
    noFill()
    stroke(250, mouseX, mouseY)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle + mouseY * 0.1
    posC = posC + 0.5


//Text that changes color acccording to rest of the graphic

  textSize(10);
  rectMode(CENTER)
  text('polar', midX - 10, midY);
  fill(250, mouseX, mouseY);


//If mouse is moved to center, lines become black creating vortex

  if ((mouseX > midX - 20 & mouseX < midX + 20) && (mouseY > midY - 20 & mouseY < midY + 20)) {

    push();
    translate(midX, midY);
    rotate(radians(angle));
    noFill()
    stroke(0)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle - mouseY * 0.5
    posC = posC + 0.5
  }


}

In this project, I explored geometries and mathematical aggregation of an ellipse to create highly articulated and complex patterns. Using a limited amount of code, the program is able to use the user’s input to create a variety of vibrant mandala like patterns. The geometry is calibrated to leave a perfect circle in the center of the canvas, where the text changes color according to the the lines that are being drawn.

Aaron Lee- Project-03- Dynamic Drawing

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

//variables

   var x = 0;
   var y = 100;

function setup() {
createCanvas(480, 640);
}


function draw() {
 
   background(0);
   stroke(0);
   fill(255, 204, 0);
   
   if (mouseY < (height / 2)) {
         fill(0);  
      }
   rect(10, 10, 30, 30);
   textSize(30);
   text('touch!', 40, 40);//if mouse is located on bottom portion of canvas, the text lights 

    fill(0);
   if (mouseY < (height / 2)) {
         fill(255, 204, 0);
      }
   rect(440, 600, 30, 30);
   textSize(30);
   text('touch!', 350, 630);//if mouse is located on top portion of canvas, the text lights

   push();

   translate(mouseX, mouseY);
   scale(mouseX/100, mouseY/100); 
   noFill();
   stroke(255);
   rotate(radians(x));
   rect(-50, -50, y, y);//scale of the rectangle changes following the movement of mouse

   x = x + mouseX/25;

   pop(); 

   stroke(255);

   //lines from top
   line(0, 0, mouseX, mouseY);
   line(40, 0, mouseX, mouseY);
   line(80, 0, mouseX, mouseY);
   line(120, 0, mouseX, mouseY);
   line(160, 0, mouseX, mouseY);
   line(200, 0, mouseX, mouseY);
   line(240, 0, mouseX, mouseY);
   line(280, 0, mouseX, mouseY);
   line(320, 0, mouseX, mouseY);
   line(360, 0, mouseX, mouseY);
   line(400, 0, mouseX, mouseY);
   line(440, 0, mouseX, mouseY);
   line(480, 0, mouseX, mouseY);
     //lines from right
   line(width, 40, mouseX, mouseY);
   line(width, 80, mouseX, mouseY);
   line(width, 120, mouseX, mouseY);
   line(width, 160, mouseX, mouseY);
   line(width, 200, mouseX, mouseY);
   line(width, 240, mouseX, mouseY);
   line(width, 280, mouseX, mouseY);
   line(width, 320, mouseX, mouseY);
   line(width, 360, mouseX, mouseY);
   line(width, 400, mouseX, mouseY);
   line(width, 440, mouseX, mouseY);
   line(width, 480, mouseX, mouseY);
   line(width, 520, mouseX, mouseY);
   line(width, 560, mouseX, mouseY);
   line(width, 600, mouseX, mouseY);
   line(width, 640, mouseX, mouseY);
        //lines from left
   line(0, 40, mouseX, mouseY);
   line(0, 80, mouseX, mouseY);
   line(0, 120, mouseX, mouseY);
   line(0, 160, mouseX, mouseY);
   line(0, 200, mouseX, mouseY);
   line(0, 240, mouseX, mouseY);
   line(0, 280, mouseX, mouseY);
   line(0, 320, mouseX, mouseY);
   line(0, 360, mouseX, mouseY);
   line(0, 400, mouseX, mouseY);
   line(0, 440, mouseX, mouseY);
   line(0, 480, mouseX, mouseY);
   line(0, 520, mouseX, mouseY);
   line(0, 560, mouseX, mouseY);
   line(0, 600, mouseX, mouseY);
   line(0, 640, mouseX, mouseY);
      //lines from bottom
   line(0, height, mouseX, mouseY);
   line(40, height, mouseX, mouseY);
   line(80, height, mouseX, mouseY);
   line(120, height, mouseX, mouseY);
   line(160, height, mouseX, mouseY);
   line(200, height, mouseX, mouseY);
   line(240, height, mouseX, mouseY);
   line(280, height, mouseX, mouseY);
   line(320, height, mouseX, mouseY);
   line(360, height, mouseX, mouseY);
   line(400, height, mouseX, mouseY);
   line(440, height, mouseX, mouseY);
   line(480, height, mouseX, mouseY);
}

I tried to make more user interactive animation with textual instruction.

Crystal Xue-LookingOutwards-03

LACE by Jenny Wu is an individual brand that focuses on 3D printing jewelry design. Jenny Wu and her husband are architects who are still practicing in the field. With an architectural background, all different kinds of digital fabrication technologies are learned and experimented pretty throughly. With more than 15 years of 3D printing experiences, designer and architect Jenny Wu had incorporated architectural elements into jewelry design and created her collection of 3D printing wearable line – LACE.

“Stria” – fully 3D printed from a strong yet flexible nylon-based polymer

I am really impressed by how delicate these pieces are done. All the jewelry pieces are modeled parametrically. Applying that concept into a new design field is already an innovative move. Taking a step further, 3D printing technology gave her the opportunity to turn the intricate and creative interdisciplinary artwork into practice.

Crystal-Xue-Project-03

sketch-194.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-03

var lengthInner = 130; //distance of p5js logo center to the outter edge
var edgeFlat = 50; //length of the outter edge of the p5js logo
var p5jsR = 237;
var p5jsG = 34;
var p5jsB = 93;
var backgroundR = 0;
var backgroundG = 0;
var backgroundB = 0;
var spin = 0;
var unit = 80;


function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {
	background(backgroundR, backgroundG, backgroundB);
    backgroundR = 255 - mouseY / 4 - 50;
    backgroundG = 170;
    backgroundB = 200;

    //dynamic circle background
    radius1 = dist(mouseX, mouseY, 0, 0); 
    radius2 = dist(mouseX, mouseY, 0, unit);
    radius3 = dist(mouseX, mouseY, 0, unit * 2);
    radius4 = dist(mouseX, mouseY, 0, unit * 3);
    radius5 = dist(mouseX, mouseY, 0, unit * 4);
    radius6 = dist(mouseX, mouseY, 0, unit * 5);
    radius7 = dist(mouseX, mouseY, 0, unit * 6);
    radius8 = dist(mouseX, mouseY, 0, unit * 7);
    radius9 = dist(mouseX, mouseY, 0, unit * 8);
    radius10 = dist(mouseX, mouseY, unit , 0);
    radius11 = dist(mouseX, mouseY, unit , unit);
    radius12 = dist(mouseX, mouseY, unit, unit * 2);
    radius13 = dist(mouseX, mouseY, unit, unit * 3);
    radius14 = dist(mouseX, mouseY, unit, unit * 4);
    radius15 = dist(mouseX, mouseY, unit, unit * 5);
    radius16 = dist(mouseX, mouseY, unit, unit * 6);
    radius17 = dist(mouseX, mouseY, unit, unit * 7);
    radius18 = dist(mouseX, mouseY, unit, unit * 8);
    radius19 = dist(mouseX, mouseY, unit * 2, 0);
    radius20 = dist(mouseX, mouseY, unit * 2, unit);
    radius21 = dist(mouseX, mouseY, unit * 2, unit * 2);
    radius22 = dist(mouseX, mouseY, unit * 2, unit * 3);
    radius23 = dist(mouseX, mouseY, unit * 2, unit * 4);
    radius24 = dist(mouseX, mouseY, unit * 2, unit * 5);
    radius25 = dist(mouseX, mouseY, unit * 2, unit * 6);
    radius26 = dist(mouseX, mouseY, unit * 2, unit * 7);
    radius27 = dist(mouseX, mouseY, unit * 2, unit * 8);
    radius28 = dist(mouseX, mouseY, unit * 3, 0);
    radius29 = dist(mouseX, mouseY, unit * 3, unit);
    radius30 = dist(mouseX, mouseY, unit * 3, unit * 2);
    radius31 = dist(mouseX, mouseY, unit * 3, unit * 3);
    radius32 = dist(mouseX, mouseY, unit * 3, unit * 4);
    radius33 = dist(mouseX, mouseY, unit * 3, unit * 5);
    radius34 = dist(mouseX, mouseY, unit * 3, unit * 6);
    radius35 = dist(mouseX, mouseY, unit * 3, unit * 7);
    radius36 = dist(mouseX, mouseY, unit * 3, unit * 8);
    radius37 = dist(mouseX, mouseY, unit * 4, 0);
    radius38 = dist(mouseX, mouseY, unit * 4, unit);
    radius39 = dist(mouseX, mouseY, unit * 4, unit * 2);
    radius40 = dist(mouseX, mouseY, unit * 4, unit * 3);
    radius41 = dist(mouseX, mouseY, unit * 4, unit * 4);
    radius42 = dist(mouseX, mouseY, unit * 4, unit * 5);
    radius43 = dist(mouseX, mouseY, unit * 4, unit * 6);
    radius44 = dist(mouseX, mouseY, unit * 4, unit * 7);
    radius45 = dist(mouseX, mouseY, unit * 4, unit * 8);
    radius46 = dist(mouseX, mouseY, unit * 5, 0);
    radius47 = dist(mouseX, mouseY, unit * 5, unit);
    radius48 = dist(mouseX, mouseY, unit * 5, unit * 2);
    radius49 = dist(mouseX, mouseY, unit * 5, unit * 3);
    radius50 = dist(mouseX, mouseY, unit * 5, unit * 4);
    radius51 = dist(mouseX, mouseY, unit * 5, unit * 5);
    radius52 = dist(mouseX, mouseY, unit * 5, unit * 6);
    radius53 = dist(mouseX, mouseY, unit * 5, unit * 7);
    radius54 = dist(mouseX, mouseY, unit * 5, unit * 8);
    radius55 = dist(mouseX, mouseY, unit * 6, 0);
    radius56 = dist(mouseX, mouseY, unit * 6, unit);
    radius57 = dist(mouseX, mouseY, unit * 6, unit * 2);
    radius58 = dist(mouseX, mouseY, unit * 6, unit * 3);
    radius59 = dist(mouseX, mouseY, unit * 6, unit * 4);
    radius60 = dist(mouseX, mouseY, unit * 6, unit * 5);
    radius61 = dist(mouseX, mouseY, unit * 6, unit * 6);
    radius62 = dist(mouseX, mouseY, unit * 6, unit * 7);
    radius63 = dist(mouseX, mouseY, unit * 6, unit * 8);

    fill(255);
    ellipse(0, 0, pow(radius1, 3/4), pow(radius1, 3/4));
    ellipse(0, unit, pow(radius2, 3/4), pow(radius2, 3/4));
    ellipse(0, unit * 2, pow(radius3, 3/4), pow(radius3, 3/4));
    ellipse(0, unit * 3, pow(radius4, 3/4), pow(radius4, 3/4));
    ellipse(0, unit * 4, pow(radius5, 3/4), pow(radius5, 3/4));
    ellipse(0, unit * 5, pow(radius6, 3/4), pow(radius6, 3/4));
    ellipse(0, unit * 6, pow(radius7, 3/4), pow(radius7, 3/4));
    ellipse(0, unit * 7, pow(radius8, 3/4), pow(radius8, 3/4));
    ellipse(0, unit * 8, pow(radius9, 3/4), pow(radius9, 3/4));
    ellipse(unit, 0, pow(radius10, 3/4), pow(radius10, 3/4));
    ellipse(unit, unit, pow(radius11, 3/4), pow(radius11, 3/4));
    ellipse(unit, unit * 2, pow(radius12, 3/4), pow(radius12, 3/4));
    ellipse(unit, unit * 3, pow(radius13, 3/4), pow(radius13, 3/4));
    ellipse(unit, unit * 4, pow(radius14, 3/4), pow(radius14, 3/4));
    ellipse(unit, unit * 5, pow(radius15, 3/4), pow(radius15, 3/4));
    ellipse(unit, unit * 6, pow(radius16, 3/4), pow(radius16, 3/4));
    ellipse(unit, unit * 7, pow(radius17, 3/4), pow(radius17, 3/4));
    ellipse(unit, unit * 8, pow(radius18, 3/4), pow(radius18, 3/4));
    ellipse(unit * 2, 0, pow(radius19, 3/4), pow(radius19, 3/4));
    ellipse(unit * 2, unit, pow(radius20, 3/4), pow(radius20, 3/4));
    ellipse(unit * 2, unit * 2, pow(radius21, 3/4), pow(radius21, 3/4));
    ellipse(unit * 2, unit * 3, pow(radius22, 3/4), pow(radius22, 3/4));
    ellipse(unit * 2, unit * 4, pow(radius23, 3/4), pow(radius23, 3/4));
    ellipse(unit * 2, unit * 5, pow(radius24, 3/4), pow(radius24, 3/4));
    ellipse(unit * 2, unit * 6, pow(radius25, 3/4), pow(radius25, 3/4));
    ellipse(unit * 2, unit * 7, pow(radius26, 3/4), pow(radius26, 3/4));
    ellipse(unit * 2, unit * 8, pow(radius27, 3/4), pow(radius27, 3/4));
    ellipse(unit * 3, 0, pow(radius28, 3/4), pow(radius28, 3/4));
    ellipse(unit * 3, unit, pow(radius29, 3/4), pow(radius29, 3/4));
    ellipse(unit * 3, unit * 2, pow(radius30, 3/4), pow(radius30, 3/4));
    ellipse(unit * 3, unit * 3, pow(radius31, 3/4), pow(radius31, 3/4));
    ellipse(unit * 3, unit * 4, pow(radius32, 3/4), pow(radius32, 3/4));
    ellipse(unit * 3, unit * 5, pow(radius33, 3/4), pow(radius33, 3/4));
    ellipse(unit * 3, unit * 6, pow(radius34, 3/4), pow(radius34, 3/4));
    ellipse(unit * 3, unit * 7, pow(radius35, 3/4), pow(radius35, 3/4));
    ellipse(unit * 3, unit * 8, pow(radius36, 3/4), pow(radius36, 3/4));
    ellipse(unit * 4, 0, pow(radius37, 3/4), pow(radius37, 3/4));
    ellipse(unit * 4, unit, pow(radius38, 3/4), pow(radius38, 3/4));
    ellipse(unit * 4, unit * 2, pow(radius39, 3/4), pow(radius39, 3/4));
    ellipse(unit * 4, unit * 3, pow(radius40, 3/4), pow(radius40, 3/4));
    ellipse(unit * 4, unit * 4, pow(radius41, 3/4), pow(radius41, 3/4));
    ellipse(unit * 4, unit * 5, pow(radius42, 3/4), pow(radius42, 3/4));
    ellipse(unit * 4, unit * 6, pow(radius43, 3/4), pow(radius43, 3/4));
    ellipse(unit * 4, unit * 7, pow(radius44, 3/4), pow(radius44, 3/4));
    ellipse(unit * 4, unit * 8, pow(radius45, 3/4), pow(radius45, 3/4));
    ellipse(unit * 5, 0, pow(radius46, 3/4), pow(radius46, 3/4));
    ellipse(unit * 5, unit, pow(radius47, 3/4), pow(radius47, 3/4));
    ellipse(unit * 5, unit * 2, pow(radius48, 3/4), pow(radius48, 3/4));
    ellipse(unit * 5, unit * 3, pow(radius49, 3/4), pow(radius49, 3/4));
    ellipse(unit * 5, unit * 4, pow(radius50, 3/4), pow(radius50, 3/4));
    ellipse(unit * 5, unit * 5, pow(radius51, 3/4), pow(radius51, 3/4));
    ellipse(unit * 5, unit * 6, pow(radius52, 3/4), pow(radius52, 3/4));
    ellipse(unit * 5, unit * 7, pow(radius53, 3/4), pow(radius53, 3/4));
    ellipse(unit * 5, unit * 8, pow(radius54, 3/4), pow(radius54, 3/4));
    ellipse(unit * 6, 0, pow(radius55, 3/4), pow(radius55, 3/4));
    ellipse(unit * 6, unit, pow(radius56, 3/4), pow(radius56, 3/4));
    ellipse(unit * 6, unit * 2, pow(radius57, 3/4), pow(radius57, 3/4));
    ellipse(unit * 6, unit * 3, pow(radius58, 3/4), pow(radius58, 3/4));
    ellipse(unit * 6, unit * 4, pow(radius59, 3/4), pow(radius59, 3/4));
    ellipse(unit * 6, unit * 5, pow(radius60, 3/4), pow(radius60, 3/4));
    ellipse(unit * 6, unit * 6, pow(radius61, 3/4), pow(radius61, 3/4));
    ellipse(unit * 6, unit * 7, pow(radius62, 3/4), pow(radius62, 3/4));
    ellipse(unit * 6, unit * 8, pow(radius63, 3/4), pow(radius63, 3/4));


    //p5js logo

    //color changes
    p5jsR = 220;
    p5jsG = mouseY / 4 + 10; 
    p5jsB = mouseY / 4 + 40;
    
    translate(mouseX, mouseY);

    //size of the logo changes
    lengthInner = dist(mouseX, mouseY, width / 2, height / 2);
    edgeFlat = dist(mouseX, mouseY, width / 2, height / 2) / 2;

    //logo spins
    spin = pow(mouseY, 1.05);

    //drawing the logo
    //top part
    noStroke();
    rotate(spin);
    fill(p5jsR, p5jsG, p5jsB);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //upper right part
    rotate(72);
    noStroke();
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower right part
     rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);
    
    //upper left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

 }

I created this dynamic drawing inspired by the geometry of p5js logo. Not only the geometry is responsive to the position of the mouse, but the circle background. I also tried to create a color contrast between the main logo and the background.

Nadia Susanto – Project 03 – Dynamic Drawing

sketch

/* Nadia Susanto
   Section B
   nsusanto@andrew.cmu.edu
   Project-03-Dynamic Drawing */

var angle = 0;

function setup() {
    createCanvas(640, 480);

}

function draw() {
    background("black");

    //background color changes dependent on mouseX
    if (mouseX > width/2) {
      background(0, 0, 88);
    }

    noStroke();
    //sun
    fill(255, 216, 0);
    ellipse(320, 240, 150, 150);
    //mercury (in solar system is fastest to orbit sun)
    fill(223, 126, 83);
    push();
    translate(320, 240);
    rotate(radians(angle*2.5));
    ellipse(50, 50, 50, 50);
    pop();
    //venus (in solar system is 2nd fastest to orbit sun)
    //rotates counter-clockwise
    fill(222, 184, 135);
    push();
    translate(320, 240);
    rotate(radians(-angle*1.5));
    ellipse(75, 100, 75, 75);
    pop();
    //earth (in solar system is 3rd fastest to orbit sun)
    fill(57, 118, 40); //green circle
    push();
    translate(320, 240);
    rotate(radians(angle));
    ellipse(150, 100, 100, 100);
    pop();
    //mars (in solar system is 4th fastest to orbit sun)
    fill(165, 42, 42);
    push();
    translate(320, 240);
    rotate(radians(angle*0.5));
    ellipse(200, 100, 85, 85);
    pop();
    angle = angle + 1

    //new planet size dependent on mouseX and mouseY
    // supposed to resemble neptune, uranus, or pluto (very slow to orbit)
    if (mouseX > 395 || mouseY > 315) {
    fill(30, 144, 255);
    push();
    translate(320, 240);
    rotate(radians(angle/4));
    circle(width-mouseX, height-mouseY, height - mouseY, 150);
    }

    //comet can move in regards to mouse movement
    if (mouseX < 250 & mouseY < 300) {
      fill(255, 100, 0);
      triangle(mouseX, mouseY, mouseX, mouseY*2, mouseX*4, mouseY*4);
      fill(119,136,153);
      ellipse(mouseX*4, mouseY*4, mouseX, mouseY);
    }

    //blackhole spins when pressed
    if (mouseIsPressed) {
      fill("black");
      push();
      translate(320, 240);
      rotate(-angle);
      ellipseMode(CENTER);
      ellipse(150, 100, 640, 480);
      pop();
      angle = angle + 5
    }

}

I was inspired by the solar system, so I tried having multiple planets shown with its orbit around the sun and made each speed correspond to how fast or slow they actually orbit the sun in real life. There is a comet shown with certain mouse directions and I tried to make it move with the mouse. If clicked on, I also incorporated a spinning black hole to “terrorize” the universe. Overall, the process was tough as I was not used to the push pop rules and rotation and translation, but I am happy with the finished product.