Author: Jai Sawkar

Jai Sawkar Project 07 – Composition with Curves

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project 07: Abstract Clock

function setup() {
    createCanvas(480, 480);
    frameRate(60);
}

var pts = 200; 

function draw(){
    background(0);

    // using push & pull to orient the Bicorn 
    push()
    translate(width/2, height/2) //center focused
    drawCurve();
    pop();

    push();
    rotate(PI);  //upside down
    translate(-width/2, -height/2); 
    drawCurve();
    pop();

    push();
        rotate(PI/2); // clokcwise 
        translate(width/2, -height/2)
    drawCurve();
    pop();

    push();
    rotate(-PI/2); //counter clockwise
        translate(-width/2, height/2)
    drawCurve();
    pop();

}

function drawCurve(){

    //fill(255)
    noFill();
    stroke(255)
    //noStroke();
    var g = map(mouseX, 0, width, 0, width/2); //moving the parameters of mouse x
    var g = map(sq(mouseY), 0, height, 0, 1); //moving parameters of mouse y

    beginShape();
        for (i = 0; i < pts; i++){
            var j = map(i, 0, pts, 0, radians(360));
            x = g * sin(j); //forumla
            y = (g * cos(j) * cos(j) * (2+ cos(j))) / (3 + sin(j) * sin(j)); //formula
            var w = map(mouseX, 0, height, 1, 70) //remapping width
            var h = map(mouseY, 0, width, 1, 60) //remapping heigth
            ellipse(x, y, w, h); //ellipse
        }
        endShape(CLOSE);
}

For this project, I found the Bicornal Curve interesting, so I decided to explore its possibilities. Once I drew it using the math equation provided, I found it a tad dull. I then decided to create 3 more, creating 4 bicornal curves

State 1
State 2
State 3
State 4

Jai Sawkar – Looking Outwards – 06

wave fields IV (2016)

This week, I found the work of Holger Lippmann. Lippmann uses a rework of an ongoing script to slowly morph lines and curves into landscape paintings.

Most of the technical aspects are pretty simple, adding a mix of ellipses, noise, and color arrays. He also notes that these numbers are randomly generated, and he creates these drawings by sorting the values and allowing the randomness to blossom.

I always find computational designs so interesting, as changing just one aspect of the control can play a discernible role in changing the project completely.

Link

Jai Sawkar Project 06 – Abstract Clock

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project 06: Abstract Clock

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(300, 480);
    millisRolloverTime = 0;
}

function draw() {
    background('BLACK'); 
    
    // Current time
    var H = hour();
    var M = minute();
    var S = second();
    var D = day();
    var M = month();

    var SecondColor = 100
    var Flicker = 255

    // Current millisecond if the second has rolled over
    if (prevSec != S) {
          millisRolloverTime = millis();
      }

    prevSec = S;

    var mils = floor(millis() - millisRolloverTime);

    var hourBarYPosition   = map(H, 0, 23, 0, height); //mapped to fit y postion of hours
    var minuteBarYPosition = map(M, 0, 59, 0, width); //mapped to fit y postion of minutes
    var secondBarWidth = map(S, 0, 59, 30, width); //mapped to fit width postion of seconds
  
    var secondsWithFraction   = S + (mils / 1000.0); //creates fraction to interpolate smooth transition
    var secondBarWidthSmooth  = map(secondsWithFraction, 0, 60, 6.5, width/2 - 6.5); //mapping seconds to allow them to fit within desired bounds
    var dayXPosition = map(D, 0, 31, 7, width - 7) //mapped to fit x postion of days
    var monthXPosition = map(M, 0, 12, 7, width - 7) //mapped to fit x postion of month
  
    fill(126, 168, 130, 200)
        rect(dayXPosition, 7, 5, 15); //represents day
        rect(monthXPosition, 7, 5, height - 14) //represents month

    rectMode(CENTER)
      noStroke();
    fill('#a87f7e'); 
        rect(width/2, hourBarYPosition,width - 13, 20); //represents hour



  
  rectMode(CORNER)
  if (S > 58) { // once the two second bars come together, it turns white to signal one minute
        SecondColor = 255
      }

  push() //reverses the canvas for the second rectangle to mirror it on canvas
    rotate(PI)
    fill(SecondColor) 
        rect(-width + 6.5, -minuteBarYPosition, secondBarWidthSmooth, -10); //represents seconds on right
  pop()
    fill(SecondColor)
        rect(6.5, minuteBarYPosition, secondBarWidthSmooth, 10) //represents seconds on left

    if (S % 2 != 0){ //if it is not odd numbered second, it will turn off
        Flicker = 0
      } 
      
    fill(Flicker) 
        rect(2, height - 7, width - 4, 5) //represents second flashes
        rect(width-7, 2, 5, height - 4)
}

I was trying to decide what to make my abstract clock about, and I read into Rietveld Shroder; his designs included a lot of different proportioned rectangles. I decided to use this as inspiration. For this project, I wanted to use rectangles to create a succession of movements, creating a dynamic, truly abstract clock

Sketch of Idea

Jai Sawkar – Looking Outwards – 05

