Author: Hannah K

Hannah K-Project-07

sketch-90.js

var c1nPoints = 10; // Number of points for curve 1
var c2nPoints = 7; // Number of points for curve 2

function setup() {
    createCanvas(500, 500);
    frameRate(15);
}

function draw() {    
    // Draw the frame
    fill(255, mouseX, mouseY);
    rect(0, 0, width-1, height-1); 
    
    // Draw the curve
    push();
    translate(width / 2, height / 2);
        drawCurve1();
        drawCurve2();
    pop();
}

// Relying on class notes for drawCranioidCurve() for Week 7 Deliverables
// Drawing this curve:
// http://mathworld.wolfsram.com/Scarabaeus.html - Sextic curve

function drawCurve1() {
    strokeWeight(1.2);
    fill(mouseX, mouseY, 255);
    var x;
    var y;
    var r;
  
    var a = constrain((mouseX / width), 0.0, 1.0);
    var b = constrain((mouseY / height), 0.0, 1.0);
    // Color depends on x and y movements of mouse
    fill(mouseY, mouseX, 255);
    beginShape();
    for (var i = 0; i < c1nPoints; i++) {
        var t = map(i, 0, c1nPoints, 0, TWO_PI);

        // Curve 1 - Used equation from mathworld.com
        r = (b + mouseY) * cos(2*t) -
        (a + mouseX) * cos(t);

        // Using code from class notes under "Deliverables Week 7"
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawCurve2() {
    strokeWeight(0.5); 
    var x;
    var y;
    var r;
    

    var a = constrain((mouseX / width), 0.0, 1.0);
    var b = constrain((mouseY / height), 0.0, 1.0);
    // Color depends on x and y movements of mouse
    fill(mouseX, mouseY, 255);
    beginShape();
    for (var i = 0; i < c2nPoints; i++) {
        var t = map(i, 0, c2nPoints, 0, TWO_PI);

        // Curve 2 - Used equation from mathworld.com
        r = (b + mouseX) * cos(2*t) -
        (a + mouseY) * cos(t);

        // Using code from class notes under "Deliverables Week 7"
        x = r * cos(t); 
        y = r * sin(t);
        vertex(x, y); 
    }
    endShape(CLOSE);
}

The process for creating the project this week was different from what I usually do.
Because it was difficult to visualize how changing certain elements of my code would change what I saw, I could not really draw a sketch to plan what I wanted to created.

I went on the website provided to us and just picked a curve and to be honest, I relied pretty heavily on the template code that was provided to us. The end result of this project far exceeded my expectations, and I am super happy with the final result!

I especially really like that at one point when you are moving your mouse (move your mouse to the far left near the middle of the canvas!), the curves create a star.

Hannah K-Looking Outwards-07

This week for my Looking Outwards, I found a visualization of information of relations in the Middle East created by David McCandless, developed in collaboration with Univers Labs. David McCandless is the creator of informationisbeautiful.net.

Below is a screenshot of what this infographic looks like (You can click directly on the image or use the “Middle East” hyperlink above to use the infographic—it was not directly embeddable).

This graphic shows the key players in Middle East relations and the notable relationships that exist between countries.
This graphic shows the key players in Middle East relations and the notable relationships that exist between countries.

I really liked this graphic because it displays a variety of complex information and relationships, and being an international relations primary major, this information especially interest me personally. Not only is the graphic beautiful to look at, but it also has a very functional purpose too.

There was no information available on how this was made, other than the fact that this infographic is powered by VizSweet. I suppose that there would have been algorithms used to repeat the same behavior of expanding one dot into a “web,” but I do not think any algorithms would have been used to come up with the data that this infographic displays.

Hannah K-Looking Outwards-06

This week for my Looking Outwards, I looked at Gerhard Richter’s 4900 Colours: Version II. It was created in 2007 and is composed of 196 panels, and each of these panels have 25 squares. Two things stood out to me about this work. First, even though it is comprised of many parts, you tend not to see these different parts because you only the larger picture. Also, even though it was randomly generated, the colors and patterns they seem to create seem less than random.

This work was inspired by past work (grid paintings) that the artist had done, and the work was created through a “specially developed computer programme,” but I could not find other information specific to the process of creating this work.

https://www.gerhard-richter.com/en/art/paintings/abstracts/colour-charts-12/4900-colours-14891/?&referer=search&title=4900&keyword=4900 4900 Colours: All in One Piece

Hannah K-Project-06

sketch-47.js

var txtOffset = 25;
var offset = 100;

// Using ellipse and rectangle to create cup
var cupW = 300;
var cupH = 400;

// White part of cup handle
var wHandleL = 150; // length
var wHandleW = 110; // width
var wHandleXpt = 400 // x-pos
var wHandleYpt = 250; // y-pos

// Background colored part of cup handle
var bHandleL = 90; // length
var bHandleW = 22; // width
var bHandleXpt = 410; // x-pos
var bHandleYpt = 205; // y-pos

function setup() {
    createCanvas(500, 600);
}

// Fills up the cup with coffee as the day goes on!
function draw() {
    // Get the current time
    var H = hour();
    var M = minute();
    var S = second();

    // Calculating heights of rectangles corresponding to H, M, S values
    // Looked at course code example for reference with mapping
    var hourBar = map(H, 0, 23, cupH, 0);
    var minuteBar = map(M, 0, 59, cupH, 0);
    var secondBar = map(S, 0, 59, cupH, 0);
    var barW = cupW/3;

    background(135, 206, 250);
    noStroke();
    // Main part of cup
    fill(255);
    rect(offset, offset, cupW, cupH);
    // Ellipse to draw white part of cup handle
    ellipse(wHandleXpt, wHandleYpt, wHandleW, wHandleL);
    // Ellipse to draw background color part of cup handle
    fill(135, 206, 250);
    rect(bHandleXpt, bHandleYpt, bHandleW, bHandleL, 5);

    // Fills up cup in relation to seconds
    fill(99, 49, 0);
    rect(offset, offset, barW, secondBar);

    // Fills up cup in relations to minutes
    fill(139, 115, 85);
    rect(offset+barW, offset, barW, minuteBar);

    // Fills up cup in relations to hours
    fill(139, 90, 43);
    rect(offset+2*barW, offset, barW, hourBar);
    
    // Display current time (24-hr time)
    fill(0);
    textAlign(RIGHT);
    text("Current hour: " + H, width-txtOffset, 25);
    text("Current minute: " + M, width-txtOffset, 35);
    text("Current second: " + S, width-txtOffset, 45);

    fill(255);
    textAlign(CENTER);
    text("No more coffee = Day is over! :) ", width/2, height-txtOffset);
}

When I learned that the project for this week was an abstract clock, one of the first ideas I had was to create an hourglass like representation of time using a cup of coffee. I personally love coffee and really enjoy drinking it (it’s not even for the caffeine)! I thought it would be interesting to represent the start of the day as a full cup of coffee and to show that the end of the day occurred when there was no more coffee left (aka the entire cup is white).

As usual, I drew out a picture before starting my project in order to help visualize coordinates of the elements of my coffee cup clock but definitely improvised more than usual along the way.

There were a couple of things I wanted to accomplish with this project but could not figure out. First, I wanted the bars representing the seconds, minutes, and hours to fill up from the top and drain towards the bottom. Secondly, I tried to figure out a way to combine all three elements of a day (the seconds, minutes, and hours) into a singular element to create a more realistic hourglass-like clock, but I was unable to do it.

Nonetheless, I enjoyed this project a lot.

20161007_231159-1

Hannah K-Looking Outwards-05

This week for my Looking Outwards, I looked at some 3D images of a Human Immunodeficiency Virus created by Alexey Kashpersky. The images were created in 2013 for an international 3D contest run by the CGSociety. These images initially caught my eye because of the rich, vibrant colors and strong composition of the images’ contents. I was further intrigued when I realized that the image was of an HIV virus. The images are both beautiful and terrifying because visually, they are mesmerizing, but in reality, they represent something deadly. Ultimately, this work is a perfect intersection of the arts and sciences and shows how powerful the combination of the two could be.

I was unable to gather the details of the exact process of how these images were made, but they were created using Cg, which is based on the C programming language. Upon doing some further research, I found that Cg allows users to program vertex and pixel shaders.

A 3D Image of the HIV Virus created by Alexey Kashpersky

Hannah K-Project-05

sketch-2.js

var xWidth = 150; // spacing for width
var yHeight = 150; // spacing for height
var startX1 = 80;// x-init pos for circle of L ear
var startY1 = 80; // y-init pos for circle of L ear
var startX2 = 120; // x-init pos for circle of R ear
var startY2 = 80; // y-init pos for circle of R ear
var startX3 = 100; // x-init pos for circle of bear face
var startY3 = 100; // y-init pos for circle of bear face
var eyeLX = 85; // x-init pos of L eye
var eyeLY = 90; // y-init pos of L eye
var eyeRX = 115; // x-init pos of R eye
var eyeRY = 90; // y-init pos of R eye
var noseX = 100; // Nose x-init pos
var noseY = 100; // Nose y-init pos
var lineX1 = 100; // x-init of 1st point of line
var lineY1 = 100; // y-init of 1st point of line
var lineX2 = 100; // x-init of 2nd point of line
var lineY2 = 134 // y-init of 2nd point of line


function setup() {
    createCanvas(500, 500);
    background(151, 255, 255);
}

function draw() {
    for (var y = 0; y < 3; y++) {
        for (var x = 0; x < 3; x++) {

            // These variables change init x and y values of all bear elements
            var x1Change = startX1 + x * xWidth;
            var y1Change = startY1 + y * yHeight;
            var x2Change = startX2 + x * xWidth;
            var y2Change = startY2 + y * yHeight;
            var x3Change = startX3 + x * xWidth;
            var y3Change = startY3 + y * yHeight;
            var newEyeLX = eyeLX + x * xWidth;
            var newEyeLY = eyeLY + y * yHeight;
            var newEyeRX = eyeRX + x * xWidth;
            var newEyeRY = eyeRY + y * yHeight;
            var newNoseX = noseX + x * xWidth;
            var newNoseY = noseY + y * yHeight;
            var newLineX1 = lineX1 + x * xWidth;
            var newLineY1 = lineY1 + y * yHeight;
            var newLineX2 = lineX2 + x * xWidth;
            var newLineY2 = lineY2 + y * yHeight;

            strokeWeight(2);
            line(newLineX1, newLineY1, newLineX2, newLineY2);
            fill(255, 211, 155);
            ellipse(x1Change, y1Change, 35, 35);
            ellipse(x2Change, y2Change, 35, 35);
            ellipse(x3Change, y3Change, 68, 68); 
            fill(0);
            ellipse(newEyeLX, newEyeLY, 7, 7);
            ellipse(newEyeRX, newEyeRY, 7, 7);
            ellipse(newNoseX, newNoseY, 9, 9);
            line(newLineX1, newLineY1, newLineX2, newLineY2);

        }
    } 
}

For this project, I knew I wanted to make a pattern involving animals. I think bears are cute, so I decided to make something with bears in it. The bears are pretty minimalistic, but I was going for the graphic look, so I think it works. I could imagine these bears on a shirt, socks, or something like that, and I would gladly wear it!

To figure out where to draw each element of the bear, I drew a picture and calculated out the coordinates ahead of time. I have long since learned that this is the most efficient way to approach projects. Also, I feel that I have slowly been improving in my ability to debug my code!

20160930_183219

20160930_204948-1

Looking Outwards-Hannah K-04

The work I looked at this week is called Six Drawings, which is a joint collaborative effort between Maotik (generative visuals artist), Diego Espinosa (performer/composer), and David Adamcyk (composer). I was especially fascinated by this work because it creates an environment where it feels like one in inside a balloon. It was visually pleasing and a totally immersive experience. The audiovisual nature of this work made it especially powerful, and I would have liked to experience it in person.

It was presented as an instrumental audiovisual performance in May 2014 at Société des Arts Technologiques in Montreal during the IX Symposium. This project works by Diego Espinosa, the performer, controlling a custom made rubber orb (which looks like a balloon) to act as an all-powerful controller for the installation. The rubber orb was connected to microphones, sensors, and a computer which was running Max multimedia software. The orb also controlled the lights and the aural vibrations coming from the speakers. By using a program called TouchDesigner, Maotik was able to use the audio data to generate 3D visuals.

While I was able to gather information on the kinds of software that were used, there was little information available about what the actual creative process entailed.

Hannah K-Project-04

sketch-213.js

function setup() {
    createCanvas(640, 480);
    background(255,220,240);
}

function draw() {
    // Point given by coordinates (topXmid, topYmid) 
    // is where all lines drawn from left of canvas meet
    var topXmid = width/2;
    var topYmid = 0;
    // Point given by coordinates (rightXmid, rightYmid)
    // is where all lines drawn from top of canvas meet
    var rightXmid = width;
    var rightYmid = height/2;
    // Point given by coordinates (bottomXmid, bottomYmid) 
    // is where all lines drawn from right of canvas meet
    var bottomXmid = width/2;
    var bottomYmid = height;
    // Point given by coordinates (leftXmid, leftYmid)
    // is where all lines drawn from bottom of canvas meet
    var leftXmid = 0;
    var leftYmid = height/2;

    var tX = 0; // Initial x-value of lines drawn from top
    var bX = 640; // Initial x-value of lines drawn from bottom
    var rY = 0; // Initial y-value of lines drawn from top
    var lY = 480; // Intial y-value of lines drawn from bottom

    // tX = Canvas top x-value. Make bigger.
    stroke(72,118,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);        
        var tY = 0; // Canvas top y-value is zero
        line(tX, tY, rightXmid, rightYmid);
        // (width/2) / 5 is to create 5 equal 
        // x increments across half the canvas width
        tX = tX+((width/2)/5);
    }

    // rY = Canvas right y-value; Make bigger.
    stroke(39,64,139);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var rX = width;
        line(rX, rY, bottomXmid, bottomYmid);
        // (height/2) / 5 is to create 5 equal
        // y increments across half the canvas height
        rY = rY+((height/2)/5);
    } 

    // bX = Canvas bottom x-value; Make smaller.
    stroke(99,184,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var bY = height;
        line(bX, bY, leftXmid, leftYmid);
        bX = bX-((width/2)/5);
    }


    // lY = Canvas left y-value. Make smaller. 
    stroke(0,229,238);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var lX = 0; // Canvas left x-value is zero
        line(lX, lY, topXmid, topYmid);
        lY = lY-((height/2)/5);
    }

}

