SectionD – Page 17 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 3: Dynamic drawing

// Yash Mittal
// Section D
 
var r = 100;
var g = 60;
var b = 150;
var angle = 30;
var sizeX = 70;
var sizeY = 70;

function setup() {
    createCanvas(600, 450);

}

function draw() {

    background (r + mouseX, g + mouseY / 2, b + 10);

    frameRate(50);

    push(); //rectangle 1
    fill (r + mouseX - mouseY, g + mouseX, b + mouseY);
    translate (width / 2, height / 2);
    rotate (radians(angle));
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 2
    fill (r + mouseX / 3 - mouseY / 2, g + mouseX + 50, b + mouseY - 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 3
    fill (r - mouseX + mouseY * 2, g - mouseX + 10, b + mouseY / 2 + 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 4 
    fill (r - mouseY - mouseX * 4, g - mouseX + 40, b + mouseX / 5 + 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 5 
    fill (r - mouseY + 40 - mouseX * 7, g + mouseX / 2 + 200, b + mouseX + mouseY - 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();
    
    noStroke();

    var m = max(min ( mouseX, 600 ), 0 ); 
    var size = m * 350 / 600;

    fill(r + mouseY / 4, g - mouseY / 2, b + mouseY); // bigger circle fill
    ellipse (width / 2, height / 2, size); // bigger circle 

    fill(r - mouseY /2 + mouseY, g + mouseY / 4, b + mouseX); // smaller circle fill
    ellipse (width / 2, height / 2, size - 50); // smaller circle 


    var size1 = m * 350 / 600; // size for movaeble circle

    var w = constrain (mouseX, width / 2 - 1, width / 2 + 1); // x constrain
    var z = constrain (mouseY, 200, 250); // y constrain

    fill(r + mouseX, g - mouseY * 4, b + 20); // moveable circle fill 
    ellipse (w, z, size1 - 100); // moveable circle 
    

}

This project was really fun but also significantly harder. The part I struggled with the most was trying to get all the elements in the composition to be symmetrical and rotate / move at the same speed.

Project-03-Dynamic-Drawing

sketch

var angle = 0; //angle of rotation that will be determined by mouseX
var meow = 0; //canvas size that will be filled with cats

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

function draw() {
    background(220);
    //begin of rotate function
    fill("green");
    push();
    angle = angle + mouseX*0.01
    if (mouseX < 300){
       strokeWeight(1);
       rotate(radians(angle));
       rect(mouseX,mouseY,600 - mouseX, 450- mouseY);
    } else{
        rotate(radians(angle));
        strokeWeight(2);
        circle(mouseX,mouseY,mouseX+50,mouseY+70);
    }
    pop(); 
    //end of rotate

  
    //begin of cat eye
    strokeWeight(3);
    line(mouseX,mouseY,mouseX+mouseX*0.5,mouseY-mouseY*0.5);
    line(mouseX,mouseY,mouseX-mouseX*0.5,mouseY-mouseY*0.5);
    line(mouseX,mouseY,mouseX,mouseY-mouseY*0.9);

    strokeWeight(1);
    if (mouseX < 300){
        fill("magenta");
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }else if (mouseX < 450 & mouseX > 300) {
        fill("blue");
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }else {
        fill("orange")
        ellipse(mouseX,mouseY,mouseY,mouseX);
    }
    fill(0);
    ellipse(mouseX,mouseY,mouseX*0.2,mouseY*0.2);
    //end of cat eye



    //begin of cat
    meow = 0 + mouseX*0.7
    for (var x = 5; x < meow; x = x+50){
        for (var y = 5; y < meow; y = y+50){
            if(mouseY < 300){
                push();
                translate(x, y);            
                drawCat();
                pop();
            }
        }   
    }   
    //end of cat

//bottom rectangle and text
fill("brown");
rect(0,400,600,50);

text("Welcome to Meow World",425,390);
}

function drawCat() {
    if (mouseX>500){
        fill(random(0,255),random(0,255),random(0,255));
    }else{
        fill("yellow")
    }
    triangle(7, 0, 0, 7, 14, 7);
    triangle(21,0,28,7,14,7);
    rect(0,7,28,25);
    fill(0);
    ellipse(10,10,4,7);
    ellipse(18,10,4,7);
    ellipse(14,19,6,4);
    line(-3,11,8,15);
    line(8,15,-3,21);
    line(21,15,38,11);
    line(21,15,38,21);
}

LO: Computational Fabric

For this week’s blog, I chose the project ‘Glass’ by Mediated Matter Group at MIT Media Lab. I initially came across the MIT Media Lab in the Netflix show called Abstract. This project stood out to me because of the fact that I had no idea about how flexible / versatile glass can be if used with proper technology and algorithms. It was very impressive seeing how the 3D printer’s algorithms layers the melted glass on top of each other in a way that it does not spill over or ruin the design. The versatility that is enabled by the geometrical and optical variation driven by the form, transparency and color variation can manipulate the light emissions and the reflections, making the glass much more complicated than I had thought of.

Link to ‘Glass’ by Mediated Matter Group – https://www.media.mit.edu/projects/g3p/overview/

LO: Computational Fabrication

Megumi Igarashi, or Rokudenashiko, which means “good-for-nothing kid,” made waves in the news when she was found guilty of obscenity in 2013 and 2014. This is because of the data distribution of her 3D model, “Pussy Boat,” molded after a scan of her own vagina. The vagina is a common motif in her art, as she tries to normalize the vagina in Japanese society. Many criticized the Japanese government for her arrest because of the hypocrisy, like how the Festival of the Steel Penis is held every year in Kawasaki, filled with phallic-shaped merchandise and food. Her studio was raided by police and they confiscated her more “realistic” art pieces. What’s left of her art is “Manko-chan,” a cute little character that is, well, a vagina. Still, it’s subversive how playful her art is when the conversation around female anatomy is shrouded in shame and stigma. Last year, the Japanese Supreme Court rejected her appeal for the obscenity charge. She will be fined ¥400,000 ($3,740).

https://www.japantimes.co.jp/news/2020/07/16/national/japan-top-court-rejects-vagina-kayak-artists-obscenity-appeal/

https://www.vice.com/en/article/ae5pvk/in-the-studio-with-japans-controversial-vagina-artist

Japanese artist jailed for vagina boat says outraged, vows legal fight | Reuters.com — Megumi Igarashi with the “Pussy Boat.”

Japanese court rules vagina figurines 'pop art', not obscenity | Reuters — Igarashi and “Manko-chan” figurines.

Project 3 Dynamic Drawing

sketch

//Michelle Dang (mtdang) section D
var r = 0; //red
var g = 0; //green
var b = 0; //blue 
var s = 2; //stroke weight

var f = 0; //fill color black

function setup() {
    createCanvas(450, 600);
    background(0);


    }

function draw() {
    translate(width/2, height/2); // center origin
    fill(f, 50);
    stroke(r, g, b, 100); 
    strokeWeight(s);
    rotate(mouseX); //rotate ellipse
    ellipse(0, 0, mouseY, mouseX); //elipse size based on mouse
    ellipse(0, 0, mouseX, mouseY); //elipse size based on mouse
    ellipse(0, 0, 30,30); // center ellipse for clear indication of stroke weight change

    mouseX -= .5;




    if (mouseX < 450 & mouseX > 0 && mouseY < 600 && mouseY > 0) { //when mouse is farthest form center, make ellipse purple
        r=127;
        g=0;
        b = 255;
    }
        if (mouseX<405 & mouseX > 45 && mouseY < 540 && mouseY > 60 ) { //blue stroke
        r = 0;
        g = 0;
        b = 255;
    }
    if (mouseX < 360 & mouseX > 90 && mouseY < 480 && mouseY > 120) { //green stroke
        r = 0;
        g = 255;
        b = 0;
 }  if (mouseX < 315 & mouseX > 135 && mouseY < 420 && mouseY > 180) { //orange stroke
        r = 255;
        g = 128;
        b = 0;
    }
    if (mouseX < 270 & mouseX > 180 && mouseY < 360  && mouseY > 240) { // when mouse is closest to center, make ellipses red 
        r = 255;
        g = 0;
        b = 0;
    
    }
}

    function mousePressed() {
      s = random(1, 20); // if mouse is pressed, randomly change strokeWeight
    }

Looking Outwards 3

Institute for Computational Design (ICD) and the Institute of Building Structures and Structural Design (ITKE) have used an interdisciplinary approach of biomimetic, computing, and robots to create research pavilions between 2010-2021. The first pavilion they created intentionally computes the design according to the characteristics and constraints of the material choices and physical form. Because they used birch plywood, they considered the elasticity of the wood and how bending flat strips that were robotically manufactured can connect the modular pieces. I am impressed with how the connections of the modules allow reinforcement of each other — it seems that adhesives or additional reinforcers were not used. I wonder how they were able to test out the structural integrity pavilion when computing the design — how did they know that the pavilion would not collapse? How could different materials affect the design?

https://www.itke.uni-stuttgart.de/research/icd-itke-research-pavilions/icd-itke-research-pavilion-2010/

Project 3: Dynamic Drawing

Dynamic Drawing



function setup() {
    createCanvas(500, 500);
    
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    //setting up the background color
    let firstColor = color(45,0,85); //first color to be blended from
    let secondColor = color(219,146,7); //second color to be blended from
    bldval = map(mouseX, 0,width,0,1,true); //the blending proportion 
    bColor = lerpColor(firstColor,secondColor,bldval); // the background color based on mouseX
    background(bColor); //setting background 

    //vertical and horizontal rectangle
    noStroke()
    rectColor = lerpColor(secondColor,firstColor,bldval);
    move = map(mouseY,0,height,300,320,true); //constraining the position of the horizintal rectangle
    fill(rectColor);
    rect(mouseX-40,0,80,height); //vertical rectangle
    rect(0,move-40,width,80); //horizontal rectangle

    //circle on top right moving to top left
    fill(255);
    ellipse(450 - mouseX,100,30,30);
    fill(rectColor);
    crcWidth = 100 - mouseX/2;
    crcHeight = 200 - mouseX/2;
    push();
    translate(450 - mouseX,100);
    rotate(0+mouseX);
    ellipse(0,0,crcWidth,crcHeight);
    pop();
      
    //rotating white circles around mouse X and mouse Y
    push();
    fill(255)
    translate(mouseX,mouseY);
    rotate(mouseX/10);
    ellipse(0,-30,+10,10);
    ellipse(0,30,-10,10);

}

I enjoyed doing this. The hardest idea was possibly to start the project. After that it was pretty quick.

Project 03: Dynamic Drawing

dynamic drawing

//Max Stockdale, Section D

var R = 50; //color   
var G = 100;
var B = 255;

var angle = 0; 

var xs = 15; //scale
var ys = 20;

var circlesize = 80;

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
}


function draw() {

    if (mouseX < (width / 2) & mouseY < (height / 2)){   //background changes color in different quadrants 
        background(251,215,90);
    } else if (mouseX < (width / 2) & mouseY > (height / 2)){
        background(156,158,251);
    } else if (mouseX > (width / 2) & mouseY < (height / 2)){
        background(198,149,198);
    } else {
        background(36,110,237);
    }

    noStroke();


    var m = max(min(mouseX, 600), 0);  //maintaing size of ellipses
    var size = m * 300 / 600;


    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2); //ellipses
    ellipse(width / 2, height / 2, size, size);

    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);

    fill(R + mouseY / 2, G + mouseY, B + mouseX / 2);
    ellipse(550, 225, size * 0.1 , size * 0.1);

    fill(R + mouseY /2, G + mouseY, B + mouseX /2);
    ellipse(30, 225, size * 0.1, size * 0.1);
    
    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 1


    //side circle_1
    translate(-150, + 100);
    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);//ellipses
    ellipse(width / 2, height / 2, size, size);

    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);


    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
    
    fill(255);
    rect(mouseX , mouseY, 50, 50); //x, y position square 2
    
    


    //side circle_2
    translate(+300, -200);
    //ellipse 1
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size, size);

    //ellipse 2
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    //ellipse 3
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    //ellipse 4
    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);


    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 3


    fill(36,110,237); //spinning square(blue)
    push();
    translate(-75,+175);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    fill(251,215,90); //spinning square(yellow)
    push();
    translate(+375,+475);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    
    angle = angle + 0.5;  
    xs = width - (0.5 * mouseX); //scale based on x
    ys = height - (0.5 * mouseY); //scale based on y

}

