Month: October 2022

Project 07- Curves

Graham Murtha

Section A

For this project, I wanted to make a series of layered petal-like formations with linework, all with different reactions to mouseX and mouseY. However, the cardioid caused some trouble, since despite how many times I manipulated the equation, it remained an very slow-growing shape on the left of the screen.

sketch
//Graham Murtha
//Section A
//Assignment 7
//gmurtha@andrew.cmu.edu


var vertices = 150; // number of vertices or coordinates

function setup() {
    createCanvas(480, 480);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    push();
    //moves origin to the center of the canvas
    translate(width/2,height/2);

    //draws loop for the three shapes

    background(120,0,60);// dark magenta-red
    Ranunculoid();
    Cardioid();
    Nephroid();
    pop();
}

function Ranunculoid(){
    //https://mathworld.wolfram.com/Ranunculoid.html
    
    //variables
    var x;
    var y;
    var a = mouseX/7
    var b = mouseY/100
    
    beginShape();
    noFill();
    stroke(255,180,255);  //light purple
    for(var i=0; i<vertices; i++){ // parametric equations
            var Ag = map(i,0,vertices,0,TWO_PI); // angle/theta
            x = a*((6*cos(Ag))-(b*cos(6*Ag)));
            y = a*((6*sin(Ag))-(b*sin(6*Ag)));
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function Cardioid(){ 
    //https://mathworld.wolfram.com/Cardioid.html
    
    //variables
    var x;
    var y;
    var a = mouseX/4
    var b = mouseY/30
    
    beginShape();
    noFill();
    stroke(255,150,0);//orange
    for(var i=0; i<vertices; i++){ // parametric equations
            var Ag = map(i,0,vertices,0,PI+QUARTER_PI); // angle/theta
            x = (a*cos(Ag)*(1-cos(Ag))*b);
            y = (a*sin(Ag)*(1-cos(Ag))*b);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function Nephroid(){
    // https://mathworld.wolfram.com/Nephroid.html
    
    //variables
    var x;
    var y;
    var a = mouseX/6
    var b = mouseY/4
    
    beginShape();
    noFill();
    stroke(255); // white
    for(var i=0; i<vertices; i++){ // parametric equations
            var Ag = map(i,0,vertices,0,PI); // angle/theta
            x = a*(3*cos(Ag))-((cos(3*Ag))*b);
            y = a*(3*sin(Ag))-((sin(3*Ag))*b);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

Project 07: Curves

This is my floral composition based on mathematical curves and reacts to the mouse’s location on the canvas.

sketch
/*
    Joan Lee
    Section D

    This program draws an interactive floral composition with mathematical curves.
*/

var nPoints = 400;

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


function draw() {
    background(28,92,76);    //dark green
    
    //drawing flower curve
    push();
    translate(width/2, height/2);
    drawCardioidCurve();
    pop();

    //drawing leaves curve
    push();
    translate(width/2, height/2);
    drawHypotrochoidCurve();
    pop();

}

//--------------------------------------------------
function drawCardioidCurve() {
    //cardioid curve
    push();
    translate(x, y);
    rotate(radians(90));
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 0, 40);
    var b = a/2;
   
    //mouse movement interaction
    if (mouseY > height/2) {    //color change
        fill(244,52,4);     //bright red
    } else {
        fill(252,156,132);  //pink
    }

    //cardioid curve parametric equations
    beginShape();
    noStroke();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a * (6 * cos(t) - cos(6 * t));
        y = a * (6 * sin(t) - sin(6 *t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

//--------------------------------------------------
function drawHypotrochoidCurve() {
    //hypotrochoid curve
    noFill();
    strokeWeight(1);

    //mouse movement interaction

    if (mouseX < width/2) {      //color change
        stroke(4,220,156);  // bright green
    } else {
        stroke(204,236,228);    //pale green
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //hypotrochoid curve parametric equations
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
        y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

Looking Outwards 07

The Search Clock by Chris Harrison stood out to me because I found the concept very interesting; mapping out data from search engines, Magellan and AOL, over the course of a typical day (from studying trends for nine weeks), and then taking it a step further by mapping the differences in searches from 1997-2000. I admire firstly how visually interesting this project is because it is radially centered and balanced, but with enough variation to keep it interesting and engaging. It makes me want to read into the smaller text, and this demonstrates the artist’s eye for composition and hierarchy. Additionally, it very clearly shows information in a well-organized way. I have been learning about and practicing the visualization of data and systems in one of my design classes, and I know how tedious it is to land on something that makes sense. Furthermore, the content itself is interesting, with a lot of risqué and humorous topics trending at certain times of the day.

Visualization of information collected from the Magellan search engine
Visualization of information collected from the AOL search engine

week 7 blog

Kim Rees visualizes data related to the black lives matters movement. Some of their work includes showing statistics about economic inequality as a city with differently sized sky scrapers and data laid out in the form of the periodic table. Other topics Reez covers include environmental, education, government, health, politics, and technological data and statistics. Most of the work is in an attempt to invoke a feeling for the need to change our current capitalistic and exploitative system. After stalking Kim’s twitter you can really see how decade they are to their work and continuing the thought provoking work they create. One of my favorite projects was about health and the increase in the lifespan of people but the disparity between how accessible health care is and as a result the difference in economic status and health. I don’t know, it’s nice seeing the data visualized, it give it more of an understandable and easier was of being digested.

Dynamic Snowflakes

For this project I used the rose curves and epicycloid functions to create this composition. The rose curve (white) resembles a snow flake and as the mouse moves the it changes but still looks like a snow flake. When mouse is at zero, the middle of the composition, 480 or off the canvas it creates a circle. The epicycloid changes in complexity and in color as the mouse moves.

sketch
//Nakshatra Menon
//Section C

var nPoints = 240;



function setup() {
    createCanvas(480, 480);
    background(246, 242, 240);
    colorMode(HSB);
}



function draw() {
    background("black");
    translate (width/2, height/2); // origin is middle of canvas 
    noFill();
    epicycloid(0, 0);             // shape 1
    roseCurve(0,0);               // shape 2 
}

function roseCurve(){  // draw rose curve from https://mathworld.wolfram.com/RoseCurve.html
    var g = constrain(mouseY/32, 5, 15);      // g is based on mouse Y
    var n = constrain(int(mouseX), 0, 480);   // n is based on mouse X
    strokeWeight(.5);
    stroke("white");
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var radius = 10 * cos(n * t);    // function 

        // first set of values 
        var x = g*radius * cos(t);       // function 
        var y = g*radius * sin(t);       // function 

        // second set of values 
        var x1 = 2*g*radius * cos(t);    // function 
        var y1 = 2*g*radius * sin(t);    // function 

        vertex(x, y);                    // vertex for shape
        vertex(x1, y1);                  // vertex 2 for shape 
    }
    endShape(CLOSE);
}  

function epicycloid (){    // draw the epicycloid from https://mathworld.wolfram.com/Epicycloid.html
    var f = constrain(int(mouseY/20), 2, 48);        // output of number based on mouse Y
    strokeWeight(1);
    stroke(332,mouseX/5, 20);                        // color changes based on mouse X position 
    for (var a = 10; a <240; a = a+10){              // how many epicycloids are drawn 
        var b = a/f                                  // b is related to mouse Y
        beginShape();
        for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI);  // remaps 

            var x = (a+b)*cos(t) - b*cos(((a+b)/b)*t); // function 
            var y = (a+b)*sin(t) - b*sin(((a+b)/b)*t); // function 

            vertex(x, y);                              // vertex for points 
        }

    endShape(CLOSE); 
    }  
}

Information Visualization

One of the projects where an artist created software to visualize data is called “The shape of the song”. Martin Wattenberg created this because he wanted to be able to see music. The arcs go between two sections of notes that are repeated. The software analyzes MIDI files, files that get the notes from a piece, which can be found on the internet. However, since these files are handmade, each file can have different contents even though it might be of the same song, which in return might produce different sequences in arcs. Since the arcs are translucent when they overlap it creates a variety of different opacities within the piece and depending on how big the section that is being repeated the stroke of the arcs are also varied. Wattenberg has an interest in how technologies can provide insight into things that are often overlooked in everyday life. Visualizing different patterns in music shows us a deeper understanding of music and might provide insight into why some people like certain songs compared to others. Additionally, this project reminded me of one of the other projects I looked into for Looking Outwards – Milkdrop. Milkdrop used shapes, curves, and colors to help visualize music. Milkdrop was a more organic, conceptual way of visualizing music, while The Shape Of Song is a more logical structured way of visualizing it. With The Shape Of Sing, it is easier for the audience to see how the music generated the artwork.

https://www.bewitched.com/song.html

LookingOutward 07

Link: https://www.bewitched.com/song.html

\I’ve investigated the data visualization software, Shape of Music, created by Martinez Wattenberg. The software detects rhythm similarities in a piece of lyrics and diagrams similar parts by creating a connection with half discs.

What I really admire about this program is the brand-new way of representing musical rhythms, where instead of noting musical notes through sheet music, the program diagrams patterns. This helps visualize patterns in music, where instead of looking through sheet music to find a similar rhythm in a song, one can look at the connections through the lines, and see what parts of the song are most frequently repeated.

The software is entirely written in java and uses MIDI files to analyze the rhythm, where, unlike other common file types, a MIDI file contains a description of the notes which makes the analysis of the letters much more amendable. The MIDI files can also be separated into different tracks and analyzed separately. The algorithm I suppose is programmed to look for similar patterns in a range of note descriptions and create a connection through an arc diagram as a connection to map the similarities.

It is obvious that the author is keen on simplicities in diagraming, and he has also said on his website that he has taken inspiration from other arc diagrams, which is a simple yet effective form of diagraming to communicate information.

Looking Outwards-07- Section A

I was inspired by a piece by Stefanie Posavec that was made for the Papworth Hospital Inpateints Ward. Specifically, I thought the her “Flows” piece was super pretty. I liked the piece because of how she connected the hospital’s specialty on that floor (relating to blood and vessel) to a calming element found in nature. Not only did she include all these connections behind why she chose the design she did, I was inspired by how the piece was designed to calm patients who had just come out of surgery. I think this is really important because hospitals can be a scary place and it’s cool how she was able to create something really nice from data. I admire these aspects because art has the ability to make places seem less scary and help people though the tough time they are going through.

To generate this work, Posavec used data points from echocardiograms. The, she probably drew many curves connecting the point but had the height of the curves fluxuate a little bit (maybe using something similar to noise) so that it seemed like the lines were flowy.

Stefanie Posavec, Papworth Hospital Inpatients Ward, 2019

Here is the link and here is the image:

Stephanie Posavec’s piece is on each door of level 3 at the Royal Papworth Hospital. This is a sample of what it looks like.

Looking Outward 07 / Dr. Lev Manovich

This week I’m looking at the work of Dr. Lev Manovich, particularly his ‘On Broadway’ project which was inspired by Edward Ruscha’s 1966 unfolding photo book titled ‘Every Building on the Sunset Strip’.
To gather data, Manovich and his team chose anchor points along Broadway to create 100 meter wide ‘slices’ which were combined to create a spine-like shape. The coordinates of the shape were then used to filter all of the data gathered, including Instagram posts made within each 100 meter section, Google images, Twitter posts, taxi pickups and drop offs, average household income, and Foursquare data.

“On Broadway” project display.


The data was organized and presented in an interactive, layered visual with which users could slide around, zoom in on, and learn more about through the various data sections.
I love how this project was rendered in the final presentation to use color palettes and images as means of containing the data. The end result is clean, aesthetic, and easy to navigate as it unfolds into different layers.

lo: information visualization

Gun Deaths in U.S visualization (Periscopic 2013)

Seeing this prompt for this week, I immediately thought of the firm that made the visualization above years ago about gun violence. Periscopic is a data viz firm that emphasizes their artistic foundation in every project. Their website showcases a lot of their hand drawn process behind every final piece, and each project is developed and computed in a unique way for the cause. As a design student, I really appreciate not only their technical and artistic attention to detail, but their cultural awareness and ability to place their work in context of human lives, which often gets lost when talking about statistics and computer generated pieces.