Category: SectionC

Nawon Choi— Looking Outward-03

3D-Printed Kinematics Dress


3D-printed Kinematics Dress by Shapeways

The 3D-printed kinematics dress stood out to me because the designers took a material and form that is solid and rigid and developed techniques to make it flexible. In doing so, they created a new function for 3d printing. They used algorithms that they’ve previously developed based on biomorphic generativity to create shapes based on the natural principles of the nervous system. The creator’s artistic sensibilities are manifested in the final form in the way that they adapted this initial algorithm, which they used to create rings, and adapted it to create a wearable and flowing dress. The design and shape of the dress, as well as the decision to create a dress, rather than another piece of garment, were all creative decisions that the artist made.

Nawon Choi— Project-03 Dynamic Drawing

nawon-project-3

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project-03 Dynamic Drawing

var angle = 0;

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

function draw() {
    background("#001c2e");

    // revolving objects
    push();
    rotate(radians(angle));
    noStroke();
    fill(250);
    ellipse(150, 150, 20, 20);
    pop();
    angle += 5 * (mouseX * 0.005);

    if (mouseY > 160 & mouseY < 320) {
        push();
        rotateX(radians(angle));
        noStroke();
        fill("purple");
        ellipse(0, 300, 10, 10);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else if (mouseY > 320 & mouseY < 480) {
        push();
        rotateY(radians(angle));
        noStroke();
        fill("green");
        ellipse(200, 0, 15, 15);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else if (mouseY < 160) {
        push();
        rotateY(radians(angle));
        noStroke();
        fill("blue");
        ellipse(200, 0, 20, 20);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else {
        push();
        rotateX(radians(angle));
        noStroke();
        fill("yellow");
        ellipse(0, 300, 10, 10);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    }

    // from p5.js reference "directionalLight()"
    // https://p5js.org/reference/#/p5/directionalLight
    let dirX = (mouseX / width - 0.5) * 2;
    let dirY = (mouseY / height - 0.5) * 2;

    var colorR = mouseX / 2;
    var colorG = mouseY / 3;

    directionalLight(250, 250, 250, -dirX, -dirY, -1);

    // draw sphere
    noStroke();
    sphere(150, 150);

    rotateX(mouseY * -0.01);
    rotateY(mouseX * -0.01);
    rotateZ(mouseY * 0.01);
    cylinder(200, 10);

    // fill("white");
    // ellipse(5, 5, 10, 10);



}

For this project, I tried to keep it simple and also experiment with elements that I haven’t used before, which are 3D shapes. I originally played around with boxes and light. The directionalLight() function had a really interesting effect, which I thought it would look better on a circular object. I decided to use spheres and cylinders instead, and have the light be controlled by the mouse position. I also added some circles to revolve around the object (speed controlled by mouse) to add to the “planet” look.

Kimberlyn Cho- Project03

I was inspired by the static of a TV to create my dynamic drawing. I took into consideration the size of the static, rotation of the dials, position of the slider, degree of static, and colors to make my drawing dynamic in accordance to the position of the mouse.

ycho2-03

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Assignment-03 */

/* directions:
move vertically = vary length of static controlled by the slide
move horizontally = vary color and level of static controlled by the dials */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0

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

function draw() {
    background(256, mouseX, mouseY);
    rectMode(CENTER);

    //antenna
    stroke("pink");
    strokeWeight(5);
    line(320, 95, 370, 10);
    line(320, 95, 250, 5);
    strokeWeight(0);
    fill("white");
    ellipse(320, 95, 100, 50);

    //tv
    fill("pink");
    rect(320, 280, 500, 380, 50);
    fill("white");
    rect(290, 280, 380, 320, 30);

    //tv controls
    ellipse(525, 175, 50, 50);
    ellipse(525, 250, 50, 50);
    fill("pink"); 
    //rotating dials
    push();
    translate(525, 175);
    rotate(radians((angle + 20) + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    push();
    translate(525, 250);
    rotate(radians(-angle + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    //slider
    fill("white");
    rect(525, 360, 6, 136);
    var slider = constrain(mouseY, 292, 428);
    rect(525, slider, 25, 25);

    //tv screen
    fill("black");
    rect(290, 280, screenW, screenH);
    
    //to imitate static
    var color = random(0, 255);
    //to constrain static heights within screen
    var length = constrain(mouseY, 130, 430);
    var staticH = height - length;

    //static
    fill(200);
    translate(110, 130);
    fill(color, mouseX, color);
    rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
    rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
    rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

}

Sean Leo – Project 03 – Dynamic Drawing

I wanted to create an dynamic drawing that was minimal and focused more the on the composition and geometries of the basic shapes. Stopping your mouse anywhere on the canvas will produce a new composition, color and relation between all the parts. Also it’s really satisfying to just roll your mouse around on the canvas!

project-03

//Sean B. Leo
//Section C
//sleo@andrew.cmu.edu

//Project-03
function setup() {
    createCanvas(600, 480);
    strokeWeight(4);
  }
  
  function draw() {
    background(0);
    noFill();
    //scale mouse X value from 0-175
    var a = map(mouseX, 0, width, 0, 175);
    //scale mouse Y value from 0-175
    var b = map(mouseY, 0, height, 0, 175);
    //print(a);
    //contrary motion
    var inX = width - mouseX;
    var inY = height - mouseY;
    //rectangle transformations
    stroke(a, 0, 100);//scales R value
    rect(inX, inY, inX, inY);
    //circle transformations 
    stroke(100, a, b);//scales G B values
    ellipse(width/2, height/2, a, b);
    //triangle transformations
    stroke(0, a, 100);//scales G values
    triangle(width/2, mouseX / 2, mouseY / 2, mouseY / 2, mouseX, mouseY);
  }

Sean Leo – Looking Outwards 3

Fosters+Partners
Fosters+Partners

In looking up computational fabrication, I came across a lot of examples in architecture that features heavy parametric modeling. Without the aid of computers, certain shapes would be next to impossible to produce especially when all the requirements of architectural engineering need to be up held. Below is an example from Fosters+Partners for the new Mexcio City International Airport.

Curving structures and complex geometries create the exoskeleton for the airport and were modeled using digital methods.

Fosters+Partners

Timothy Liu — Looking Outwards — 03

This work is by Christoph Hermann, an artist focused on natural, generative design.

For my Looking Outwards this week, I picked a work by Christoph Hermann from 2012. It’s a piece of wood mathematically and generatively designed to appear flowy, soft, and organic; as shown here, the ripples are so natural it almost appears to be a piece of cloth. This piece really stood out to me because it’s remarkable how natural a computer-generated algorithm was able to make wood, a very stiff material, appear. It’s a testament to how much work the artists must have put into their algorithm to make sure it didn’t appear mechanical or robotic. Hermann worked with the computational design firm Biot(h)ing in order to create code that could emulate the natural flow of rippling fabric. As Biot(h)ing explains on their website, their primary mission is to utilize algorithms to “mimic the process of autopoiesis through intricate entanglements” — in other words, they seek to build code that can create, reproduce, and maintain itself through natural forms.

Hermann’s work was shown at the “Lasvit Liquidkristal (LLK) Pavilion” at Milan Design Week in 2012, an exhibit specifically designed to showcase parametric architecture and organically flowing patterns. Each piece had a smooth exterior with interiors comprising of dips and pockets; presumably, the interior is the portion that was generated with an algorithm. Although it isn’t specified how the code was written, my guess would be that it might have involved using a command that “pushes” shapes toward a certain direction or side. For instance, if we were to write code that could cause shapes to contort to the direction a mouse moves in, it’d be possible to mimic a natural curve or ripple. I’m not exactly sure how to do this, but perhaps it involves easing or other contortion.

Sources:

https://generativedesigns.tumblr.com/post/66953241707/generative-design-operates-as-visual-archive
LIQUIDKRISTAL triennale lovegrove

BIOTHING

Jai Sawkar Project 03 – Dynamic Drawing

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-03: Generative Drawing 

var whiteFade = 255;


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

function draw() {

    background(whiteFade);
    noStroke();
  
    //setting variables for the blue rectangle
    var tangleW2 = (width / 2);
    var tangle1H = constrain(mouseY, 20, height - 40);
  
    //rectblue
    fill(141, 194, 255);
    rect(10, 10, tangleW2, tangle1H);

    
    //rectgreen
    fill(255, 185, 141);
    // variable for x origin
    var basept2x = 10;
    var tangle2Y = constrain(mouseY, 40, height - 20)
    var tangle2H = constrain(mouseY, height / 2 - 40, height - 20)
  
    rect(basept2x, tangle2Y, tangleW2, tangle2H);
   


  //yellow rectangle
    fill(255, 242, 141);
  
    //rectangle variables for x & y
    var tangle3X = width / 2 + 20;
    var tangle3Y = constrain(mouseY, 30, 100);
  
    rect(tangle3X, tangle3Y, 480, 100);

    

    //rectangle dark purple
    fill(228, 141, 255);
  
    // variables for X, Y, Height & Width
    var tangle4X = constrain(mouseY, 10, width / 2 + 20)
    var tangle4Y = height / 2 + 10
    var tangle4H = (height / 2 - 20);
    var tangle4W = constrain(mouseY, width / 2, width / 2)
  
    rect(tangle4X, tangle4Y, tangle4W, tangle4H);


    //rectangle light purple
    var tangle5H = constrain(mouseY, 10, height / 2 - 20);
    var tangle5Y = 10;
    var tangle6y = height / 2 - 100;

    fill(171, 141, 255);
    rect(width / 2 + 20, 10, width, tangle5H);

    //green rectangle
    fill(168, 255, 141);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y, width, constrain(mouseY, 400, 400));
    fill(whiteFade);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y - 10, width, 10)
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y -10, -10, 480);


    //rectangle white
    fill(whiteFade);
    rect(0, height - 10, 640, 640);

    //rectangle white 2
    rect(630, 0, 10, 480);

    // background fade based on mouse position
    if (mouseX > width / 2 + 20) {
    whiteFade = whiteFade - 5;
    } else {
    whiteFade = whiteFade + 5;
    }
}

Cover for 65th and Ingleside by Chance the Rapper (July, 2019)

For this project, I wanted to make a drawing that is simple in message but more complex as the mouse moves. I created a series of rectangles that either grows from the sides of the canvas or decrease in size as the mouse moves across it. I took inspiration from a Cover of a single I liked last summer by Chance the Rapper and made my dynamic drawing.

Timothy Liu — Project 03 — Dynamic Drawing

Move the mouse to bring Pikachu near the pokéballs, and watch them converge and grow!

Also, click the mouse to change the berry floating around Pikachu’s head!

tcliu-openproject-03

// Timothy Liu
// 15104 Section C
// tcliu@andrew.cmu.edu
// OpenProject-03

// variables that determine the original/default sizing of Pikachu and pokeballs.
var pokeWidth = 50;
var buttonW = pokeWidth - 40;
var yStart = 350;
var pikachuW = 100;
var pikachuH = 80;
var pikachuX = 300;
var pikachuY = 200;
var eyeW = 15;
var eyeHighlight = 5;
var noseW = 10;
var mouthW = 15;
var mouthH = 30;
var cheekW = 17;

// variables determining the berry's size and color
var berryW = 25;
var berryH = 20;
var berryStem = 20;
var berryDist = 70;

// variables that allow berry color to be changed with mouse clicks
var berryR = 224;
var berryG = 78;
var berryB = 58;

// variables that determine background color; this allows the background to change color later as mouseY changes.
var colorR = 51;
var colorG = 91;
var colorB = 0;

// angle variable used to make the pokeballs spin. Later, the angle = angle + 1 command makes the angle change!
var angle = 0;

// function time!
function setup() {
    // canvas is 600, 480 instead of 640, 480 because a 640 width doesn't fit on WordPress.
    createCanvas(600, 480);
}

function draw() {

    // variables that make the pokeballs expand as the mouse moves down.
    // subtracting pokeWidth makes the pokeballs start at their default size when the mouse is at the top of screen.
    var mouseA = height - mouseY - pokeWidth;
    var pbWidth = height - mouseA;

    // variables to make the color of the background change as the mouse moves.
    var colorR1 = min(mouseY + colorR, 252);
    var colorG1 = min(mouseY + colorG, 194);
    var colorB1 = min(mouseY + colorB, 0);

    // setting the background color to start at green, and making it change to gold as the mouse moves down.
    background(colorR1, colorG1, colorB1);

    // if statement to limit size of the pokeballs. The pokeballs expand up to 200 pixels.
    if (pbWidth >= 200) {
        pbWidth = 200;
    }

    // pokeball 1: white part rotation. The push and pop functions ensure the pokeball spins.
    push();
    fill("white");
    noStroke();
    // this translate command makes the pokeballs converge to the center as mouseY increase.
    translate(width / 6 + min(max(mouseY, 0), width / 3), yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth, pbWidth);
    pop();
    angle = angle + 0.5;

    // pokeball 1: red half rotation
    push();
    fill("red");
    noStroke();
    translate(width / 6 + min(max(mouseY, 0), width / 3), yStart)
    rotate(radians(angle));
    arc(0, 0, pbWidth, pbWidth, PI, TWO_PI);
    pop();
    angle = angle + 0.5;

    // pokeball 1: button + outline
    push();
    fill("white");
    strokeWeight(3);
    translate(width / 6 + min(max(mouseY, 0), width / 3), yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth / 6, pbWidth / 6);
    pop();
    angle = angle + 0.5;

    // pokeball 2: white part rotation
    push();
    fill("white");
    noStroke();
    translate(width / 2, yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth, pbWidth);
    pop();
    angle = angle + 0.5;

    // pokeball 2: red part rotation
    push();
    fill("red");
    noStroke();
    translate(width / 2, yStart);
    rotate(radians(angle));
    arc(0, 0, pbWidth, pbWidth, PI, TWO_PI);
    pop();
    angle = angle + 0.5;

    // pokeball 2: button + outline
    push();
    fill("white");
    strokeWeight(3);
    translate(width / 2, yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth / 6, pbWidth / 6);
    pop();
    angle = angle + 0.5;

    // pokeball 3: white part rotation
    push();
    fill("white");
    noStroke();
    translate(5 * width / 6 - min(max(mouseY, 0), width / 3), yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth, pbWidth);
    pop();
    angle = angle + 0.5;

    // pokeball 3: red part rotation
    push();
    fill("red");
    noStroke();
    translate(5 * width / 6 - min(max(mouseY, 0), width / 3), yStart);
    rotate(radians(angle));
    arc(0, 0, pbWidth, pbWidth, PI, TWO_PI);
    pop();
    angle = angle + 0.5;

    // pokeball 3: button + outline
    push();
    fill("white");
    strokeWeight(3);
    translate(5 * width / 6 - min(max(mouseY, 0), width / 3), yStart);
    rotate(radians(angle));
    ellipseMode(CENTER);
    ellipse(0, 0, pbWidth / 6, pbWidth / 6);
    pop();
    angle = angle + 0.5;

    // beginning of push command to make the Pikachu follow the mouse using translate(mouseX, mouseY)
    push();
    translate(mouseX - pikachuX, mouseY - pikachuY);

    // head and ears 
    fill(252, 239, 0);
    noStroke();
    ellipse(pikachuX, pikachuY, pikachuW, pikachuH);
    triangle(pikachuX - 5 * pikachuW / 8, pikachuY - pikachuH, pikachuX - pikachuW / 4, pikachuY - pikachuH / 2.5,
        pikachuX - pikachuW / 2.2, pikachuY - pikachuH / 5);
    triangle(pikachuX + 5 * pikachuW / 8, pikachuY - pikachuH, pikachuX + pikachuW / 4, pikachuY - pikachuH / 2.5,
        pikachuX + pikachuW / 2.2, pikachuY - pikachuH / 5);

    // tips of the ears
    fill("black");
    triangle(pikachuX - 5 * pikachuW / 8, pikachuY - pikachuH, pikachuX - pikachuW * 0.5, pikachuY - pikachuH * 0.8,
        pikachuX - pikachuW * 0.56, pikachuY - pikachuH * 0.7);
    triangle(pikachuX + 5 * pikachuW / 8, pikachuY - pikachuH, pikachuX + pikachuW * 0.5, pikachuY - pikachuH * 0.8,
        pikachuX + pikachuW * 0.56, pikachuY - pikachuH * 0.7);

    // eyes
    ellipse(pikachuX - pikachuW / 5, pikachuY, eyeW, eyeW);
    ellipse(pikachuX + pikachuW / 5, pikachuY, eyeW, eyeW);
    fill("white");
    ellipse(pikachuX - pikachuW / 5, pikachuY - pikachuH * 0.05, eyeHighlight, eyeHighlight);
    ellipse(pikachuX + pikachuW / 5, pikachuY - pikachuH * 0.05, eyeHighlight, eyeHighlight);

    //red cheeks
    fill(227, 45, 25);
    ellipse(pikachuX - pikachuW / 3, pikachuY + pikachuH / 5, cheekW, cheekW);
    ellipse(pikachuX + pikachuW / 3, pikachuY + pikachuH / 5, cheekW, cheekW);

    // nose and mouth
    fill("black");
    arc(pikachuX, pikachuY + pikachuH / 8, noseW, noseW / 2, TWO_PI, PI);
    fill("pink");
    arc(pikachuX, pikachuY + pikachuH / 5, mouthW, mouthH, TWO_PI, PI);

    // pop command to enclose Pikachu commands. This ensures that only the Pikachu follows the mouse.
    pop();

    // this creates the berry floating/rotating around Pikachu's head.
    push();
    fill(berryR, berryG, berryB);
    noStroke();

    // this makes the berry float around Pikachu by adding some distance from the mouseX, mouseY origin
    translate(mouseX, mouseY);
    rotate(radians(angle));
    ellipse(berryDist, berryDist, berryW, berryH);
    fill(16, 196, 0);
    arc(berryDist, berryDist * 1.25, berryStem, berryStem / 1.1, PI, TWO_PI);
    pop();
    angle = angle + 1 / 100;

}

function mousePressed() {

    // when the mouse is pressed, the berry floating around Pikachu's head changes color!
    berryR = random(0, 255);
    berryG = random(0, 255);
    berryB = random(0, 255);
}

I grew up watching and playing Pokémon, and one of the random tidbits about the original cartoon that stuck with me was how pokéballs expand when they’re removed from the trainer’s belt. I built my program to mimic this dynamic movement; when you move the Pikachu (set to follow the mouse around) towards the pokeballs, they expand while rotating. They also converge into one as an inverse function of the mouse movement to represent Pikachu’s singular pokéball. In addition, the background changes color from a forest green to a warm gold as the mouse moves downward. I was very happy with how my project turned out, as its fun, lighthearted, meaningful, and engagingly dynamic.

The 5 dynamic elements I utilized are having Pikachu follow the mouse, making the pokéballs expand, having them converge, making the background change color, and the rotation of the pokéballs and berry. As an added interactive component, clicking on the berry causes it to change color.

Sean Meng-Project- 03-Dynamic Drawing

hmeng Project-03

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var angle = 0;
var mouth = 0;
var shark = 0;

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

function draw() {
//the color of the sea varies as the shark moves
    background(mouseX, 190, 200);
    fill(0)
    rect(0, 0, 250, 480)
    noStroke();

//bait
//When shark touches the bait, the sea turns to red
    fill(120)
    push();
    translate(640 - mouseX / 2, mouseY + 45);
    rotate(radians(angle));
    ellipse(0, 0, 30, 30);
    ellipse(0, 0, 10, mouseX * 90 / 300);
    pop();
    angle = angle + 5;
    rect(640 - mouseX / 2, mouseY + 45, 640 - mouseX / 5, 3)
    


//shark body
    fill(255);
    beginShape();
    vertex(mouseX, mouseY);
    vertex(mouseX - 250, mouseY);
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 60, mouseY + 60);
    endShape(CLOSE);
//shark fin
    beginShape();
    vertex(mouseX - 80, mouseY);
    vertex(mouseX - 110, mouseY);
    vertex(mouseX - 120, mouseY - 50);
    endShape(CLOSE);

    beginShape();
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 170, mouseY + 30);
    vertex(mouseX - 180, mouseY + 50)
    endShape(CLOSE);  

    beginShape();
    vertex(mouseX - 70, mouseY + 65);
    vertex(mouseX - 90, mouseY + 30);
    vertex(mouseX - 100 , mouseY + 100);
    endShape(CLOSE);      

//shark tail
    beginShape();
    vertex(mouseX - 230, mouseY + 5);
    vertex(mouseX - 320, mouseY - 40);
    vertex(mouseX - 280, mouseY + 5);
    vertex(mouseX - 320, mouseY + 39);
    endShape(CLOSE); 

//shark eye
    fill(0);
    ellipse(mouseX - 40, mouseY + 17, 10, 10);
    fill(255)
    ellipse(mouseX - 37, mouseY + 17, 5, 4);

//shark mouth appears when it gets out of the dark area
//shark mouth turns red and gets larger when it moves to the right
    if(mouseX > 250){
        fill(mouseX / 500 * 255, 0, 0);
        beginShape();
        vertex(mouseX - 34, mouseY + 35);
        vertex(mouseX - mouseX / 320 * 90, mouth)
        vertex(mouseX - 50, mouseY + 50);
        endShape(CLOSE); 
        mouth = mouseY - mouseX / 640 * 10 + 20
    }


}

In this project, I was interested in the relationship between different visual elements using interactive programming in p5js.

Fanjie Jin-Project-03-Dynamic-Drawing

fjin

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-03-Dynamic Drawing

var rgb = 255 / 640;
var rgb2 = 255 / 480;
var angle = 0;
var size = 15;


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

function draw(){
//change the background color
    size = constrain(size, 10, 80)
    background(255 - mouseY * rgb, 255- mouseX * rgb2, 255);
  
//ellipse1
    if (mouseX > width / 2){
      rectMode(CENTER)
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse2       
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse3     
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse4   
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate( width / 4, 3 * height / 4);
      rotate(radians(angle)); 
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse5 
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
}
  
    if (mouseX < width / 2){
      fill(255 - mouseX * rgb, 255- mouseY * rgb2, 100);
      noStroke();
      push();
      
//rectangle 1     
      translate(width / 2, height / 2);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 2
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 3
      noStroke();
      push();
      translate(3 * width / 4 , height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 4
      noStroke();
      push();
      translate(width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 5
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();  
//Change the size of the object
}
    if (mouseX < width / 4){
      size += 1.5;  
}
//Change the size of the object  
    if (mouseX > width / 4 & mouseX < width / 2 ){
      size += -1.5;    
}
//Change the size of the object  
    if (mouseX > width / 2 & mouseX < width * 0.75){
      size += 1; 
}
//Change the size of the object 
    if (mouseX > width * 0.75){
      size -= 1;
}
//Change the speed of the object 
   if (mouseY > height / 2){
      angle += 2; 
}
//Change the speed of the object
   if (mouseY < height / 2){
      angle += 6;
}
//Change the speed of the object
   if (mouseX > width / 2){
      angle += 4; 
}
//Change the speed of the object
   if (mouseX < width / 2){
      angle += 2;
}
}

I have been experimenting to create a dynamic drawing that focuses on rotation. When mouse is moved on the canvas, the size and color of the object, as well as the speed and shapes would be changed.