Mihika Bansal – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Mihika Bansal – Project – 07 – Curves

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5


function setup() {
    createCanvas(480, 480);
}
   
  
function draw() {
    
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    background(0, 0, 0, 75); 

    drawHypotrochoid(); //color one
    drawBlackHypotrochoid(); //black one 
    drawBlackHypotrochoid2(); //black one
    drawCenter(); //center flower ellipse 
    frameRate(500); 
     
}

function drawHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 230; //radius and parameters 
 
    var r = my * 0.4; //color variables
    var g = 100; 
    var b = mx * 0.4; 

    noFill();
    stroke(r, g, b); 
    strokeWeight(4); 

    var a1 = map(mx, 0, width, 0, 20);
    var b1 = map(my, 0, height, 0, 1); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawBlackHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 380; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(mx, 0, width, 0, 25);
    var b1 = map(my, 0, height, 0, 5); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}
function drawBlackHypotrochoid2(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 300; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(my, 0, width, 0, 30);
    var b1 = map(mx, 0, height, 0, 2); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawCenter(){
    translate(width / 2, height / 2);
    noFill();
    
    var mx = constrain(mouseX, 0, 480); // define constrain variables
    var my = constrain(mouseY, 0, 480);

    var angle = map(mx, 0, width, 0, 360);// define draw parameters
    var a2 = 70 + (.3 * mx);
    var b2 = 70 + (.3 * mx);

    var r = my * 0.5; //color variables
    var g = 50; 
    var b = mx * 0.5; 

    // define stroke
    strokeWeight(1);
    stroke(r, g, b);
    // define shape parameters
    beginShape();
    rotate(radians(angle));
    for (var t = 0; t < 160; t += 2.5){

        var x = a2 * (cos(t)); //equation function 
        var y = b2 * (sin(t));
        curveVertex(x,y);
        }
    endShape();
}

This project was quite confusing to grasp at first, but once I had an idea of what I wanted to do, I was able to explore the functions in an interesting manner. I spent a good amount of time playing around with my numbers in my code to get interesting interactions with the way that the curve moves, and forms. I was also able to layer curves in a way that created fun patterns. Here are some screen shots from the project at different states of the mouse location.

Screenshots from the code

Mihika Bansal – Looking Outwards – 07

For this assignment, I analyzed the project, The Hindu Temple as a Fractal of Cosmology. This is a study of recursion within architecture. The article that I am looking at specifically is looking at the patterns that the architectures of these spaces have used when making these spaces.

Specifically the author of this article comments that the manner in which these temples is using the fundamentals of parametric architecture. They use a system called “Tala” which allow them to compute dimensional analysis of proportions. The way the recursion works in verbal times is expressed through this quote:

“The layer of prahara (projection) will be above the chadya (eave of the roof). This is to be repeated again and again on the spire over the spire. A fraction of the prahara is to be constructed and again the spires are to be constructed. Each of the upper spires will be sprouted out with a measurement equal to half the size of the lower spire – Ksirarnava, 7.113”

Indian Temple Fractals — An example of the temple in its recursive state

Link to post: https://www.dataisnature.com/?p=2138

Mihika Bansal – Project 06 – Abstract Clock

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5


function setup() {
    createCanvas(500, 500);
}
   
  
function draw() {
    
    push(); 
    background(250, 141, 98); // making my background canvas
    translate(width / 2, height / 2); 
    pop(); 

    var s = second(); 
    var m = minute(); 
    var h = hour();

    let sAngle = map(s, 0, 60, 0, 360); 
    let mAngle = map(m, 0, 60, 0, 360);
    let hAngle = map(h, 0, 24, 0, 360); 

    translate(width / 2, height / 2); 
    
    //drawing the second hand circle 
    fill(255);
    noStroke(); 
    push(); 
    for (var i = 0; i < s; i ++){
        rotate(radians(sAngle)); //creates a pattern based on the second that it is currently 
        ellipse(0, -210, 10, 10); 
    }
    pop(); 

    //drawing the minute hand circle 
    push();
    fill(178, 219, 213);
    for (var j = 0; j < m; j ++){
        rotate(radians(mAngle)); // creates a pattern based on what minute it is 
        ellipse(0, -135, 18, 18); 
    }
    pop(); 

    //the hour hand 
    push();
    fill(43, 97, 109);
    for (var k = 0; k < h; k ++){ 
        rotate(radians(hAngle)); //creates a pattern based on what hour it currently is, displays that number
        ellipse(0, -50, 25, 25); 
    }
    pop();
     
}

This project was very fun to create. Playing with animations based on time was very interesting. The patterns that formed through the integration of for loops and based on the number for minutes and seconds was very pleasing.

Mihika Bansal – Looking Outwards – 06

A project that I find to be interesting in terms of its randomness emphasizes how easy it is for the artist to get a random result when he takes the main bulk of the creation of the piece out of his hands. The piece I specifically am going to talk about it Walead Beshty’s FedEx Sculptures series.

The artist creates a glass box that is the exact dimensions of a FedEx box and ships it to the site at which there is going to be an exhibit. The amount that the box has shifted and broken is random and based on the way the box is handled in its shipping. The amount of breakage is also dependent on the time and space through which the box travels which helps reduce the degree of randomness to an extent. While there is no concrete algorithm the artist follows, he has a distinct process he has conducted for the past many years.

He works on these projects by himself and has been creating these sculptures since 2005.

Link to work: https://mesh-magazine.tumblr.com/post/104686699736/shihlun-walead-beshtys-fedex-sculptures

One of the artist’s sculptures displayed in an exhibit

Mihika Bansal – Project 05 – Wallpaper

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5

var diam = 66; //diameter
var Cdist = 198; //distance between 3 circles
var rad = 33; //circle radius 



function setup() {
    createCanvas(594, 582);
    background(255, 238, 173); // making my background canvas
    

    for(var i = 0; i < 10; i ++){ //determining # of rows 
        if(i % 2 == 0){ // determining if row is even or odd 
            for(var j = 0; j < 3; j ++){ // three of the first kind of ellipse in each row
                
                //first ellipse pattern 
                var posX1 = rad + Cdist * j; // determing x position of each of the 3 ellipses
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //determing y position of each of these ellipses
                //var posY1 = 33; 
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX1, posY1, diam, diam); //making blue ellipse
                fill(255, 204, 92);
                ellipse(posX1, posY1, 55, 55); //making yellow ellipse
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX1, posY1); //making center lines
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
            }
            for(var a = 0; a < 3; a ++){ // will be three of these ellipses

               //second ellipse pattern 
                var posX2 = (3 * rad) + Cdist * a; // the position of the second ellipse, which is 3 * radius
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 66, 66); //making the target like ellipses
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX2, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 15, 15);
                strokeWeight(0);
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern 
                var posX3 = (5 * rad) + Cdist * b; //the base distance is 5 times the radius
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX3, posY1, 66, 66); //making the ellipse bases
                fill(150, 206, 180);
                ellipse(posX3, posY1, 54, 54);


                push(); 
                strokeWeight(1); //making the rotated squares
                stroke("white"); 
                rectMode("center"); 
                translate(posX3, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX3, posY1, 34, 34); //center ellipse
            }
        }
        else{ //if row is odd 
            for(var j = 0; j < 3; j ++){
                
                //first ellipse pattern, which was the third pattern 
                var posX1 = 2 * rad + Cdist * j; //want to fit in the gaps between the circles
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //using the ratio to make the circles fit exactly with eachother 
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX1, posY1, 66, 66); 
                fill(150, 206, 180);
                ellipse(posX1, posY1, 54, 54);


                push(); 
                strokeWeight(1); 
                stroke("white"); 
                rectMode("center"); 
                translate(posX1, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX1, posY1, 34, 34); 
                
            }
            for(var a = 0; a < 3; a ++){

               //second ellipse pattern, which was actually the first ellipse 
                var posX2 = (4 * rad) + Cdist * a; //fits in between the gaps again
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX2, posY1, diam, diam); 
                fill(255, 204, 92);
                ellipse(posX2, posY1, 55, 55);
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX2, posY1); 
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
                
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern, which was actually the second
                var posX3 = (6 * rad) + Cdist * b;
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX3, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 15, 15);
                strokeWeight(0);

                //drawing first ellipse in the row for even rows, at the position 0 
                fill(255, 111, 105); 
                ellipse(0, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(0, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(0, posY1, 15, 15);
                strokeWeight(0);
            }

        }
    }

   
    noLoop(); 
}
   
  
function draw() {

  
}

