Paul Greenway – Project 12 – Proposal

This project will be a collaboration between Shariq Shah and I. We plan to create a dynamic data visualization to represent the patterns of weather and their effects on landscapes. As of now, the weather effects we will be focusing on will be wind and water. These effects will be driven by properties based on real world data and will react to the topography image map. This map will be a gradient based height map of a topography and will potentially change when the user interacts with the visualization, subsequently shifting the patterns of the weather effects. We also plan to use color gradients and other properties such as movement speeds and direction to further convey the environmental effects. Some precedents we have been looking at while coming up with the design are the works of Refik Anadol, Earth by Cameron Beccario, and Drawing Water by David Wicks.

Sean Leo – project 09 – Portrait

sleo-project-09

//Sean B. Leo
//Sleo@andrew.cmu.edu
//Section C

//Project 09 Portrait

function preload() {
    var myImageURL = "https://static.wixstatic.com/media/b109e8_9226598d042f4ca2b17fd70a4e0d7319~mv2.jpg/v1/fill/w_572,h_680,al_c,q_85,usm_0.66_1.00_0.01/b109e8_9226598d042f4ca2b17fd70a4e0d7319~mv2.webp"; 
  
    IMG = loadImage(myImageURL);

}

function setup() {
    createCanvas(480, 480);
    background(0);
    IMG.loadPixels();
    frameRate(60);
  imageMode(CENTER);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
  //print (ix);
    var iy = constrain(floor(py), 0, height-1);
  //print(iy);
    var rx = px + random(0,10); // randomize x-value
    var ry = py + random(0,10); // randomize y-value
    var rs = random(1,10); // randomize stroke weight
    var theColorAtLocationXY = IMG.get(ix, iy);

    strokeWeight(rs);
    stroke(theColorAtLocationXY);
    line(px,py,rx,ry);
}

Starting
Mid-render
Original Photo

Shariq M. Shah – Looking Outwards 07 – Information Visualization

Aaron Koblin is an artist, designer, and programmer specializing in data and digital technologies and using computational techniques to visualize and develop information networks. One of his most compelling works focuses on visualizing flight pattern networks, which render paths of air traffic over North America through varieties of color and form. The FAA data for the flight networks was parsed through Processing and visualized to show nodes and overlaps among highly complex flight patterns. Another Intriguing work of Koblin’s, uses Amazon’s Mechanical Turk to spread out the work of developing an image of the hundred dollar bill across thousands of individuals to where each individual was unaware of the overall task. The computational process works in service of exploring the idea of an advancing economy and distribution of labor. These highly visual and creative ways of visualizing information by Aaron Koblin challenge conceptions of informational graphics and have the potential to become generative models for innovative thinking and development.

 

 

10, 000 Cents Image Produced through Mechanical Turk System
Flight Patterns Visualization 01
Flight Patterns Visualization 02
Aaron Koblin’s Website

Shariq M. Shah – Project 07 – Curve

shariqs-a7-project

// 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.

Mark Wilson Recent Mural Study
Mark Wilson Mural Study 02

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.

Sean Leo – Project 06 – Abstract Clock

sleo-project-06

//Sean B. Leo
//sleo@andrew.cmu.edu
//Section C

//Project 6
//Abstract Clock

function setup() {
    createCanvas(600, 600);
    pixelDensity(1);
    frameRate(1);
  }
  
  function draw() {
    
    var S = second();
    var M = minute();
    var H = hour();
    
    var s1 = map(S, 0, 60, 0, 255);
    var m1 = map(M, 0, 60, 0, 255);
    var h1 = map(H, 0, 24, 0, 255);
    
    
    loadPixels();
    for(var y=0; y<400; y++){
      for(var x=0; x<400; x++){
        var index= (x + y *width)*4;
        pixels[index+0] = y-m1;
        pixels[index+1] = h1;
        pixels[index+2] = x-s1;
        pixels[index+3] = 255;
      }
    }
    
    updatePixels();
  
  }

I started thinking about abstracting the concept of time itself. Instead of viewing time as an exacting and regimented number, what if it could be displayed more like a feeling or mood? What if by looking at a display we could have a sense of the passing of time rather than knowing what time it is exactly?

I created a color field that adjusts it’s rgb values over time through a pixel array. No second is the same composition as the next though the change is subtle. Below you can see the progression of time over the day and familiar timestamps.

I think there are a lot of artistic applications of this project; mainly using the generated color field as a light source. Rather than a reading of time in a specific format: a watch, wall clock, microwave, etc. A lamp emitting the color field would affect the room it is in a subtly convey time passing.

8:30am
noon
6:30pm
midnight

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.