Category: SectionE

Angela Lee – Project – 03

angela-dynamic-drawing

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-03
 */

// variables for x & y position of circle following cursor
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;


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

function draw(){
    // defining variable for distance from mouse position to center
    mouseDist = dist(mouseX, mouseY, width/2, height/2);
    // width and height of the circles
    circle = 80 + mouseDist/6;
	background(0);
    noStroke();

    // small white circle following the mouse
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.2 * diffx;
    y = y + 0.2 * diffy;
    fill ("white");
    ellipse(x, y, 20, 20);

    // middle square
    push();
    translate(320, 240);
    rectMode (CENTER);
    rotate(radians(mouseDist));
    fill(mouseX, mouseY, 100);
    rect(0, 0, 15, 15);
    pop();

    // TOP CIRCLE
    // red, yellow values change based on mouse's x and y position
    fill(mouseX, mouseY, 150);
    // ellipse goes top based on mouse's distance from center
    ellipse(320, 114 - mouseDist/2, circle,
     circle);

    // RIGHT CIRCLE
    // green, blue values change based on mouse's x and y position
    fill(242, mouseX, mouseY);
    // ellipse goes right based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(445 + mouseDist/2, 240, circle,
     circle);

    // LOWER CIRCLE
    // red, green values change based on mouse's x and y position
    fill(mouseX, mouseY, 40);
    // ellipse goes bottom based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(320, 365 + mouseDist/2, circle,
     circle);

    // LEFT CIRCLE
    // red value changes based on mouse's x position
    fill(mouseX, 13, 174);
    // ellipse goes left based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(195 - mouseDist/2, 240, circle,
     circle);

    // TOP RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(23, 250, 255);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(141, 29, 221);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(255, 169, 210);
    rect(0, 0, 50, 50);
    pop();

    // TOP LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(7, 57, 239);
    rect(0, 0, 50, 50);
    pop();
}

This project helped me really understand the mechanisms of push, pop, and translation in the context of rotation. I think it was tricky to figure out how to make things rotate a certain place (e.g. rotate on its center while the position of the object changed places depending on the user). I also think that proportion was especially important for me in this exercise. While most of my user interaction was based on how far the cursor was from the center of the canvas, determining how fast something was moving or big something got depended on a fraction of that distance.

William Su – Looking Outwards – 03

Parametric World

This was made by vibrating a pool of water at a certain frequency. This creates a pattern of standing waves known as Faraday Waves. Higher frequencies create more complicated patterns. (Image and video credit: L. Gledhill)

I was especially intrigued by the complexity and how “lifelike” this generated pattern is. It almost looks like a microscopic cell, sea creature, or a CAT scan of body part. It is also interesting how completely different patterns are generated, even if the frequencies are off by a few Hertz. This I feel like adds to the “organic” nature of the project as there is just infinite possibilities and repeatabilities with this.

William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.

Margot Gersing – Project 03 – Dynamic Drawing

I really enjoyed combining different skill we have learned so far into this project. I started off using radial rotation which was fun to experiment with. I also utilized ‘easing’ which I think adds another level of interest to it.

Margot-dynamicdrawing

// Margot Gersing - Project 03 - Section E - mgersing@andrew.cmu.edu

// easing circle variables 
var cx = 100;
var cy = 100;
var diffx = 0;
var diffy = 0;
var targetX = 100;
var targetY = 100;

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

function draw(){
	background(1, 58, 111);

	// BACK RECTANGLES
	// rectangle's y position follows mouseY
	fill(186, 216, 227); //light blue
	rect(width / 2, mouseY, width, 300);

	// rectangle's x position follows mouseX
	fill(253, 145, 83); //orange
	rect(mouseX, height / 2, 100, height);

	// CIRCLE
	noFill();
	stroke(255);
	strokeWeight(10);

	// circle follows mouse with an ease of 0.1
	diffx = mouseX - cx;
    diffy = mouseY - cy;
    cx = cx + 0.1 * diffx;
    cy = cy + 0.1 * diffy;
    ellipse(cx, cy, 250, 250);

	noStroke();

	// if mouse is on the left side of screen fill outer rectangles with yellow
	if (mouseX < width / 2) {
		fill(255, 185, 65); //yellow
	}

	// if mouse is on the right side of screen fill outer rectangles with dark green
	if (mouseX > width / 2) {
		fill(22, 88, 51); //dark green
	}

	// OUTER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 180
	// size controlled by mouseX / 2 and mouseY / 2

	translate(width/2, height/2);
	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(180, 0, mouseX / 2, mouseY / 2);
		pop();
	}

	// if mouse is in the bottom part of screen fill inner rectangles with purple

	if (mouseY < height / 2) {
		fill(150, 71, 98); //purple
	}
	
	// if mouse is in the top part of screen fill inner rectangles with red
	if (mouseY > height / 2) {
		fill(255, 104, 62); //red
	}

	// INNER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 50
	// size controlled by mouseX / 3 and mouseY / 3

	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(50, 0, mouseX / 3, mouseY / 3);
		pop();
	}
}

