Category: Section A

Curran Zhang-Project03-Dynamic Drawing

sketch

/*Curran Zhang 
Section A
curranz@andrew.cmu.edu
project_03/
*/

var R = 0;
var G = 170;
var B = 225;
var leftwall = (75);
var rightwall = (525);
var angle = 0;

function setup() {
createCanvas(600,600);
var r = 1
var spinx = cos(angle)*r
var spiny = sin(angle)*r
var con = constrain(mouseX,leftwall,rightwall);
var skycolor = mouseX/(600/225);
}



function draw()
{
  background(R,G,B);
   if (mouseX > 0 & mouseX < width)
      { R = 0 - mouseX/20;
        G = 150 - mouseX/4;
        B = 225 - mouseX/4;
      }
    
  //Stars
      if (mouseX > width/3){
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(50,50,1.5,1.5);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(100,100,3,3);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(100,200,3,3);
        angle = angle + 1;
        pop();
        push();
        rotate(radians(angle));
        fill('white');
        ellipse(300,30,3,3);
        angle = angle;

        pop();
        fill(255); 
        push();
          translate(250, 75);
          rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 2, 2);
          pop();
          push();
          translate(400, 200);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 3, 3);
          pop();
          push();
        translate(100, 150);
          rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 4, 4);
        pop();
        push();
        translate(175, 225);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 5, 5);
        pop();
        push();
        translate(500, 180);
        rotate(radians(angle));
        rectMode(CENTER); 
        rect(0, 0, 5, 5);
        pop();
        angle = angle + 2;
      }
  //Sun and Moon
     fill('yellow');
     var con = constrain(mouseX,leftwall,rightwall);
     ellipse(con, 90, 70, 70);
     if(mouseX > width/2)
      {var x2 = map(mouseX, 0, width,120, 0, true);
       fill(0,150 - mouseX/4,225 - mouseX/4);
       strokeWeight(0);
       ellipse(mouseX - x2, 90, 70, 70);
      }
  //Mountain
      fill(178,71,154);
      beginShape();
      vertex(0,254);
      vertex(2,252);
      vertex(60,262);
      vertex(148,246);
      vertex(259,254);
      vertex(460,195);
      vertex(600,244);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);

      fill(129,61,151);
        beginShape();
        vertex(0,327);
        vertex(10,324);
        vertex(31,310);
        vertex(40,310);
        vertex(57,308);
        vertex(93,315);
        vertex(133,327);
        vertex(182,318);
        vertex(231,314);
        vertex(241,316);
        vertex(325,354);
        vertex(403,341);
        vertex(425,337);
        vertex(469,337);
        vertex(518,318);
        vertex(580,304);
        vertex(600,296);
        vertex(600,600);
        vertex(0,600);
        endShape(CLOSE);

      fill(77,40,119);
        beginShape();
        vertex(0,445);
        vertex(33,435);
        vertex(56,425);
        vertex(70,413);
        vertex(109,413);
        vertex(130,420);
        vertex(180,433);
        vertex(227,439);
        vertex(260,445);
        vertex(283,436);
        vertex(325,429);
        vertex(335,420);
        vertex(360,409);
        vertex(385,396);
        vertex(470,400);
        vertex(485,403);
        vertex(527,401);
        vertex(553,396);
        vertex(558,394);
        vertex(584,396);
        vertex(600,400);
        vertex(600,600);
        vertex(0,600);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(12,268);
        vertex(30,271);
        vertex(37,277);
        vertex(55,277);
        vertex(46,285);
        vertex(28,285);
        vertex(27,280);
        vertex(17,277);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(165,271);
        vertex(179,257);
        vertex(211,253);
        vertex(213,261);
        vertex(233,263);
        vertex(242,276);
        vertex(210,274);
        vertex(196,268);
        endShape(CLOSE);

      fill(205,121,178);
        beginShape();
        vertex(473,209);
        vertex(499,224);
        vertex(528,228);
        vertex(567,244);
        vertex(590,251);
        vertex(590,278);
        vertex(573,281);
        vertex(549,268);
        vertex(519,267);
        vertex(492,256);
        vertex(472,237);
        vertex(466,219);
        endShape(CLOSE);

      fill(54,31,86);
       rect(0,575,600,50);
  //Tree
      fill(54,31,86);
      rect(30,540,6,35);
      if (mouseX > 15 & mouseX < 45) {
          fill(54,31,86);
          ellipse(33,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(33,540,20,40);}
      rect(60,550,6,25);
      if (mouseX > 45 & mouseX < 75) {
          fill(54,31,86);
          ellipse(63,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(63,550,20,40);} 
      rect(120,545,6,30);
        if (mouseX > 105 & mouseX < 135) {
          fill(54,31,86);
          ellipse(123,535,20,40);
          } else{
            fill(54,31,86);
            ellipse(123,545,20,40);}
      rect(150,550,6,25);
          if (mouseX > 135 & mouseX < 165) {
          fill(54,31,86);
          ellipse(153,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(153,550,20,40);}
      rect(180,540,6,35);
          if (mouseX > 165 & mouseX < 195) {
          fill(54,31,86);
          ellipse(183,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(183,540,20,40);}
      rect(210,550,6,25);
          if (mouseX > 195 & mouseX < 225) {
          fill(54,31,86);
          ellipse(213,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(213,550,20,40);}
      rect(240,550,6,25);
          if (mouseX > 225 & mouseX < 255) {
          fill(54,31,86);
          ellipse(243,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(243,550,20,40);}
      rect(300,550,6,25);
          if (mouseX > 285 & mouseX < 315) {
          fill(54,31,86);
          ellipse(303,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(303,550,20,40);}
      rect(330,550,6,25);
          if (mouseX > 315 & mouseX < 345) {
          fill(54,31,86);
          ellipse(333,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(333,550,20,40);}
      rect(360,550,6,25);
          if (mouseX > 345 & mouseX < 375) {
          fill(54,31,86);
          ellipse(363,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(363,550,20,40);}
      rect(390,540,6,35);
          if (mouseX > 375 & mouseX < 405) {
          fill(54,31,86);
          ellipse(393,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(393,540,20,40);}
      rect(420,550,6,25);
          if (mouseX > 405 & mouseX < 435) {
          fill(54,31,86);
          ellipse(423,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(423,550,20,40);}
      rect(450,550,6,25);
          if (mouseX > 435 & mouseX < 465) {
          fill(54,31,86);
          ellipse(453,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(453,550,20,40);}
      rect(510,540,6,35);
          if (mouseX > 495 & mouseX < 525) {
          fill(54,31,86);
          ellipse(513,530,20,40);
          } else{
            fill(54,31,86);
            ellipse(513,540,20,40);}
      rect(540,550,6,25);
          if (mouseX > 525 & mouseX < 555) {
          fill(54,31,86);
          ellipse(543,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(543,550,20,40);}
      rect(570,550,6,25);
          if (mouseX > 555 & mouseX < 585) {
          fill(54,31,86);
          ellipse(573,540,20,40);
          } else{
            fill(54,31,86);
            ellipse(573,550,20,40);
            }
}

For this project, I tried to incorporate if statements into the code to create more motion. The most difficult part was getting the trees to move up and down, but the problem was solved with the help of if/else statements.

Looking Outwards 3 Liz Maday

One of Benjamin Dillenburger’s Rocailles. Rocaille refers to an architectural style with elaborate ornamentation.

The works that I chose to look at were Rocailles created by the architect Benjamin Dillenburger. These pieces inspire me because of how its complexity and precision alludes to the fact that it was produced through digital fabrication, while still reminding me of a design that could be found in nature. The shape of these structures seem reminiscent of shells, or ocean waves. The curves have a softness about them, but after looking at close ups, you can see the sharp, clean cut edges that form the whole.

I also like how these structures look like architectural designs that could be realized in larger form, although the structure itself doesn’t seem to serve any particular purpose. I see this as the artist’s way of integrating architectural design with expressive art.

 

Project 03 Liz Maday

liz maday project 3 sketch

//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//emaday

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

function draw() {
    var distance = int(dist(width/2, height/2, mouseX, mouseY));
    var vineTipX = 0;
    var vineTipY = 0;
    var x = width/2;
    var y = height/2;
    var r = 0;
    var g = 170;
    var b = 245;
    var eyeSize = 5;

    //make color get darker as mouse moves up
    if (mouseY < y) { 
    	r -= 0; 
    	g -= distance/2; 
    	b -= distance/2; 

    //make color lighter as mouse moves down
    } else if (mouseY > y) {
    	r += distance/2; 
    	g += distance/2; 
    	b += 0; 
    }
    background(r, g, b);

    //make vines move left and right
    if (mouseX > x) {
    	vineTipX += distance;
    } 
    if (mouseX < x) {
    	vineTipX -= distance;	
    }

    //make vines move up and down
    if (mouseY > y) {
    	vineTipY += distance;
    }
    if (mouseY < y) {
    	vineTipY -= distance;
    }

    //change eyeSize
    if (mouseY < y) {
    	eyeSize = 4;
    }
    if (mouseY > y) {
    	eyeSize = 10;
    }

    //draw triangles left
    noStroke();
    fill(0, 97, 85);
    triangle(0, 50, 0, 85, 200 + vineTipX, 65 + vineTipY);
    triangle(0, 100, 0, 135, 240 + vineTipX, 115 + vineTipY);
    triangle(0, 150, 0, 185, 280 + vineTipX, 165 + vineTipY);
    triangle(0, 200, 0, 235, 320 + vineTipX, 215 + vineTipY);
    triangle(0, 250, 0, 285, 360 + vineTipX, 265 + vineTipY);
    triangle(0, 300, 0, 335, 320 + vineTipX, 315 + vineTipY);
    triangle(0, 350, 0, 385, 280 + vineTipX, 365 + vineTipY);
    triangle(0, 400, 0, 435, 240 + vineTipX, 415 + vineTipY);

    //draw triangles right
    fill(0, 192, 58);
    triangle(550 + vineTipX, 40 + vineTipY, 640, 15, 640, 50);
    triangle(510 + vineTipX, 90 + vineTipY, 640, 65, 640, 100);
    triangle(460 + vineTipX, 140 + vineTipY, 640, 115, 640, 150);
    triangle(410 + vineTipX, 190 + vineTipY, 640, 165, 640, 200);
    triangle(460 + vineTipX, 240 + vineTipY, 640, 215, 640, 250);
    triangle(510 + vineTipX, 290 + vineTipY, 640, 265, 640, 300);
    triangle(550 + vineTipX, 340 + vineTipY, 640, 315, 640, 350);
    triangle(600 + vineTipX, 390 + vineTipY, 640, 365, 640, 400);

    //draw sun around mouse
    fill(255, 188, 0);
    stroke(255, 188, 0);
    strokeWeight(7);
    line(mouseX, mouseY, mouseX + 30, mouseY + 30);
    line(mouseX, mouseY, mouseX - 30, mouseY - 30);
    line(mouseX, mouseY, mouseX + 30, mouseY - 30);
    line(mouseX, mouseY, mouseX - 30, mouseY + 30);
    line(mouseX, mouseY, mouseX + 42.5, mouseY);
    line(mouseX, mouseY, mouseX - 42.5, mouseY);
    line(mouseX, mouseY, mouseX, mouseY + 42.5);
    line(mouseX, mouseY, mouseX, mouseY - 42.5);
    strokeWeight(2);
    ellipse(mouseX, mouseY, 40, 40);

    //draw sun face
    stroke(0);
    line(mouseX - 10, mouseY + 3, mouseX + 10, mouseY + 3);
    fill(0);
    ellipse(mouseX - 8, mouseY - 5, eyeSize, eyeSize);
    ellipse(mouseX + 8, mouseY - 5, eyeSize, eyeSize);

    //draw fish
    var dist2 = (0, 100, mouseX, mouseY);
    noStroke();
    ellipseMode(CENTER);
    fill(0);
    triangle(dist2 + 13, 400, dist2 + 25, 385, dist2 + 25, 415); //bottom fish tail
    fill(255, 73, 177);
    ellipse(dist2, 400, 30, 30);  //bottom fish body
    fill(0);
    ellipse(dist2 - 5, 400, 5, 5); //bottom fish eye
    fill(0);
    ellipse(dist2 + width/2 + 13, 80, 17, 12); //top fish tail
    fill(255, 121, 0);
    ellipse(dist2 + width/2, 80, 30, 30); //top fish body
    fill(0);
    ellipse(dist2 - 5 + width/2, 80, 5, 5); //top fish eye
}

 

With this project, I liked how I was able to play around with a concept. The sun image represents sunlight entering an underwater scene, and all the other elements react to its position.

Anthony Ra – Looking Outwards – 03

Wood-Skin Video 

Demonstrating flexibility of wood-skin

Wood-Skin is a fabrication firm that attempts to use ideas of digital fabrication and typical building materials to build new composite materials and technology. It is described as the most flexible 3D surfaces for architecture and design.

Wood-skin can be altered into whatever function and decor is wanted

The process begins with a digital model through a CAD file. What also makes this project unique is the variety of materials that can be utilized such as wood, metal, acrylic, etc. In reality, wood-skin is fabricated with the combination of pliable nylon and polymer mesh.

table made with modules of wood-skin

The composite materials are generated from a digital file to a CNC mill where a series of modules of the same algorithm can be realized by fabricating them. They can also be altered based on thickness, pliability, and even overall shape.

wood-skin can be altered into different triangular patterns

The benefit of this computative fabrication is the elimination of a complex understructure that may be needed for complex forms. One can alter the pattern in however manner they like and can pave the way as using composite materials an option for building material.

 

Audrey Zheng-Project03

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project 03

var cx = 0;
var cy = 0;
var radius = 150;
var blue = 40;

var vertices = 4;
var angle = 0;

var listvertices = new Array();
listvertices[0] = new Array(cx-radius, cy);
listvertices[1] = new Array(cx, cy-radius);
listvertices[2] = new Array(cx+radius, cy);
listvertices[3] = new Array(cx, cy+radius);


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

function wheel() {

    beginShape();
    for (i= 0; i <listvertices.length; i++) {
        for (j=0; j<listvertices.length; j++) {
            stroke(50,50,blue);
            line(listvertices[j][0], listvertices[j][1], listvertices[i][0], listvertices[i][1]);

        }
    }
    endShape(CLOSE);



} 


function mousePressed() {


}

function draw() {
    scale(0.8);
	background(255);

    text("p5.js test", 25, 15);

    push();
    translate(320,240);
    rotate(frameCount / 160.0);


    wheel();
    pop();

    //restrict mouseX from 0 to 255
    var m = max(min(mouseX, 255), 0);
    blue = m;

    stroke(50,50,blue);

    if ((mouseX > 320) & (frameCount%2 == 0) && (vertices <13)) { //do not let the points get infinitely bigger
        listvertices = [];
        vertices += 1;

        var j;
        var a = angle;
        for (j=1; j < vertices + 1; j++) {
            print("hi");
            a += 2* Math.PI/vertices; //2pi is whole circle in radians


            var newpoint = new Array(cx + radius*Math.cos(a), cy + radius*Math.sin(a));

            listvertices.push(newpoint);

        }   
    //print(listvertices);
    }

    if ((mouseX < 320) & (frameCount%2 == 0) && (vertices > 2)){
        listvertices = [];
        vertices -= 1;

        var k;
        var a = angle;
        for (k=1; k < vertices + 1; k++) {

            a += 2* Math.PI/vertices; //2pi is whole circle in radians


            var newpoint = new Array(cx + radius*Math.cos(a), cy + radius*Math.sin(a));

            listvertices.push(newpoint);

        }   
    //print(listvertices);
    }

    var size_of_each_line = max(min(mouseX, 230), 60);
    radius = size_of_each_line;



   
}

Anthony Ra – Project03 – Dynamic Drawing

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-03-DynamicDrawing */


/* assigning altering variables */
var tor = 150;
var tot = 3;
var torr = 100;
var tort = 5;
var torrr = 30;
var tortt = 0.5;
var dir = 1;
var speed = 2;
var speedd = 5;

function setup() {
  createCanvas(640, 480, WEBGL);
  frameRate(100);
  noCursor();

}

function draw () {

/* altering color of background */
  var r = map(mouseX, 0, height, 220, 215);
  var g = map(mouseX, 0, height, 255, 0);
  var b = map(mouseX, 0, height, 0, 255);
  background(r, g, b);

  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(40, 210, 60);
  ambientMaterial(90, 200, 100);
  speed = mouseX / 20;
  torus(tor + speed*dir, tot + speed*dir);

/* movement of larger torus */
  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(150, 30, 50);
  ambientMaterial(100, 50, 100);
  speed = mouseX / 20;
  torus(torr + speed*dir, tort + speed*dir);

/* movement of smaller torus */
  noStroke();
  rotateX(mouseX * 0.01);
  rotateY(mouseY * 0.01);
  ambientLight(50);
  ambientMaterial(150);
  speedd = mouseX / 10;
  torus(torrr + speedd*dir, tortt + speedd*dir);

}

This process was definitely a bit more challenging than the previous projects because I was thinking more about which lines of code was going to work rather than what I wanted my end product to look like. Something new that I played with is the implementation of 3-dimensional shapes and its movement along the mouse. I felt that toruses best represented the different angles that can be controlled by the mouse.

Adam He – Looking Outwards – 03

Installation fabricated digitally using parametric modeling by Achim Menges

In the highly parametric society we have today, architects are getting more interested in biomimetics. Using generative modeling, architects and designers  utilize computational science to create systematic pattern and structure that mimic the ecology of the nature. Achim Menges has his research field concentrated at the area of digital fabrication and computational design in relations to morphology. In this project, he attempts to integrate biomimetic investigations and cutting-edge robotic fabrication together. Menges employs fiber as the outer skin that wraps the whole structure, which in other words, is demonstrating how natural organic materials and artificial steel frames harmonize the overall design of the installation. Achim Menges tries to challenge the conventional ways of thinking towards architecture, and approaches to the designs that unfold morphological complexity. Trying to find a balance between the opposites such as space and material, form and structure, Menges uses digital fabrication to create novel designs that have not yet been done previously.

The link below has more detailed information about this installation.

ICD/ITKE Research Pavilion 2013/14, Design Society

Project 03 – Min Lee

sketch

function setup() {
    createCanvas(640, 480);
    background(208, 57, 64);
}

function draw() {
	background(208, 57, 64);

	translate(320, 240);

	var squareRotate = map(mouseX, 0, width, 0, TWO_PI);
	var squareSize = map(mouseX, 0, width, 0, 200);
	var squareSize2 = map(mouseY, 0, width, 0, 200);
	var squareSize3 = map(mouseY, 0, height, 0, 200);
	var rgbR = 1;
	var rgbG = 2;
	var rgbB = 0.5;
	var circleR = map(mouseX, 0, width, 350, width + 150);
	var faceSize = map(mouseX, 0, width, 1, 10);
	var textChange = map(mouseX, 0, width, 80, -60);
	var mouthChange1 = map(mouseX, 0, width, 30, 60);
	var mouthChange2 = map(mouseX, 0, width, 20, 50);

	//circle around head
	noStroke();
	fill(156, 38, 40);
	ellipse(0, 0, circleR + 420, circleR + 420);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 400, circleR + 400);
	fill(163,45,47);
	ellipse(0, 0, circleR + 360, circleR + 360);
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 320, circleR + 320);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 280, circleR + 280);
	fill(163,45,47);
	ellipse(0, 0, circleR + 250, circleR + 250)
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 220, circleR + 220);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 180, circleR + 180);
	fill(208,57,64);
	ellipse(0, 0, circleR + 140, circleR + 140);
	fill(217,87,98);
	ellipse(0, 0, circleR + 100, circleR + 100);
	fill(213, 70, 75);
	ellipse(0, 0, circleR + 90, circleR + 90);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 60, circleR + 60);
	fill(217,87,98);
	ellipse(0, 0, circleR + 50, circleR + 50);
	fill(213, 98, 120);
	ellipse(0, 0, circleR + 30, circleR + 30);
	fill(60, 125, 195);
	ellipse(0, 0, circleR, circleR);

	//head
	push();
	rotate(0 + squareRotate);
	noStroke();
	fill(247, 204, 160);
	arc(0, 0, 209, 225, 0, PI);
	arc(5, 12, 200, 200, 0, 270);
	//hair
	noStroke();
	fill(150,86,3);
	arc(-width/4 + 65, -20, 50, 200, 0, PI, CHORD);
	//ear
	fill(247,204,160);
	ellipse(-width/4 + 70,20,30,40);
	//hair
	fill(150,86,3);
	arc(-width/4 + 85, -20, 30, 140, 0, PI, CHORD);
	arc(-width/4 + 105, -20, 20, 100, 0, PI, CHORD);
	//eyes
	fill(255, 255, 255);
	stroke(0, 0, 0);
	strokeWeight(1);
	ellipse(0, 25, 8, 8);
	ellipse(45, 25, 8, 8);
	//mouth
	noFill();
	stroke(0, 0, 0);
	strokeWeight(2);
	curve(5, mouthChange1, 10, 40, 40, 40, 50, mouthChange2);
	//eyesbrows
	noFill();
	stroke(0, 0, 0);
	strokeWeight(4);
	line(41, 8, 51, 8);
	line(-5, 8, 5, 8);
	//#nocap
	noStroke();
	fill(43, 43, 43);
	arc(-5, -20, 230, 210, PI, TWO_PI);
	fill(35, 35, 35);
	rect(-125, -40, 240, 30, 5, 5, 5, 5);
	pop();

	//'Hello' text
	rotate(-PI/15);
	textAlign(CENTER);
	textSize(textChange);
	fill(194, 203, 152);
	textFont('Georgia Italic');
	text("That's all Folks!", 0, 150);
}

For this project, I wanted to create a “Looney-Tunes style” graphic in which I could create an interactive cartoon. It involved a lot of tinkering, but I ended up making a dynamic drawing in a style that I prefer and that is within my skill range.

Looking Outwards 3- Sara Frankel


Caption: Combining technology with the art of the instrument, this artist creates a playable violin with a 3D printer.

This project harmonizes the art of code and music together. It does so by means of using a 3D printer to produce a playable violin. What I admire about this project is the fact that someone was capable of making a plastic shape make music. This is inspirational to me in the sense that, being a music major, music is found everywhere in many different kinds of mediums. The fact that someone is able to speak through an instrument made by a machine is amazing as it truly speaks for the modern day; this project is the culmination of the art of code and music. An aspect of this project that would incorporate an algorithm is the fact that when the bow of the instrument is brought to the string, how the instrument will produce a sound.

Ean Grady-Project3-Dynamic Drawing

sketch

//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03

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

function draw() {
    var r = int(mouseX)
    var g = int(mouseY)
    background(r, g, 100);
    var m = max(min(mouseX, 640), 0);
    var z = max(min(mouseY, 480), 0);
    var size = m;
    var size2 = z;
    noStroke();
    ellipseMode(RADIUS);
    fill(mouseY, mouseX, 100)
    ellipse(m * 200 / 400, z, size, size2);
    rect(200 + m * 200 / 400, z/2, size, size2);
    ellipse(400 + m * 200 / 400, z/3, size, size2);
    fill(mouseX, mouseY, 100)
    rect(100 + m * 200 / 400, z/4, size, size2);
    ellipse(350 + m * 200 / 400, z/5, size, size2);
    size = 400 - size;
    fill(mouseY, mouseX, 150)
    ellipseMode(CENTER);
    rect(300 + m * 200 / 400, z, size, size2);
    ellipse(150 + m * 200 / 400, z/2, size, size2);
    fill(mouseY, mouseX, mouseY)
    ellipse(250 + m * 200 / 400, z/3, size, size2);
    rect(50 + m * 200 / 400, z/4, size, size2);
    ellipse(450 + m * 200 / 400, z/5, size, size2);
    size = 320 - size;
    fill(mouseY, mouseX, 50)
    ellipseMode(CORNERS);
    ellipse(z * 200 / 400, m, size, size2);
    rect(200 + z * 200 / 400, m/2, size, size2);
    ellipse(400 + z * 200 / 400, m/3, size, size2);
    fill(mouseX, mouseY, 150)
    ellipse(100 + z * 200 / 400, m/4, size, size2);
    ellipse(150 + z * 200 / 400, m/5, size, size2);
    size = 340 - size;
    fill(mouseX, 100, mouseY);
    ellipseMode(CORNER);
    rect(250 + z * 200 / 400, m, size, size2);
    ellipse(300 + z * 200 / 400, m/2, size, size2);
    fill(mouseX, 100, mouseY)
    ellipse(350 + z * 200 / 400, m/3, size, size2);
    fill(100, mouseX, mouseY)
    ellipse(450 + z * 200 / 400, m/4, size, size2);
    rect(50 + z * 200 / 400, m/5, size, size2);
    fill(mouseY, mouseX, 100)
    ellipse(75 + z * 200 / 400, m/5, size, size2);
}

I really enjoyed this project because it allowed me to get familiar with using the mouseX and mouseY variables, I also began to start feeling a lot more comfortable with programming in p5.js through making the dynamic drawing. Essentially, what I did was start with the example dynamic drawing as a template and then worked from there.