Month: September 2019

Alice Cai_project03_dynamic drawing

sketch


//Alice Cai
//Section E
//alcai@andrew.cmu.edu
//Project 3

//global variables
var angle = 0


//canvas setup and original background
function setup(){
    createCanvas(640,480);
    background(220);
}

function draw() {
    stroke(mouseX, mouseY);
    strokeWeight(10);
    //color controls changes at half canvas 
    if (mouseX < width / 2){
    fill(mouseY ^ 2, mouseY ^ 2, mouseX ^ 2); 
} else {
    fill(mouseX ^ 2,mouseY ^ 2,mouseY ^ 2); 

}
    
//ellipse positioning
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);


    pop();
    angle = angle + mouseX;

//color controls changes at half canvas for second ellipse
    stroke(mouseX, mouseY);
    if (mouseX > width / 2){
    fill(mouseX / 5,mouseY * 3,mouseY); 
} else {
    fill(mouseX, mouseX, mouseY / 2); 
}
//ellipse2 positioning,not center of mouse, size and position is opposite of original

    push();
    translate(640 - mouseX, 480 - mouseY);
    rotate(radians(angle) / 100);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle = angle + mouseX;
    

}

This is my dynamic drawing! It quite literally is dynamic drawing. I started this by using our lab exercises with spinning square moving with the mouse. Then, I changed it to a circle, added another circle, and offset one of them through translate. One of the circles moves opposite of the mouse. I did this by using the previous assignment, with Width/height – mouseX/mouseY. Then, I moved background to set up so that the background doesn’t reset and you can see all the circles that are drawn. The colors of the stroke weight and the circle fills are all controlled by mouseX and mouseY coordinates, as well as the speed of the spinning.

lee chu – project 03

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 03


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

function draw() {
    var topX = 0;
    var topY = 0;
    var widthE = width/12;
    var heightE = height/7 - 30;
    var topR = widthE/2;
    var topH = heightE/2;

    var top1X = topX;
    var top2X = topX + widthE/2;
    var top3X = topX;
    var top4X = topX - widthE/2;
    var top1Y = topY - heightE/2;
    var top2Y = topY;
    var top3Y = topY + heightE/2;
    var top4Y = topY;

    var spacingX = width/12;
    var spacingY = height/7;

    var color1 = 45 + (mouseX / width) * 30;
    var color2 = 125 + (mouseY / height) * 50;
    var color3 = 0;

    background(color2);

    // control
    if (0 <= mouseX & mouseX <= width) {
        top1X += sqrt(mouseX/width) * topR;
        top1Y += pow(mouseX/width, 2) * topH;
        top2X -= pow(mouseX/width, 2) * topR;
        top2Y += sqrt(mouseX/width) * topH;
        top3X -= sqrt(mouseX/width) * topR;
        top3Y -= pow(mouseX/width, 2) * topH;
        top4X += pow(mouseX/width, 2) * topR;
        top4Y -= sqrt(mouseX/width) * topH;
    }

    for (var i = 0; i < 641; i += spacingX) {

        //used this as reference
        //ellipse(topX, topY, widthE, heightE);
        strokeWeight(0.5);
        stroke('red');

        // cube side 1
        fill('white');
        beginShape();
        vertex(top1X, top1Y);
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 2
        fill(107, 37, 50);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 3
        fill(212, 75, 99);
        beginShape();
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top3X, top3Y + 30);
        vertex(top3X, top3Y);
        endShape(CLOSE);

        // cube side 4
        fill(40, color1, 99);
        beginShape();
        vertex(top3X, top3Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top3X, top3Y + 30);
        endShape(CLOSE);

        // cube top
        fill(239, 240, 235);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top3X , top3Y);
        vertex(top4X, top4Y);
        endShape(CLOSE);

        for (var k = 0; k < 481; k += spacingY) {
            translate(0, spacingY);

            // cube side 1
            fill('white');
            beginShape();
            vertex(top1X, top1Y);
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 2
            fill(107, 37, 50);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 3
            fill(212, 75, 99);
            beginShape();
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top3X, top3Y + 30);
            vertex(top3X, top3Y);
            endShape(CLOSE);

            // cube side 4
            fill(40, color1, 99);
            beginShape();
            vertex(top3X, top3Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top3X, top3Y + 30);
            endShape(CLOSE);

            // cube top
            fill(239, 240, 235);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top3X , top3Y);
            vertex(top4X, top4Y);
            endShape(CLOSE);
            }
            translate(spacingX, 0);
            translate(0, -k);
    }
}

