shariqs@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Shariq M. Shah – Project 07 – Curve

// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C
// Project 07

//defining global variable for number of points

var nPoints = 500;


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

function draw() {



  //stroke colors will be a function of mouseX location

  var r = map(mouseX, 0, width, 80, 250);
  var g = map(mouseY, 0, height, 80, 250);
  var b = map(mouseX, 0, width, 80, 250);


  //call drawEpitrochoidCurve function

  background(g, b * 2, r * 2);
  push();
  noFill();
  stroke(b, g, r);
  strokeWeight(0.5);
  translate(width/2, height/2);
  drawEpitrochoidCurve();
  rotate(radians(frameRate));
  pop();



  //call drawFermat function
  push();
  noFill();
  stroke(r, g, b);
  strokeWeight(0.5);
  translate(width/2, height/2);
  drawFermat();
  pop();

}


function drawEpitrochoidCurve() {

    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html

    var x;
    var y;

    var a = map(mouseX, 0, width, 0, width/2);
    var b = a / 2;
    var h = height / 4;
    var ph = mouseX / 10;

    beginShape();
    for (var i = 0; i < nPoints; i++) {

        var t = map(i, 0, nPoints, 0, PI * 2);

       // defining curves as function of i

        x = (a + b) * cos(t) - h * cos(i * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(i * (a + b) / b);



        vertex(x, y);


    }
    endShape(CLOSE);

}

function drawFermat() {

    var x;
    var y;

    var a = map(mouseX, 0, width, 0, width);
    var b = a / 2;
    var h = height / 2;
    var ph = mouseX / 10;


    beginShape();
    for (var i = 0; i < nPoints; i++) {

        //defining angle variable for function

        var angle = map(i, 0, nPoints, 0, TWO_PI);


        x = (a - b) * sin(angle) - b * sin(angle * (a - b));
        y = (a - b) * cos(angle) - b * cos(angle * (a - b));

        vertex(x, y);


    }
    endShape(CLOSE);

}

In this project, I was able to use curve equations to generate highly complex and articulated line patterns that change with the location of the mouse. By using mapped numbers and for loops that iterate upon the functions the line patterns become layered and produce interesting effects as the overall patterns change. From there, I was able to use variables to change the color of the lines as the mouse position changes, and subsequently the background to match the line colors as they adapt. By using variables for many of the inputs, the results become highly varied and complex.

Shariq M. Shah – Looking Outwards 06 – Randomness

I am using one of my grace days for this late submission.

Mark Wilson is a computational artist and designer who focuses on the random aggregation of images into quilt-like mosaics and collages. His work includes processes that collect patterns and images at random and stitches them together in a variety of compositions. Through the logic of the program, color palettes and combinations are developed over a number of iterations, and there is emphasis on the overall mosaic effect of these works. Wilson’s work has been shown at a variety of exhibitions and corporate settings, where the processes and visual complexity of his work are able to be studied. This work is particularly intriguing as it relies on a program to develop an overall composition, thereby shifting the role of the artist in such a work.

http://mgwilson.com/

Shariq M. Shah – Project 06 – Abstract Clock

shariqs-06-project




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

}

function draw() {

    background(0);

    // get the current time
    var H = hour();
    var M = minute();
    var S = second();

    // map times to canvas proportions
    var mappedH = map(H, 0,23, 0,width);
    var mappedM = map(M, 0,59, 0,width);
    var mappedS = map(S, 0,59, 0,width);
    var timeArray = [mappedH, mappedM, mappedS]

    var x = width / 2 - 20;

    push();

    translate(width / 2, height / 2);

    noFill();


  for(s = 0; s < 60; s++) {

    strokeWeight(0.1);

    stroke(0 + mappedS, 300, 20);

    ellipse(0, 0, mappedS, x);

    rotate(radians(s * 0.2));

  }


    for(m = 0; m < M; m++) {

    strokeWeight(0.1);

    stroke(0 + mappedM, 60, 20);

    ellipse(0, 0, mappedM, x);

    rotate(radians(m * 0.2));

  }

    for(h = 0; h < H; h++) {

    strokeWeight(0.1);

    stroke(200, 60, 20);

    ellipse(h, 0, mappedH, x);

    rotate(radians(H * 0.1))


  }

    pop();


    text(H, (width / 2 )- 6, height / 2);
    fill(300);

    text(M, (width / 2) - 6, height / 2 + 15);
    fill(300);

    text(S, (width / 2) - 6, height / 2 + 30);

    fill(300);



}

