Category: SectionB

Ankitha Vasudev – Looking Outwards – 04

Sonic Playground is an outdoor sound installation that was created by Yuri Suzuki in 2018. This project was made for the High Museum of Art in Atlanta. It features 6 interactive, playful and colorful sculptures that modify and transmit sounds depending on where the participant is standing, listening or speaking. Using horns and pipes the computed acoustics travel from one end to the other in a playful way and by kneeling down or sitting between two pipes one can hear the that sounds are transported from different parts of the sculptures, which creates a fun and unique listening experience.

Children engaging with Sonic Playground

I find this project interesting because it made use of a software that I am learning now – Grasshopper (as a parametric plug-in for Rhino). The code that was written for this is a 3D raytracing tool that allows the user to select a sound source and send sound in a certain direction or towards a certain geometry, in this case the shape of the acoustic mirrors or the bells at the start and end of the pipes to see how the sound is reflected and what is the interaction with the object. 

Grasshopper/Rhinoceros 3D
The pipes transfer sounds depending on where the person is situated

Julia Nishizaki – Project 03 – Dynamic Drawing

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-03

var oceanY = 480;
var oceanSpeed = 0.05;
var diffocean = 0;
var diffwaves = 1;
var deg = 0;
var brightness = 0;

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

}

function draw() {
    background(220);

    noStroke();
    fill(34, 110, 148);
    rectMode(CORNERS);

    //ocean rising and falling
    diffocean = mouseY - oceanY;
    oceanY = oceanY + oceanSpeed * diffocean;
    let conocean = constrain(oceanY, 200, 400)
    rect(0, conocean, width, height);

    //rain
    let rainWeight = constrain(((height - mouseY) / 48), 0, 10);
    strokeWeight(rainWeight);
    stroke(50, 120, 147, 20);
    var cloudsX = width - mouseX;
    line(cloudsX + 25, 100, cloudsX + 25, conocean);
    line(cloudsX + 50, 100, cloudsX + 50, conocean);
    line(cloudsX + 75, 100, cloudsX + 75, conocean);
    line(cloudsX + 100, 100, cloudsX + 100, conocean);
    line(cloudsX + 125, 100, cloudsX + 125, conocean);

    //clouds
    noStroke();
    rectMode(CORNER);
    fill(constrain(mouseY, 50, 255));
    rect(cloudsX, 50, 150, 50, 30, 30, 30);
    
    //boat and boat variables
    //bmX and bmY are boat middle X and Y
    var bmX = 0;
    var bmY = 0;
    //bw and bh are boat height and width
    var bw = 75;
    var bh = 40;
    //bd is displacement of left and right boat corners above bmY
    var bd = 10;
    //bblX and bbrX are boat base left and right X
    var bblX = bmX - bw / 2;
    var bbrX = bmX + bw / 2;

    //boat stroke and fill
    stroke('black');
    strokeWeight(5);
    strokeJoin(ROUND);
    fill('white');
    
    //rotation of the boat
    push();
    translate(width / 2, conocean);
    rotate(radians(deg), bmX, bmY);
    triangle(bblX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bbrX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bblX - bw / 2, bmY - bd, bblX, bmY + bh, bmX, bmY);
    triangle(bblX, bmY + bh, bbrX, bmY + bh, bmX, bmY);
    triangle(bbrX + bw / 2, bmY - bd, bbrX, bmY + bh, bmX, bmY);
    pop();
    var waves = ((height - mouseY) * 0.05);
    deg += (waves / 8) * diffwaves;
    if (deg > waves || deg < -waves) {
        diffwaves = -diffwaves;
    }

    //water in front of boat
    fill(34, 110, 148);
    noStroke();
    rect(0, conocean + 25, width, height);

    //stormy filter, makes things darker
    brightness = height - mouseY;
    let conbrightness = constrain(brightness, 0, 100);
    fill(12, 52, 68, conbrightness);
    rect(0, 0, width, height);

}