I started by creating a cube that could rotate 90 degrees as the mouse is dragged across the canvas By placing multiple cubes corner to corner, A sort of optical illusion happens.

Jamie Park – Project – 03

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E        Project #3

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

//angle variable for the rotating square
var angle = 0;

function draw(){
    background (0);
    noStroke();
    rectMode(CENTER);

    //rectangle on the right top corner that changes colors
    fill(100, mouseX, 200);
    rect(540, height / 6, 200, 160, 30, 0, 15, 20);

    //square on the left bottom that rotates when the mouse is moved
    push();
    translate(80, 390);
    rotate(180 + mouseX / 50, 300 + mouseY / 50);
    fill(mouseX, mouseX, mouseY);
    ellipse(30, 30, 70, 70);
    pop();
    angle = angle + 2;

    //bottom right square that changes size and color when the mouse is moved
    fill(mouseX, mouseY, 245);
    rect(width * 0.7, height * 0.7, mouseY, mouseY, 20);

    //ellipse on top of a rectangle that changes size and color
    fill(mouseX, mouseY, mouseY);
    ellipse(width * 0.7, height* 0.7, mouseX / 2, mouseX / 2);

    //the rectangles that shift y axis when the mouse is moved
    fill(255, 110, 163);
    rect(mouseX + 50, height / 3, 70, 300, 10);
    fill(194, 252, 3);
    rect(mouseX, height / 3, 100, 220, 10);
    fill(82, 217, 255);
    rect(mouseX + 150, height / 7, 60, 40, 10);
}

I had a lot of fun manipulating the colors, size, position and angle of various elements using x and y coordinates of the mouse. It’s interesting to see the various things one can do through using mouse coordinate!

Lanna Lang – Project 03 – Dynamic Drawing

lanna_project3_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 03 Dyanamic Drawing

var circW;
var angle1 = 0;
var angle2 = 0;

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

function draw() {
    background(0);
   
//rotating white rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    noStroke();
    fill(255);
    rectMode(CENTER);
    //the size will increase/decrease as the mouse moves
    rect(0, 0, mouseX + 200, mouseY + 150);
    pop();
    //rotating counter clockwise
    angle2 = angle2 - 5;
  
//rotating colorful rectangle
    push();
    translate(200, 200);
    rotate(radians(angle1));
    noStroke();
    //as the mouse moves around, the color of the rect changes
    fill(170, mouseX, mouseY);
    rectMode(CENTER);
    //the size of the rect will increase/decrease as the mouse moves
    rect(0, 0, mouseX, mouseY + 50);
    pop();
    //rotating clockwise
    angle1 = angle1 + 5;

//as the mouse goes right, the size of the circle increases  
    if (mouseX > width/2) {
      circW = (width/2 + 50);
    } else {
      circW = (mouseX);
    }
 
//as the mouse moves around, the color of the circles change 
    stroke(0);
    fill(mouseX, 170, mouseY);
    circle(mouseX, mouseY, circW);
    
}

I really wanted to play around with gradient colors and seeing the after-effects of each shape’s fast movements. At first, I wanted to experiment with having my background(…); line of code in my function setup() and how that would change my drawing, but it wouldn’t work with my rotating rectangles, so maybe I’ll experiment in a future project.

Siwei Xie-Looking Outwards-04

Using “Apparatum” created by panGenerator in 2018.