This project was really fun to do. I really enjoyed coming up with distinct ellipse patterns to start with, then figuring out how to put them together to create a new pattern. I tried multiple iterations of what the circles would look like overlapped, but I realized it looked the cleanest in this manner.

Mihika Bansal – Looking Outwards – 05

The artist that I want to look at for his computer 3D graphics is Peter Nowacki. The particular piece of his that I found to be interesting was his HBO – Home of the Original. The piece itself was made in 2014, and it was part of an ad campaign for an HBO series he was publishing in Asia. The process that he followed to create the piece itself was interesting as well because it focused on lighting and shading in a way that made it pop.

Peter works for a company that specifically creates these hyper-realistic looks for other companies. A lot of brands want this look because it is very eye-catching and the 3D graphics do a good job of conveying something that otherwise would not be conveyed well.

Mihika Bansal – Project 04 – String Art

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 4

var x1Step = 5; 
var y1Step = 5; 

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

function draw() {

    background (255); 
    fill(0); 
    rect(50, 0, 300, 300); 

    stroke(255, 251, 217); 
    for(var j = 1; j <= 30; j++){
        line(50, 0 + y1Step * j, width / 2 - x1Step * j, 0); 
    } // curve with flats on left and top in the top left curving downwards 
    for(var j = 1; j <= 30; j++){
        line(50, height - y1Step * j, width / 2 - x1Step * j, height); 
    } // curve with flat on left and bottom, bottom left, curving upwards 
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 - y1Step * j, width - 50 - x1Step * j, 0); 
    } // curve with flat on top and right, top right, curving downwards 
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 + y1Step * j, width - 50 - x1Step * j, height); 
    } // curve with flat on right and bottom, bottom right, curving upwards

    stroke("white"); 
    for(var i = 1; i <= 30; i++){
        line(width / 2, 0 + y1Step * i, width / 2 + x1Step * i, height / 2); 
    } //curve starting in middle on top right, curving upwards, flat side is in middle of canvas
    for(var x = 1; x <= 30; x++){
        line(width / 2, height - y1Step * x, width / 2 + x1Step * x, height / 2); 
    } // curve starting in the middle on bottom right, curving downwards, flat sides are on the middle of canvas 
    for(var x = 1; x <= 30; x++){
        line(50 + x1Step * x, 0, width / 2, 0 + y1Step * x); 
    } //curve on top left , with flat part on top and middle, curving downwards
    for(var x = 1; x <= 30; x++){
        line(50 + x1Step * x, height, width / 2, height - y1Step * x); 
    } // curve on bottom left, with flat on bottom and middle, curving downwards

    stroke (194, 237, 231)
    for(var j = 1; j <= 30; j++){
        line(width / 2, 0 + y1Step * j, width / 2 - x1Step * j, height / 2); 
    } // curve in top left, with flat part in middle on both sides, curving upwards
    for(var j = 1; j <= 30; j++){
        line(width / 2, height / 2 + y1Step * j, width / 2 + x1Step * j, height); 
    } // curve  in bottom left, with flat in middle, curving downwards 
    for(var j = 1; j <= 30; j++){
        line(50 + x1Step * j, height / 2, width / 2, height / 2 + y1Step * j); 
    } // curve with flat in the middle and bottom, in the bottom right, curve upwards
    for(var j = 1; j <= 30; j++){
        line(width / 2 + x1Step * j, 0, width / 2, height / 2 - y1Step * j); 
    } // curve with flats on the top and the middle, in the top right, curve downwards 

    stroke(252, 204, 212); 
    for(var j = 1; j <= 30; j++){
        line(50, height / 2 - y1Step * j, width / 2 - x1Step * j, height / 2); 
    } // flat on the left side and the middle, curve upwards, in the top left 
    for(var j = 1; j <= 30; j++){
        line(50, height - y1Step * j, 50 + x1Step * j, height / 2); 
    } // flat on the left and the middle, in the bottom left, curve downwards
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 - y1Step * j, width / 2 + x1Step * j, height / 2); 
    } // flat on the middle and middle, in the top right, curving upwards
    for(var j = 1; j <= 30; j++){
        line(width - 50, height - y1Step * j, width - 50 - x1Step * j, height / 2); 
    } // flat on the right and the middle, in the bottom right, curbing downwards 
 
}