Digital render of a 3D-printed jaw implant by Deviaene

We often associate 3D Computer Graphics with video games; however, this week, I found out that designers are beginning to make medical implants through video game development software!

The above work is done by Sebastiaan Deviaene; he has begun using digital tools usually reserved for video game developers to create 3D-printed implants for bone reconstruction. Using a 3D scan of the patient, he was able to reconstruct both an original jaw and a redesigned implant to fit the jaw perfectly.

In order to fabricate the implant, he used Electron Beam Melting. Through the process, from examining the patient all the way to delivering the implant, Sebastiaan was able to do the work completely remotely.

Having had intensive education in the realm of using 3D modeling, I believe this is a completely viable and more precise method for creating implants like this, and I am very excited to see what the future holds in this field.

Link

Jai Sawkar Project 05 – Wallpaper

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-04 


function setup() {
    createCanvas(400, 600); 
    background('#b3b1aa')
    noLoop()

}

function draw() { 
   
  for (var x = 0; x < width; x += 4){ //Background Sky
    for (var y = 0; y < 45; y += 5){
        
        fill('#bcc0c4')
        noStroke()

        fill('#0a293d')
        ellipse(x * 2, y * 2, 10, 10)

        push()
        fill('#071e2c')
        translate(0, 50)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0a293d')
        translate(0, 100)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0c354e')
        translate(0, 150)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0f405f')
        translate(0, 200)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#124c70')
        translate(0, 250)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#155781')
        translate(0, 300)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#176392')
        translate(0, 350)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1a6ea2')
        translate(0, 400)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1d7ab3')
        translate(0, 450)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1f85c4')
        translate(0, 500)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#2291d5')
        translate(0, 550)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        
    }
 } 

fill('#deddd5') //moon color
noStroke()
ellipse(width/2, 50, 100) //moon

for (var x = 0; x < 500; x += 40){ //mountains
        
        var mountainColor = random(80, 94)
        var top4 = random(200, 250)

        fill(mountainColor) //darker tree color
        triangle(x - 60, height, x + 60, height, x, height - top4) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 3
        
        var top3 = random(90, 100)

        fill('#142414') //darker tree color
        triangle(x+10, height-60, x+40, height - 60, x + 25, height - top3) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 2
        
        var top2 = random(80, 95)

        fill('#1b361b') //darker tree color
        triangle(x-10, height-40, x+30, height - 40, x + 10, height - top2) // Second Row of Trees
}
fill(0,0,0, 150); //blackish
rect(0, height-30, width, height); //darkness beneath trees
    
for (var x = 0; x < 500; x += 20){ //tree front
    for (var y = 0; y < 1; y += 1){
        
        var T = sqrt(3)/2
        var top = random(75,90)
        
        fill('#422d1c') //brown
        rect(x + 10, height - 45, 10, 45) //tree stumps
        fill("#244024"); //tree color
        triangle(x, height-30, x + 30, height - 30, x + 15, height - top) //trees
        stroke('#1c2e1c');
        line(x -1 , height - 31, x + 15, (height - top) + 1); //line for tree depth

        noStroke()
}
}
}

When beginning this project, I had no clue what I wanted my wallpaper to be. I turned to my friend and noticed a landscape as the background of his. I enjoyed its aesthetic and decided to portray the Pacific Northwest in Wallpaper-format.

Initial Concept Sketch

Jai Sawkar – Looking Outwards – 04

Sonic Playground is an outdoor sound installation that features ingenious, colorful sculptures that modify and transmit sound in unusual, engaging and playful ways. Atlanta, GA

This week, I found an outdoor sound installation by Yuri Suzuki: Sonic Playground. This outdoor sound installation, located in Atlanta, is made up of 6 interactive sound sculptures that manipulate sound based on where you are in the installation. Using grasshopper, a Rhino 3D Model plugin, Suzuki computationally designed these installations using 3D ray tracing in order to simulate how sound can travel. Through this, users can interact with one another through individual installation.

Having experience in Grasshopper, it is super cool to see the possibilities with not only grasshopper, but with how you can use computational design to not only design material, but design products that are made to interact with people’s senses.

Link to Article

Jai Sawkar Project 04 – String Art

Sketch

// Jai Sawkar
// jsawkar@andrew.cmu.edu
// Section C
// Project 04 

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

function draw() {
    background('#15274d');
    var x0 = 0;
    var y0 = 0;
    var x1 = width;
    var y1 = height;
    var y2 = height + 20
    var x2 = i - 34
    var x3 = width/2
    var y3 = height/3

    for (var i = 0; i < 50; i ++) {
         //white Eye
        stroke('#aab3aa')
        strokeWeight(.25)
        line(x1 + 60, (11 * i) - 110, 5 * i + 90, height/2)

        //white 2 Eye
        line(width/2, 5 * i - 40, 12 * i - 34, y2)

        //green
        strokeWeight(2); 
        stroke(86, 166, 85);
        line(x0, 5 * i - 40, 15 * i - 34, y2)

        //blue
        strokeWeight(2);
        stroke('#375dad');
        line(x1 + 60, 8 * i, 5 * i, 0)
      
} 
}

