Month: September 2021

Project 3: Dynamic drawing

sketch
// 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);
}

Project 3: Dynamic Drawing

The project that I found inspirational is Benjamin Dillenburger’s Numerical Material. This project was created in 2021.

Numerical Material. This photo portrays the overall form of the artwork.

Numerical Material. This photo potrays the details of the algorithm of how the artwork was created when observed closely.

I admire this project because, the overall shape of the artwork has curves and has circular and soft lines and forms, yet when looked closely, these curves are created my geometric shapes of lines (sticks). While the sticks are white, the curvature of the surface creates positive and negative spaces as well as shadows, and lighter spaces which make the artwork very interesting to observe. The “set of rules” of parametric object are that the multiple sticks are overlapped onto each other to create a curve, and to connect the “curves” in a technical aspect to have the artwork itself hold, there are supporting sticks that overlap between these curves.

Link to Artwork

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/

Example of 3D printed glass objects

Project-03-Dynamic-Drawing

sketch

var r = 255;
var g = 255;
var b = 255;

function setup() {
    createCanvas(600, 450, WEBGL);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background (220);
  fill(r,g,b);
  
  //to create that spin that is constant
  rotateX(frameCount*0.01);
  rotateY(frameCount*0.01);
  rotateZ(frameCount*0.01);
  
  //the cones that are in different positions and sizes change with the mouse
  cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
  rotate(radians(90));
   cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
   rotate(radians(90));
   cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
  rotate(radians(90));
  cone(mouseX,mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (100,100);
  cone(mouseX, mouseY);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  translate (-100,-100);
  cone(mouseY, mouseX);
  
}

// colors change when mouse is pressed 

function mousePressed () {
  
  r -= 20;
  g -= 20;
  b -= 20;
  
}

This was alot of fun! Especially working with 3D objects!

Project 3: Dynamic Drawing

luca p3

var bs = 50//boxsize
var bv = 5//boxspeed
var bx = 300//box x position
var by = 200//box y position
var an = 180//box angle

function setup() {
    createCanvas(600, 450);
    background(254, 250, 224);
    rectMode(CENTER)
    frameRate(100)
    noStroke();
}

//background
function draw(){

    rotate(radians(an));
    an=an+50;

    function mousePressed(){
        an=an-50
    }

    //colorchange
    if(mouseX<width/2 & mouseYheight/2)
        fill(220, 47, 2);
    if(mouseX<width/2 & mouseY>height/2)
        fill(250, 163, 7);

    rect(bx,by,bs,bs);

    if(mouseX & mouseY >= 600 || mouseY && mouseX >= 450)
        bs=bs+0.1;


}

I find this project quite challenging because we have a lot more variables to consider. I think it was easy to create an interaction that is totally random but it was difficult to create an interaction that was consistent every time. Through this project, I learned more about coding with multiple variables.

Dynamic Drawing

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

function draw() {
    background(0);
    fill(255, 255, 0);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    ellipse(10 + m * 190.0 / 400.0, height/4, size, size); //yellow circle
    fill(255, 0, 0);
    ellipse(200 + m * 190.0 / 400.0, 3*height/4, size, size); //red circle
    size = 350 - size;
    fill(0, 0, 255);
    ellipse(200 + m * 190.0 / 400.0, height/4, size, size); //blue circle
    fill(0,255,0); 
    ellipse(10 + m * 190.0 / 400.0, 3*height/4, size, size); //green circle

}

I really liked the live movements of the squares in the example, so I took my own spin-off of it using circles. The trickiest part was figuring out how to make it change size diagonally.

Looking Outwards – 02

Michael Hansmeyer is an architect who specializes in computational design. His projects range from entire theatre sets to very detailed lighting designs that are entirely visualized by a computer. I admire Hansmeyer’s work because it allows him to think of his architecture as a set of processes to generate objects. One example is his work on the set for Mozart’s opera in 2018. In this stage set he focuses on a grotto design in which the idea is created by the computer after he defines a set of processes the computer needs to go through to create a design. The algorithm he uses is within a CAD program where he can set rules and limits for the computer to follow. Within these CAD programs there’s some limits in what can be designed by the computer and the amount of information the designer has to give the program initially. As a result the artist’s sensibilities manifest in the outcome of the computer’s processes. This makes his work have a unique character that not only describes the computer’s abilities but also Hansmeyer’s creative bias.
Link: https://www.michael-hansmeyer.com/zauberfloete

LookingOutwards-03

A particular work that I find inspiring is Untitled by Alexander Ross. To describe the artwork, it looks like a collection of shapes like triangles and squares that are wedged in larger circles all together. It almost looks like skin cells under a microscope. The fact that I can’t exactly pinpoint what it is inspires me as it really does leave it up to the viewer to interpret the collection of shapes and spaces. I am unsure about the algorithms that the author uses, but he uses it well. Alexander Ross’s artistic sensibilities manifest in this piece as he is trying to leave it up to a larger audience. With this mission, it forces the artist to portray their art a very specific way making them use their artistic sensibilities. In conclusion, I really enjoy looking at this piece and the message that it has to offer.

http://alexanderross.work/5k7lvcbhfnc66uxbjpvme1c5zqvet0

Project-03: Dynamic Drawing

sketch
function setup() {
    createCanvas(600, 450);
    background(100);
    fade = 0;
}

function draw() {
    var xmousePos = max(min(mouseX, 600), 0);
    var ymousePos = max(min(mouseY, 450), 0);
    var color = dist(300, 225, xmousePos, ymousePos);


    stroke(255, color, 0);
    //strokeweight increases as cursor moves further away from center
    strokeWeight(dist(300, 225, (xmousePos), (ymousePos))); 
    //drawing line that follows the cursor
    line(300, 225, xmousePos, ymousePos);
    //
    line(300, 225, xmousePos, -ymousePos);




    





}

I wanted to work with gradually changing colors particularly in projects to create a smooth gradient brush effect. Next time I want to try making curved lines as well.