For this project, I wanted to play around with the scale of circles and the gradient of the colors. I also wanted to include a background that changes color based on the mouse position, with spinning squares on the corners.

Looking Outwards 03: Computational Fabrication

One project I found really interesting was John Edmark’s work. He creates these 3D printed sculptures that use the fibonacci sequence to create these cool optical illusions. His series is called, “Blooming Zoetrope Sculptures,” and these pieces work when they are spun and lit by a strobe light. From what I know about the code, each of the pedals are placed at a different distance from the center and if you follow a single pedal, it looks like it works down and out of the sculpture. Knowing the basics of the fibonacci sequence, it works using the golden ratio where each number in the sequence is the sum of the two numbers that precede it. Something I really admire about it, is that these pieces resemble nature and can be represented using a mathematical equation. Overall, his work inspires me to learn more about coding and learn how to make these really unique patterns.

Link: https://www.instructables.com/Blooming-Zoetrope-Sculptures/

Dynamic Drawing

file

//Georgia Miller
//15-104 Section D
//mouse controls change from moving along x axis
function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(0);
translate(225,mouseX); //center //mouseX changes position
var sqrWidth = 50;
if(mouseX<225){ //clockwise rotation
rectMode(CENTER);
rotate(radians(frameCount)); //typically 10 frameRate
}
if(mouseX>225){ //counterclockwise rotation
rectMode(CENTER);
rotate(radians(-frameCount)); //typically 10 frameRate
}
srqWidth = sqrWidth + 10 * mouseX; //for size change
if (mouseX<225) {//Color change to greys on left
    fill(255);
    rect(0,0,mouseX/2+120,mouseX/2+120); //mouse for size change
    fill(220);
    rect(0,0, mouseX/2+100,mouseX/2+100);
    fill(185);
    rect(0,0,mouseX/2+80,mouseX/2+80);
    fill(150);
    rect(0,0,mouseX/2+60,mouseX/2+60);
    fill(115);
    rect(0,0,mouseX/2+40,mouseX/2+40);
    fill(80);
    rect(0,0,mouseX/2+20,mouseX/2+20);
    fill(45);
    rect(0,0,mouseX/2,mouseX/2);
}
if (mouseX > 225){ //colorchange to rainbow on right
    fill(255,0,255);
    rect(0,0,mouseX/4+120,mouseX/4+120);
    fill(255,0,0);
    rect(0,0, mouseX/4+100,mouseX/4+100);
    fill(255,150,10);
    rect(0,0,mouseX/4+80,mouseX/4+80);
    fill(255,255,0);
    rect(0,0,mouseX/4+60,mouseX/4+60);
    fill(0,255,0);
    rect(0,0,mouseX/4+40,mouseX/4+40);
    fill(10,215,255);
    rect(0,0,mouseX/4+20,mouseX/4+20);
    fill(0,0,255);
    rect(0,0,mouseX/4,mouseX/4);
} 

}

I had an idea coming in and got really stuck so I decided after a while to change my idea. I struggled trying to work around my translation for a while especially when considering up and down motions. It was weird to see all my mistakes before I put my background in because everything kept looping over each other because of my frameRate, which created this cool circle around my rotating square.