Apparatum is a custom made apparatus with digital interface that emits purely analogue sound. I admire the project because it takes inspirations from earlier studios and musician, then gives it a modern twist. The physical form is inspired by Polish Radio Experimental Studio, which uses magnetic tape as primary medium. Musically, it is inspired by Boguslaw Schaeffer, who conceived his own visual language of symbols that conveyed the cues for sound engineers. 

The creator, panGenerator, utilizes electron (node.js) and c running on teensy 3.2 to generate  interface and micro-controller elements. Creator’s artistic sensibility manifests by borrowing from Oskar Hansen’s “Black Room.” The original design was generated more than 100 years ago, yet panGenerator is able to add touch screen and modern studio elements to create a chic apparatus. The black and white combination would easily catch consumers and artists’ eyes today.

Link to original source is here.

Siwei Xie-Project 03-Dynamic Drawing

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-03

var angle = 0;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	// change background color when mouse moves
    background(205, mouseX/3, mouseY/6);
    noStroke();

    // 3 black objects in background follow mouse's movements,
    // creating a dynamic triangle with changing colors
    fill("black");
    triangle(0, 0, mouseX, mouseY, 0, 480);
    triangle(mouseX, mouseY, 640, 0, 640, 480);
    rect(0,0,640,mouseY);

    // enlarge mouth when mouse moves right
    // mouth position follows mouse
    fill("pink");
    circle(mouseX,mouseY+180,mouseX/2);

    // left rotating eye
    // eye position follows mouse
    fill("white");
    push();
    translate(mouseX-80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // right rotating eye
    push();
    translate(mouseX+80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // text enlarges when mouse moves right,
    // and follows mouse's verticle position
    textSize(mouseX/8);
    textFont("old english");
    text("Monster is roaring",0,mouseY/2);
 

}

I drew a monster which follows the mouse’s movements. The monster would roar if mouse moves right, and would “stay calm” if mouse moves left.

Paul Greenway – Project – 03

pgreenwa_dynamic_drawing

/* Paul Greenway
Section A
pgreenwa@andrew.cmu.edu
Project-03
*/


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

function draw() {
  
  background(170, 190, mouseY);
  noStroke();
  
  
  let maxX = constrain(mouseX, 0, width-mouseX);
  
  // left circles 
  

  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 0, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 50, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 100, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 150, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 200, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 250, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 300, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 350, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 400, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 450, mouseX/2, mouseY/5);
  
}

For this project I wanted to create a series of objects with different elements that could all be controlled by the mouse and would change simultaneously. I decided to use circles that would shift into rectangular lines as the mouse is moved.

Sarah Kang Looking-Outwards-03

Bjork wearing Rottlace, from media.mit.edu

Rottlace is a project fabricated by the Mediated Matter Group based at MIT. The series of masks is custom designed for the Icelandic singer-songwriter Bjork. From her newest album, Vulnicura, the Mediated Matter group drew inspiration from her messages of self-healing and portraying “the face without a skin”. The resulting product is a mask that encapsulates Bjork’s facial structure with a new layer of that represents a new identity.

Rottlace designed by the Mediated Matter Group, printed with Stratasys

The fiber tissues of the mask are computationally calculated with the curve directions of the point cloud data derived from Bjork’s facial scan. The bone-like locations are geometrically informed as another result from the data, but their material composition is graded from a spectrum of stiff to flexible, and from opaque to transparent-this information is derived as a function of geodesic distances given by the face scans.

What I admire about this work is how the project creates a collaboration between humanistic aspects and computational art. The world of generative, computational art opens many doors to encapsulating human elements and using digital technologies to convey it most accurately and elevate the information to new levels. The Mediated Matter Group combined both spectrums to fuse together a mask that encompasses this collaboration.

https://www.media.mit.edu/projects/rottlace/overview/

Sewon Park – PO – 03

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-03



var angle = 10 // used for rotation of squares later
function setup () {
createCanvas(640,480)

}