For this project, I wanted to play with the idea of a boat at sea that gets caught in a storm. While I ended up simplifying the project as I went along, I still was able to experiment a little with changing position, color, stroke weight, size, and rotation. However, I struggled a lot with getting the rotation to work, and I still wasn’t able to get it to function without occasionally glitching if your mouse goes too low on the canvas.

Claire Lee – Project 03 – Dynamic Drawing

project – 03 – seoyounl

var canvasW = 480
var canvasH = 640

function setup() {
    createCanvas(canvasW, canvasH);

}

function draw() {
    var drinkY = 300;
    var drinkH = 200;
    var drinkOpacity = 200 - (mouseY / 8);

    background(100 + (mouseX / 10), 150 + (mouseX / 10), 255);
    // background color changes with mouseX
    
    noStroke();
    fill(255, 200, 200);
    ellipse(canvasW / 2, 240, 300, 300);

    noStroke();
    fill(0);
    ellipse(180, 160, 15, 15);

    noStroke();
    fill(0);
    ellipse(300, 160, 15, 15);

    noStroke();
    fill(0);
    rect(235, 190, 10, 305);

    stroke(0);
    strokeWeight(4);
    line(210, 190, 270, 190);



    noStroke();
    fill(240, 130, 30, drinkOpacity);
    rect(170, drinkY + (mouseY / 4), 140, drinkH - (mouseY / 10));
    // drink height and opacity changes with mouseY
  
    noStroke();
    fill(60); 
    rect(0, 500, canvasW, canvasH - 500); 

    stroke(255);
    strokeWeight(4);
    noFill();
    rect(170, 250, 140, 250); 

    push();
    translate(0, (mouseY / 4.3));  
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(200, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop(); 

    push();
    translate(0, (mouseY / 5)); 
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(250, 320, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop();

    push();
    translate(0, (mouseY / 4.3)); 
    rectMode(CENTER);
    noStroke();
    fill(255, 255, 255, 100);
    rect(280, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
    pop();
    // ice cubes change size and position





}

This project was a really interesting way to experiment with changing shapes, colors, opacity, size, and position in a piece. I really enjoyed learning some new functions, and some other things I wish I could’ve implemented are rotations (in the ice cubes) and some more complex figures.

Rachel Shin- LO3

The building-scale 3D printing employs small robotic agents to build a mini version of construction structures with material that acts as a mold and “thermal insulation layer.” MIT developed this system to provide 3D printing models for building models so that architectures and scientists could better visualize and collaborate to produce and build strong, technologically advanced buildings. The technology that MIT established also allowed building utilities to be incorporated into the model so that it can accurately predict future circumstances and provide solutions to any uprising issues in the model. I found this interesting because it improves the rate of success as well as minimizes any risk of danger or negative influence on civilians’ safety. I suppose the algorithms used to generate work comes from positioning potential structures as well as generating buildings with accurate angles and arrangement of components of the structure. The creator’s artistic sensibilities are manifested in the final form because it is literally an enlarged version of the building-scale 3d printed model while guaranteeing success of any wiring or plumbing or sturdiness involved.

Rachel Shin – Project 03

For this project, I decided to start with the rotating squares that I learned in recitation. From there, I layered shapes with differing positions, sizes, angles, and a change in background color to create a cohesive art piece. I thought it was fun to experiment with stroke, stroke colors, shapes, layering, rotating, and mouseX/mouseY positions to create a moving art piece.

reshin-03-project-dynamic

//Rachel Shin
//reshin@andrew.cmu.edu
//15-104
//Section B
//Project 03- Dynamic Drawing

    var angle = 0;
    var angle2 = 0;

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

function draw() {
    
    //background: color change based on mousex
    background(109, 140, 148);

    if (mouseX > width/2) {
        background(202, 220, 224);
    }

    //circle1: size change, position same
    noFill();
    strokeWeight(10);
    stroke(230, 197, 211);
    ellipse(50, 50, mouseX, mouseX);

    //circle2: size change, position same
    noFill();
    strokeWeight(20);
    stroke(194, 79, 83);
    ellipse(430, 430, -mouseX, -mouseX);

    //circle3: size change, position same
    noFill();
    strokeWeight(30);
    stroke(79, 121, 194);
    ellipse(430, 50, mouseX, mouseX);

    //circle4: size change, position same
    noFill();
    strokeWeight(40);
    stroke(139, 194, 79);
    ellipse(50, 430, -mouseX, -mouseX);

    //rect 1: size change, position same
    noStroke();
    fill(139, 173, 137);
    rect(20, 50, (-mouseX/3), (mouseY/2));

    //rect2: size change, position same
    noStroke();
    fill(246, 250, 190);
    rect(20, 460, mouseX/5, mouseY/8);

    //circle3: size same, position change
    fill(173, 146, 108);
    ellipse(mouseX/2, mouseY/3, 100, 200);



    //spinning squares
    noStroke();
    fill('white');
    push();
    rotate(degrees(angle));
    rect(mouseX, 5, 50, 50);
    pop();
    angle = angle + 2;

    
    push();
    translate(195,195);
    rotate(degrees(angle2));
    rect(mouseX-100, 5, 50, 50);
    pop();
    angle2 = angle2 - 2;

    //baymax
    if (mouseY > height/2) {
        //if vertical position is at 240 or more, draw baymax
        noStroke();
        fill('white');
        ellipse (200, 300, 100, 70);

        noStroke();
        fill('black');
        ellipse (175, 300, 15, 15);

        noStroke();
        fill('black');
        ellipse (225, 300, 15, 15);

        noStroke();
        fill('black');
        rect (175, 300, 50, 5);

        text("HI, I'M BAYMAX, YOUR PERSONAL HEALTH CARE COMPANION", 50, 400, 400, 50);
    }


}

Fallon Creech-LookingOutwards-03

Series of site analyses using topography and ecological processes to generate flows

Dana Kupkova’s Advanced Synthesis Option studios confront ecological and biological processes using datasets in parametric software such as Grasshopper, which forces the architectural design to ultimately respond to the information generated from the program. Her studios analyze the natural ecology and environments of specific sites to generate designs whose forms are dependent on the nature of the site; this degree of specificity and synthesis of location produces highly contextual forms.

Kupkova’s work is admirable because the resultant forms respond to a complex set of variables inputted into a computational process; it intelligently uses information that is inherently natural and difficult to predict to produce functional spaces. The means of analysis and product seem highly incompatible, but they do, however, work complementary in that the parametric outputs rely solely on the input of ongoing ecological data.

Minjae Jeong – Project 03 – Dynamic Drawing

sketch

// Minjae Jeong
// Section B
// minjaej@andrew.cmu.edu
// Project -03

var angleX = 0;
var angleY = 0;

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

function draw() {
    background((mouseX - mouseY) / 2, mouseX - mouseY, mouseY + 17); // change colors
    r = mouseX - 300;
    g = mouseY - 200;
    b = mouseX - mouseY;

    fill(mouseX / 3, 163, 223);
    push();
    translate(mouseX / 3, mouseY / 2);
    rotate(radians(angleX));
    rect(130, 30, mouseX / 3, 50);
    angleX = angleX + 1;
    pop();

    fill(r, g, b);
    push();
    translate(mouseX / 3, mouseY / 2);
    rect(140, 50, mouseX - 200, mouseY / 3);
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angleY));
    ellipse(300, 250, 50, mouseY / 2);
    angleY = angleY - 1;
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX / 6, mouseY / 4);
    ellipse(300, 250, 50, mouseY);
    pop();
}

This project, I wanted to create what randomness in order would look like. It started from a thought that what if what we see everyday that seems random is actually not random?

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.