In this project, I explored the practices of timekeeping in relation to abstract line geometries that rotated and overlapped based on the corresponding time. Different colors represent the different time increments, and complex geometries emerge as a result of the time keeping computation. These processes result in a clock that is dynamic and presents interesting and complex geometries as a result of time.

Shariq M. Shah – Looking Outwards – 05

Aldo Martinez Calzadilla is a 3D Computer Graphics Artist who works in highly detailed and lifelike three dimensional models. These computational techniques allow Martinez to explore other worldly ventures and develop methodologies that surpass what may be conceived as possible. Various modeling and processing techniques are used to produce highly articulated, vastly emotional, and intriguing images. Unlike many other artists, the mathematics and computation behind these processes produce a controlled and orchestrated image whereas some other computational artists take a generative approach to the design. In contrast, this process produces high resolution images that have an extreme level of planned detail. This work is highly resolved and its use of computational techniques is evident in its minute details.

Images by Aldo Martinez made from high resolution 3D Models

http://www.aldomartinezvfx.com/

Shariq M. Shah – Project 05 – Wallpaper

shariqs-05-project

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Project - 05




function setup() {
    createCanvas(640, 400);
    background(200, 50, 0);
    noStroke();

    var w = 60;
    var h = 60;



    for (var y = 0; y < height; y ++) {

       // using modulus operator to determine even or odd row



       for (var x = 0; x < width; x ++) {

            // using spacing multipliers to get accurate spacing

            var py = y * h;
            var px = x * w;

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            strokeWeight(2)
            noFill();
            rectMode(CENTER);


            rect(px, py, 50, 50);


            //coinciding geometries based on positions by changing rectMode to center
            //applying gradient to wallpaper

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            rect(px, py, 35, 35);
            ellipse(px, py, 50, 50);
            stroke(200, 30, 50);
            ellipse(px, py, 60, 60);

      }

    }
    noLoop();
}

In this project, I explored using nested for loops to create a wallpaper from coinciding geometries, which created interesting overlapping shapes. By doing this and applying a color gradient, the different geometries created through the for loop develop into an interesting pattern design.

Shariq M. Shah – Project 04 – String Art

shariqs-project-04

// Project - 04
// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C



function setup() {

createCanvas(400,300);

}

function draw() {

  background(0);

  for (var i = 0; i < 200; i += 1) {

      //defining a rotating series of lines that converge in patterns
      //using frameCount to have rotations and colors change over time

      strokeWeight(0.4);
      translate(width / 2, height / 2 + 100);
      rotate(radians(180 * 0.1 + frameCount));

      //various configurations and colors of lines that change according to stepping i variable
      //mouseY used to alter color and configurations depending on mouse location

      stroke(mouseY, 0, 25 + frameCount);
      line(i + i * width,  height * 0.1 * mouseY, width/2, i + i*2);


      stroke(0.5 * mouseY, 0, 25);
      line(i + i * -width,  height * 0.1 * mouseY, width/2, i + i*2 );


      stroke(mouseY, 0, 250);
      line(i + i * width/10,  -height * 0.1 * mouseY, width/2, height);


      stroke(mouseY, 0, 250);
      line(i + i * -width/10,  -height * 0.1 * mouseY, width/2, height);

      }

}

In this project, I explored various configurations and rotational properties that could be created with the lines created in for() loops. The program I developed focuses on developing a highly dynamic and fluid pattern of lines that at times seem solid and at other times seem porous. The colors are also dynamic as they change with the movement of the lines.

Shariq M. Shah – Looking Outwards 04 – Sound Art

http://