Yoshi Torralva – Looking Outwards – 03

UNYQ Align Scoliosis Brace, UNYQ Design inc., 2017

Braces for scoliosis have been adjustable to the user’s condition but never personable. Ultimetality this results in these braces to be uncomfortable when worn for long periods due to adjustable straps and locks. UNYQ Align solves the issue of discomfort using an algorithm that uses current measurement data and desires goals to assist in mitigating the health effects of scoliosis. What why admire about the brace is how the structure is slimmer yet as effective due to the computer-generated design. The UNYQ Align’s overall design language is similar to that of an organically formed structure. UNYQ is applying this method of auto-generating forms into casts and braces for different parts of the body. One note is that they don’t go into detail about if the brace treats scoliosis faster or at the same rate as similar braces.

A person wearing the UNYQ brace personalized to their medical needs.

Gretchen Kupferschmid-Looking Outwards-03

The sculpture that was installed at Miami Art Basel

Constructed from aluminum that is one millimeter thick, Marc Fornes/THEVERYMAN created a sculpture that works as a pavilion called Labrys Frisae. The sculpture was meant to blur the distinctions between edge and space to create a immersive experience. This object was create through computational code, but what I find intriguing is creating art through code that humans can interact with and hold the human form. I couldn’t find much information of the exact algorithm he uses, but I know that process is meticulous and hands on.

The indoor pavilion at Art Basel

https://theverymany.com/constructs/11-art-basel-miami

Gretchen Kupferschmid-Project 03- Dynamic Drawing


sketch

var angle = 0;

function setup() {
    createCanvas(480,640);
}
 function draw (){
    background(500 - mouseY, 128, 224);
    //ellipse grows big and changes color
    noStroke();
    fill(800-mouseY, 400-mouseX, 15);
    ellipse(width/2, height/2, mouseX, mouseX);
    //line rotates with mouse and color changes
    push();
    translate(width/2, height/2);
    rotate(radians(mouseX/3));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(147, 190, 500-mouseX);
    line(10,10 ,mouseX, mouseY);
    pop();
    //line 1 rotate clockwise and change color
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*2));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(500-mouseX, 154, 158);
    line(10,10 ,50, 100);
    pop();
    //line 2 rotates counterclockwise and change color 
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*-2));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(220, 500-mouseX, 158);
    line(10,10 ,50, 100);
    pop();
    //line 3 rotates fastest and changes color 
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*5));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(220, 150, 500-mouseX);
    line(10,10 ,50, 100);
    pop();

     
    angle = angle +.5;
 }

Yoshi Torralva – Project 03 – Dynamic – Drawing

sketch

// Yoshi Torralva
// Section E
// yrt@andrew.cmu.edu
// Project 03

var x = 40; //  x height of plaid
var y = 40; //  y height of plaid
var dx = 0; //diagonal var / width
var dy = 40; //diagonal var / height 

function setup() {
    createCanvas(480, 640);
}
function draw() {
    background(mouseX, mouseY, 0); // changes color
//thread to the left and right 
//conditional reactive to the mouse 
if(mouseX > 0) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseX < 200) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseY > 0) {
    y = mouseY;
}
//conditional reactive to the mouse 
if(mouseY < 200) {
    y = mouseY;
}
var bxscale = constrain(mouseX, 40, 100); // scale of ellipse
var byscale = constrain(mouseY, 40, 100); // scale of ellipse 
// plaid banners — layered 
    push();
    noStroke();
    fill(187, 0, 0);
    rect(0, 40, x, 40);
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(0, 136, 85);
    rect(40, 0, 40, y); 
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 100, x, 40);
    fill(187, 0, 0);
    rect(0, 160, x, 40);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 220, x, 40);
    fill(34, 68, 51);
    rect(220, 0, 40, y);