function draw () {
background(dist(320,240,mouseX,mouseY)); //background color dependent on mouse location from center



//Ellipse that moves with center at mouse location (Main Ellipse)
fill(mouseX,0,mouseY); // color dependent on mouse movement
stroke(0);
ellipse(mouseX,mouseY,mouseX/2,mouseY/2) // position and size dependent on mouse movement

 //Ellipse2 moves diagnally from main ellipse with mouse movement away from center. 
var x = width - mouseX
var y = height - mouseY 
fill(mouseX,0,mouseY) // color dependent on mouse movement
stroke(0);
ellipse(x,y,mouseX/2,mouseY/2)
x = x - 3
y = y - 3  

//Ellipse3 moves vertically from main ellipse from mouse movement away from center.
var x2 = 0 + mouseX
var y2 = height - mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x2,y2,mouseX/2,mouseY/2)
x2 = x2 - 3
y2 = y2 + 3

//Ellipse4 moves horizontally from main ellipse from mouse movement away from center.
var x3 = width - mouseX
var y3 = 0 + mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x3,y3,mouseX/2,mouseY/2)
x3 = x3 - 3
y3 = y3 + 3

//Square1 spins with its corner respect to main ellipse's center
fill(0,mouseY,mouseX); //color dependent on mouse movement
stroke(0);
push();
translate(mouseX, mouseY);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square2 spins with its corner respect to ellipse 2's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x, y);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square3 spins with its corner respect to ellipse 3's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x2, y2);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square4 spins with its corner respect to ellipse 4's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x3, y3);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

}

This project was probably the toughest yet as coordinating movements to your mouse movements is no easy task. I tried to incorporate two different types of movements through altering position and rotation in respect to change in cursor position.

Steven Fei – Project – 03


Steven Fei dynamic Drawing


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

var size = 8; //hexagon size that can change according to the mouse movement
let color = 0; //hexagon color that can change according to the mouse movement
var colorDir = 2; //the degree of change for the color change
let angle = 0; //the initial rotation angle for the hexagon
var dir = 1; // the growing direction of the hexagon, either positive or negative
var speed = 2; //the growing speed of the hexagon

function mouseMoved(){
    color = color +colorDir;
    if (color<0){
        colorDir = 2;
    } else if (color>255){
        colorDir = -2;
    }
    angle +=0.6;
    size += dir * speed;
    if(size<0){
        dir = 1;
        size = 0;
    }else if (size>60){
        dir = -1;
        size = 60;
    }
}

var diffx = 0;
var diffy = 0;
var circlex = 300;
var circley = 300;

function draw() {
    background(0);
//    locate the mouse position
    diffx = mouseX - circlex;
    diffy = mouseY - circley;
    circlex = circlex + 0.1*diffx;
    circley = circley + 0.1*diffy;
    fill("white");
    circle(circlex,circley,20);
    
    fill(color,37,213);
    var x = max(min(mouseX,300),5); // decide the starting point of the hexagon, when the mouse is far on the left the canvas, the hexagons may shrink together and when the mouse is far on the right of the canvas, the hexagons may move away from each other
    translate(300,240); //move to the center of the canvas
//    draw the basic shape for 1st Hexagon  
    beginShape();
    rotate(radians(angle));
    vertex(x/2,0);
    vertex(x/2+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+2*size*cos(radians(60)),0);
    vertex(x/2+size+size*cos(radians(60)),size*sin(radians(60)));
    vertex(x/2+size*cos(radians(60)),size*sin(radians(60)));
    endShape();
    // draw the basic shape for 2nd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.3,0);
    vertex(x/2+1.3+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+2*1.3*size*cos(radians(60)),0);
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 3rd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.5,0);
    vertex(x/2+1.5+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+2*1.5*size*cos(radians(60)),0);
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    endShape();
//  draw the basic shape for 4th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.7,0);
    vertex(x/2+1.7+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+2*1.7*size*cos(radians(60)),0);
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 5th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.9,0);
    vertex(x/2+1.9+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+2*1.9*size*cos(radians(60)),0);
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 6th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+2.1,0);
    vertex(x/2+2.1+2.1*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+2*2.1*size*cos(radians(60)),0);
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size*cos(radians(60)),2.1*size*sin(radians(60)));
    endShape();
    
    
}