Demonstration of Hamdan’s work: Saydnaya

Lawrence Abu Hamdan is a sound researcher and designer studying the intersection of sonic research, politics, art, and forensics. Using his background as a musician, he uses computational processes and calibrated research models for his political and artistic investigations. One of his works, Saydnaya, consists of a sound box in a dim room in a way where voices of 4 inmates become quieter after 2011 protests in his country. There is a level of abstraction in his work that allows the work to be understood as not only sets of decibel data and forensic investigations, but also as emotional and evocative maps of the human condition.

The Hummingbird Clock, on the other hand, functions as a public time piece that exists both physically and online. It records, second by second, the buzz of the electronic grid picked up by surveillance cameras in a highly public location, so that it may be viewed in the public domain rather than exclusively by government security agencies.

These highly novel yet highly calibrated approaches to the interactions between computation, forensics, politics, and design push the boundaries on what can be conceived as art.

Shariq M. Shah – Looking Outwards 03

Neri Oxmann and MIT, in this project, explore the intersection of biomimetics, digital fabrication, and material properties. Bio-composites, cellulose, chitosan, and pectin, which are among some of the most abundant organic materials, are digitally fabricated to dynamically respond to changes in heat and humidity. There is an interesting relationship between digital and computational processes and highly organic matter that both intersect to develop something that is neither clearly computational nor organic. However, it is clear that the use of such techniques allows for an architecture that is deeply engaged with natural conditions. Although the process that creates the artifact is highly calibrated and computational, the result is something that, as a system, behaves and performs like an organic structure. A challenge of this process seems to be quantifying and measuring that which is highly nuanced: natural materials. Many systems in nature are highly complex, and the implementation of digital fabrication techniques into such nuanced systems could prove to be difficult.

https://www.archdaily.com/894979/neri-oxman-and-mit-develop-programmable-biocomposites-for-digital-fabrication

Shariq M. Shah – Dynamic Drawing – Project 03

shariqs_project-03

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// {Project - 03



var posC = 0;
var angle = 0;
var t = 'polar'

var midX = 320
var midY = 240



function setup() {
    createCanvas(640, 480);
    background(0);

}

function draw() {

//Rotating ellipses creating void in the center

    push();
    translate(320, 240);
    rotate(radians(angle));
    noFill()
    stroke(250, mouseX, mouseY)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle + mouseY * 0.1
    posC = posC + 0.5


//Text that changes color acccording to rest of the graphic

  textSize(10);
  rectMode(CENTER)
  text('polar', midX - 10, midY);
  fill(250, mouseX, mouseY);


//If mouse is moved to center, lines become black creating vortex

  if ((mouseX > midX - 20 & mouseX < midX + 20) && (mouseY > midY - 20 & mouseY < midY + 20)) {

    push();
    translate(midX, midY);
    rotate(radians(angle));
    noFill()
    stroke(0)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle - mouseY * 0.5
    posC = posC + 0.5
  }


}

In this project, I explored geometries and mathematical aggregation of an ellipse to create highly articulated and complex patterns. Using a limited amount of code, the program is able to use the user’s input to create a variety of vibrant mandala like patterns. The geometry is calibrated to leave a perfect circle in the center of the canvas, where the text changes color according to the the lines that are being drawn.

Shariq Shah – Looking Outwards- 02

Michael Hansmeyer is a computational designer interested specifically in the architectural implications of computational systems that generate a variety of complex design possibilities. Some of his latest works include a two full scale 3D printed sandstone grottoes and an iron and lace gazebo at the Gwangju Design Biennale. Hansmeyer employs a computational approach that emphasizes a level of hyper resolution in architectural spaces that can only be achieved rigorously with a computational and generative system. Because of this, algorithmic frameworks allow the specificity and complexity of surface conditions, ornament patterns, and material expression to take on a life of its own and characterize entirely new spatial conditions. As an architecture student, this work is fascinating as the role of architect is brought into question. This type of work calls for a paradigm shift from the view of the architect as the omniscient designer to one where the architect sets up a system and chooses from the results.