I really enjoyed this project. I have made string art before by hand using the actual string and nails and wood, so it was interesting making it through the computer this time.

Mihika Bansal – Looking Outwards – 04

The project that I think is incredibly interesting for this sound art, which is the Eternal Birth and Death of Infinite Parallel Universes, which is also the multiverse. This project focused on the development of a black hole. The project itself has a generative sound system.

The actual physics are a little bit above my head to truly understand the graphics. The way that the program works creates generative art that adapts that cycles throughout the life cycle of the art itself, which means that it is constantly changing and adapting to the art. The installation was staged in the first time for Borgo de Colonne 28, a church.

The exhibit itself consists of a vertical projection of 7.5 meters high and two large mirroring surfaces that generate an infinite reflection of the image towards the sky and the center of the earth. The project itself was created by Lee Smolin, an American theoretical physics.

Link to Project: https://www.creativeapplications.net/maxmsp/multiverse-the-eternal-birth-and-death-of-infinite-parallel-universes/

Mihika Bansal – Project 03 – Dynamic Drawing

sketch

/*
Mihika Bansal 
Section E 
mbansal@andrew.cmu.edu
Project-01
*/
var angle1 = 0; //rotates one direction
var angle2 = 0; //rotates the other direction
var rgb1 = 0; //random color generator 1
var rgb2 = 0; //random color generator 2
var dimension = 20; //size of elements
function setup() {
    createCanvas(600, 480);
  }