This project definitely seemed simpler before I started! I did not realize I would need to use as many variables as I ended up using. Drawing a picture and calculating the coordinates before I started really helped.

20160923_202031

Hannah K-Looking Outwards-03

This piece is called Zuhal and was created by Neri Oxman and was created in 2014 in Frankfurt, Germany in collaboration with Christoph Bader and Dominik Kolb.

I was drawn to this project because it is a beautiful wearable, but the process for creating it was quite unconventional. Inspired by Saturn, the stylistic and color choices reflect the turbulent nature of the planet. The wearable was created with multi-material 3D printing technology and is an example of a field called Material Ecology, which examines computation, fabrication, and material as one whole body of design. To me, this work represents not only the fields of computation and design individually but is a perfect marriage between these two disciplines.

Unfortunately, I was unable to attain more specific information about the steps of this process. More of Neri Oxman’s work can be seen here.

Hannah K-Project-03

sketch-178.js

// Creates an interactive dynamic drawing that changes when 
// mouseX is moved
// Composed of right / isosceles trapezoids and triangles

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

function draw() {
// 1st shape out of 8 total
    if(mouseX > 0 & mouseX < 80){
        // Horizontal changes on this dynamic drawing are always 80 units
        noStroke();
        fill(255,130,171);
        // 1st of the 8 quadrilaterals that will get smaller from L to R
        quad(0,80,80,130,80,480,0,480);
    }
    else{ 
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(0,80,80,130,80,430,0,480);
        // 1st of the 8 quadrilaterals that will get larger from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        fill(255,62,150);
        quad(0,480,80,430,80,480,0,480);
    }

// 2nd shape out of 8 total
    if(mouseX > 80 & mouseX < 160) {
        noStroke();
        fill(218,112,214);
         // 2nd of the 8 quadrilaterals that will get smaller from L to R
        quad(80,130,160,180,160,480,80,480);
    }
    else{
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(80,130,160,180,160,380,80,430); 
        // 2/8 of the quadrilaterals that will get larger from L to R
        fill(139,71,137);
        quad(80,430,160,380,160,480,80,480)
    }

// 3rd shape out of 8 total
    if(mouseX > 160 & mouseX < 240) {
        noStroke();
        fill(75,0,130); 
        // 3rd of the 8 quadrilaterals that will get smaller from L to R
        quad(160,180,240,230,240,480,160,480); 
    } 
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(160,180,240,230,240,330,160,380);
        // 3rd of the 8 quadrilaterals that will get larger from L to R
        fill(72,118,255);
        quad(160,380,240,330,240,480,160,480);        
    }