For this project, my aim was to use strings to create an abstract image of the Seattle Seahawks. Along with the use of the color schemes, I aimed to create the “eye” that the team uses in their logo schemes.

Jai Sawkar – Looking Outwards – 03

Experimental Pavilion of Ceramic Bricks in China by Robotic Fabrication LAB of The Faculty of Architecture of HKU

It is often argued that digital fabrication is the next step in fabrication, both at a large scale and small scale. Technology companies use laser cutters, 3D printers, and CNC routers in both their iterative & final products and architecture & design are following as well. With digital fabrication, components can not only be more precise, but more dynamic as well. It is reasons like this that organizations, like the Robotic Fabrication LAB of the Faculty of Architecture of HKU, are beginning to change the status-quo of components dating back centuries.

When bricks used in structures were first mass-produced, they were made in small rectangles, allowing both consistency and allowing it to be held in a single hand, easily, by builders. Now with advancements in digital fabrication, designers, like the one noted above, can begin to change our perception of bricks; in this case, both the shape and the material are unlike what the common person is used to.

This is incredibly interesting and intriguing to me, as I, and many others, believe that this type of technology will advance tremendously in the next decades. With these advancements, I truly cannot wait to see what new structures and forms can be created with a plethora more of opportunity.

Article

Jai Sawkar Project 03 – Dynamic Drawing

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-03: Generative Drawing 

var whiteFade = 255;


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

function draw() {

    background(whiteFade);
    noStroke();
  
    //setting variables for the blue rectangle
    var tangleW2 = (width / 2);
    var tangle1H = constrain(mouseY, 20, height - 40);
  
    //rectblue
    fill(141, 194, 255);
    rect(10, 10, tangleW2, tangle1H);

    
    //rectgreen
    fill(255, 185, 141);
    // variable for x origin
    var basept2x = 10;
    var tangle2Y = constrain(mouseY, 40, height - 20)
    var tangle2H = constrain(mouseY, height / 2 - 40, height - 20)
  
    rect(basept2x, tangle2Y, tangleW2, tangle2H);
   


  //yellow rectangle
    fill(255, 242, 141);
  
    //rectangle variables for x & y
    var tangle3X = width / 2 + 20;
    var tangle3Y = constrain(mouseY, 30, 100);
  
    rect(tangle3X, tangle3Y, 480, 100);

    

    //rectangle dark purple
    fill(228, 141, 255);
  
    // variables for X, Y, Height & Width
    var tangle4X = constrain(mouseY, 10, width / 2 + 20)
    var tangle4Y = height / 2 + 10
    var tangle4H = (height / 2 - 20);
    var tangle4W = constrain(mouseY, width / 2, width / 2)
  
    rect(tangle4X, tangle4Y, tangle4W, tangle4H);


    //rectangle light purple
    var tangle5H = constrain(mouseY, 10, height / 2 - 20);
    var tangle5Y = 10;
    var tangle6y = height / 2 - 100;

    fill(171, 141, 255);
    rect(width / 2 + 20, 10, width, tangle5H);

    //green rectangle
    fill(168, 255, 141);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y, width, constrain(mouseY, 400, 400));
    fill(whiteFade);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y - 10, width, 10)
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y -10, -10, 480);


    //rectangle white
    fill(whiteFade);
    rect(0, height - 10, 640, 640);

    //rectangle white 2
    rect(630, 0, 10, 480);

    // background fade based on mouse position
    if (mouseX > width / 2 + 20) {
    whiteFade = whiteFade - 5;
    } else {
    whiteFade = whiteFade + 5;
    }
}

Cover for 65th and Ingleside by Chance the Rapper (July, 2019)

For this project, I wanted to make a drawing that is simple in message but more complex as the mouse moves. I created a series of rectangles that either grows from the sides of the canvas or decrease in size as the mouse moves across it. I took inspiration from a Cover of a single I liked last summer by Chance the Rapper and made my dynamic drawing.

Jai Sawkar – Looking Outwards – 02

komorebi is a Platform that uses a robotic projector and generative projections to replicate the natural reflections and shadows of sunlight.

This week, I learned about Komorebi, a project created by designer Leslie Nooteboom. Through this projector, sunlight & natural reflections are generated and shown on surfaces, mimicking daylight in a room. I spent most of my adolescent life in the Seattle Area and then moving to Pittsburgh for school; moreover, this year, my room is located in the basement of my house. It is through these experiences that I can attest that daylight, or lack of it, can play a large impact on how you feel. Dwindling amounts of sunlight in the winter and simply minimal daylight staying in a basement can drastically change how you feel; hence, through this platform that generates real-time data (anywhere in the world) can enhance the day-to-day lives of its users, boosting there mood and energy anytime they are in the same room as it.

From my understanding of how the platform works, Kopmorebi uses data of sunlight patterns throughout its available cities and relays the info to the platform itself. It is there that light and its “random shadows” are signaled to mimic the illusion of light through a window.

What I admire about the artist is they saw a need for sunlight that many of us are seeing less & less of; they used both design & computation to create a solution and made it beautiful.

Article