// thin gold layering 
    fill(170, 102, 0);
    rect(0, 40, x, 10);
    fill(170, 102, 0);
    rect(40, 0, 10, y); 
    pop();
// push and pop used for strokeWeight only
    push();
    stroke(color(255));
    strokeWeight(10);
    line(mouseX, mouseY, 0, 0); // top left line 
    line(mouseX, mouseY, 480, 640); // bottom right line 
    fill("white");
    ellipseMode(CENTER);
    noStroke();
    ellipse(mouseX, mouseY, bxscale, byscale); // ellipse that moves to mouseX/Y
    pop();
}

With this project, I wanted to use the interaction of the mouse to create a plaid pattern. The rectangles react to the mouse and the white lines serve as a visual guide to imply that the mouse is weaving the plaid together. The background alternates color and the cursor shifts scale diagonally.

Alice Cai Looking Outwards 03

https://www.media.mit.edu/projects/meta-mesh-computational-model-for-design-and-fabrication-of-biomimetic-scaled-body-armors/overview/

a photo of METAMESH by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila.

MetaMesh is a project by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila. In this project, they study biomimetic design. This means studying and producing designs that mimic the functions and features of biochemical processes. MetaMesh studies and mimics the scaling of the Polypterus sengalus, which is an ancient fish. They developed a “hierarchical computational model” that mimics the “structure-function relationships found in the biological exoskeleton”. They then use additive manufacturing, a technology that uses additive layers in order to produce a three-dimensional object.

The purpose of this project was actually to propose a computational approach for protective armor. This scaled armor is meant to be multifunctional. The scaling/exoskeleton of the fish allows for flexibility as well as structural protection. Because the scales are segmented, they allow for movement and adhere to the curves of the body while the body is still covered.

First, they studied the biological organism, how it moves in reaction to curved surfaces. Then they looked at local, regional, and global analysis of the scales. In the regional analysis, they looked at how each scale can connect. In the locoal, they looked the parts of the fish and the proportions. Finally, they looked at the global analysis, which is how clothes adhere to the curves of the human body. This was then put through computational translation that digitalizes the studies to develop an algorithm.

^^ diagram of work flow: putting biological organism studies and new host geometry through computational translation.

I think this project is amazing because it is both functional, scientific, and aesthetic. This study serves a great purpose of protection but also generates such a natural and complex pattern.

Charmaine Qiu – Project 03 – Dynamic Drawing


sketch

Exploring the various ways that shapes in p5js can change with the movement of the cursor was really interesting! It was also interesting to incorporating text in different languages into my code.

/* Charmaine Qiu
   Section E
   charmaiq@andrew.cmu.edu
   Project-03-DynamicDrawing */


var angle = 0
var b = 0


function setup() {
    createCanvas(400, 400);
}

function draw() {
//square that follows the cursor
    fill(b);
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    angle += 5;

//rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

//dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

//When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
      push();
      translate(mouseX - 50, mouseY - 50);
      rotate(radians(angle));
      rectMode(CORNER);
      rect(20, 20, 20, 20);
      pop();
      angle = angle + 0.5;

      push();
      translate(mouseX + 50, mouseY + 50);
      rotate(radians(angle));
      rect(0, 0, 10, 10);
      pop();
      angle = angle - 0.5

      //text
      textSize(15);
      text('WooHooo!!!', 20, 90);
      textSize(30);
      text('哦耶!', 280, 180);

    } else { //When the mouse move to the right side of the canvas
      fill(0);
      strokeWeight();
      push();
      translate(mouseX, mouseY);
      rotate(radians(angle));
      rectMode(CENTER);
      rect(0, 0, 30, 30);
      pop();
      angle = angle + 5

      //text
      textSize(20);
      fill(255);
      text('야호!', 280, 50);
      textSize(25);
      text('ヤッホ〜ー', 70, 350);

    }


}