function draw() {

    rgb1 = random(0, 300); //randomizing here creates the flashing effect 
    rgb2 = random(0,275); 
    dimension = random(5, 60);
    
    if (mouseX < width / 2) { //determine if the mouse is on the left of the canvas 
        background(0, 0, 51);
        push();
        rotate(radians(angle1)); //creating the rows of shapes in the top left corner
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8); // the multiplication randomizes the color more
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); //the distance from the rotation point is dependent on the position of mouse y 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 += 2; 

        push(); 
        translate(width - 5, height - 5); //creating the line of shapes in the bottom right corner
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8);
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 -= 2; 
    }
    else { //when mouse is on right of screen
        background(77, 0, 0);
        push();
        rotate(radians(angle1));
        fill(rgb1 * 0.25, rgb2 * 0.4, rgb1 * 0.71);
        rect(mouseY * 0.8, mouseY * 0.57, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.8, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 -= 2; 

        push(); 
        translate(width - 5, height - 5);
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.54, rgb1 * 0.8);
        rect(mouseY * 0.86, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.35, rgb1 * 0.64); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension*1.5, dimension * 1.5); 
        fill(rgb1 * 0.77, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 += 2; // changes angle 
       
    }

}

With this piece I worked with direction of the rotation being dependent on the position of the mouse. I also made the distance of each element dependent on the y position of the mouse. This project was interesting and helpful in understanding the random function and the rotation function.

Mihika Bansal – Looking Outwards – 03

One piece of digital fabrication work that I find to be particularly interesting is the Arabesque Wall. This piece is particularly interesting due to the large variety of shapes and textures the artist is able to integrate into the piece. The different patterns that are made would be impossible to make by hand so it really demonstrates the true capabilities of machine and what they can do in terms of creating new and unique items.

The actual software is based on the tilting of the surfaces. The software works on this point until a structure that is composed of multiple surfaces and points comes about. The mathematical precision of this piece is also very interesting and something that could use more exploration.

The artists of this piece are Benjamin Dillenburger and Michael Hansmeyer. The actual printing of the piece took 4 days.

Link to Project: http://benjamin-dillenburger.com/arabesque-wall/