// 4th shape out of 8 total
    if(mouseX > 240 & mouseX < 320) {
        noStroke();
        fill(135,206,250); 
        // 4th of the 8 quadrilaterals that will get smaller from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        quad(240,230,320,280,320,480,240,480);
    }
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(240,230,320,280,320,280,240,330);
        // 4rd of the 8 quadrilaterals that will get larger from L to R
        fill(51,100,201);
        quad(240,330,320,280,320,480,240,480) 
    }

// 5th shape out of 8 total
    if(mouseX > 320 & mouseX < 400) {
        noStroke();
        // 5th of the 8 quadrilaterals that will get smaller from L to R
        fill(0,134,139);
        quad(320,280,400,330,400,480,320,480);
        // Triangle which is same color as the background
        // Referred to as a quadrilateral for consistency in my code
        fill(0,255,255);
        quad(320,280,400,230,400,330,320,280);
    }
    else{
        noStroke();
        // 5th of the 8 quadrilaterals that will get larger from L to R
        fill(255,20,147); 
        quad(320,280,400,230,400,480,320,480); 
    }

// 6th shape out of 8 total
    if(mouseX > 400 & mouseX < 480) {
        noStroke();
        // 6th of the 8 quadrilaterals that will get smaller from L to R
        fill(60,0,200); 
        quad(400,330,480,380,480,480,400,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(400,230,480,180,480,380,400,330);
    }
    else {
        noStroke();
        // 6th of the 8 quadrilaterals that will get larger from L to R
        fill(255,255,255);
        quad(400,230,480,180,480,480,400,480);
    }

// 7th shape out of 8 total
    if(mouseX > 480 & mouseX < 560) {
        noStroke();
        // 7th of the 8 quadrilaterals that will get smaller from L to R
        fill(25,60,100);
        quad(480,380,560,430,560,480,480,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(480,180,560,130,560,430,480,380);
    }
    else {
        noStroke();
        // 7th of the 8 quadrilaterals that will get larger from L to R
        fill(155,20,100);
        quad(480,180,560,130,560,480,480,480) 
    }
    
// 8th shape out of 8 total
    if(mouseX > 560 & mouseX < width) {
        noStroke();
        // 8th of the 8 quadrilaterals that will get smaller from L to R
        // Actual shape is a triangle
        fill(142,56,142);        
        quad(560,130,640,80,640,480,560,480) 
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);        
        quad(560,130,640,80,640,480,560,430);
    }
    else {
        noStroke();
        // 8th of the 8 quadrilaterals that will get larger from L to R
        fill(132,112,255);
        quad(560,130,640,80,640,480,560,480); 
    }
}

When I began thinking of what I wanted to do for this project, I thought it would be interesting to do something using triangles. Initially, I thought of the drawing as having 8 different parts because I created 8 sections and thought I would need 2 shapes per section. But I ended up using 3 per section, and figuring out the coordinates of the shapes took a little bit longer than expected. Overall, I quite enjoyed creating this!

(Comment: For whatever reason, the very right part of my project is getting cut off on the website, even though the canvas width is set correctly.)

20160917_232203-1