SectionE – Page 4 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Rhythm of food

The project I choose is about visualizing several food searches on the Internet. The designer Moritz Stefaner investigates how people change preferences for particular food over months and years and how it creates a rhythm to showcase the seasonality of food queries. I love how they investigate this topic from many aspects, such as among different countries, different food, or different time.

Stefaner also puts a lot of effort into visualizing how food queries change monthly and yearly. He designed a circle with bars surrounding it clockwise to show different months. Each bar represents the number of times a keyword is searched. After that, he overlayed bars on one another with different colors across different years. Furthermore, he creates an animation to visualize the process more clearly. The rigidity in the structure of the data and clarity in its presentation makes me admire his effort.

Finally, Stefaner also provides clues to help the audience understand patterns in data. For example, in months with holidays like Halloween and Christmas. He puts a marker on that day in the graph to show how the frequency of food searches might change around that day.

Curve

This is my curve project. I am using mouseX to control the rotation, scale, and color of curves while using mouseY to control the number of iterations. Also, when you click, the curve changes. I really like how Hypocychoid and Epitrochoid are constructed and how different iterations of them overlap one another.

Hypocycloid

//Jason Jiang
//Section E

//Setting up variables
var nPts = 200;
var a = 80;
var N;
var b
var x;
var y;
var crvMode = 1;


function setup() {
    createCanvas(400, 400);
    frameRate(10)
    colorMode(HSB);
    }
    


function draw() { 
    //Mapping mouseY value to number of iterations
    N = map(mouseY, 0, height, 0, 25);
    b = a/N;
    background(0);

    //Draw Hypocychoid
    if (crvMode%2 == 0) {
    for(var i = 3; i <= N; i++) {
        //Decreasing strokeWeight each iteration
        strokeWeight(2-i*0.05)

        //Changing color according to mouseX
        stroke(255-mouseX*0.1, 100-i, 200-i*5)
        crv1(i);
        stroke(255-mouseX*0.1, 100-i, 100-i*5)
        crv1(PI+i);
    }
}   
    //Draw Epitrochoid
    else {
        for(var i = 3; i <= N; i++){ 
            //Decreasing strokeWeight each iteration
            strokeWeight(2-i*0.05)
        
            //Changing color according to mouseX
            stroke(mouseX*0.1, 100-i, 200-i*5)
            crv2(i);
            stroke(mouseX*0.1, 100-i, 100-i*5)
            crv2(PI+i);
        }
    }
}

//Hypocychoid
function crv1(m) {
    //Changing scale and rotation according to mouseX
    h = map(mouseX, 0, width, 1, 2, true)*m*0.05;
    angle = map(mouseX, 0, width, 0, PI);
   
    push()
    translate(width/2, height/2);
    
    //Rotate curve according to mouseX
    rotate(angle + m);

    //Drawing curves
    noFill();
    beginShape()
    
        for(var i = 0; i < nPts; i++){
            var t1 = map(i, 0, nPts, 0, TWO_PI)
            var t2 = t1*(a-b)/b
            x = h*((a-b)*cos(t1)+b*cos(t2))
            y = h*((a-b)*sin(t1)-b*sin(t2))

            //Adding random movement to the curve
            vertex(random(x+4, x-4), random(y+4, y-4));
        }
    endShape(CLOSE);
    pop();
}

//Epitrochoid
function crv2(m) {
    //Changing scale and rotation according to mouseX
    h = map(mouseX, 0, width, 1, 2, true)*m*0.05;
    angle = map(mouseX, 0, width, 0, TWO_PI);
    
    push()
    translate(width/2, height/2);

    //Rotate curve according to mouseX
    rotate(angle + m);

    //Drawing curves
    noFill();
    beginShape()

        for(var i = 0; i < nPts; i++){
            var t1 = map(i, 0, nPts, 0, TWO_PI)
            var t2 = t1*(a-b)/b
            x = h*((a-b)*cos(t1)+b*sin(t2))
            y = h*((a-b)*sin(t1)-b*cos(t2))
            vertex(x, y);
        }
    endShape(CLOSE)
    pop();
}

//Change curves when press mouse
function mousePressed(){
   crvMode++
   print(crvMode);
}

LO 07: The codex Atlanticus: Decoding Leonardo Da Vinci for the world by The Visual Agency, Italy

Codex-Atlanticus.it – A new light on Leonardo da Vinci's greatest work from The Visual Agency on Vimeo.

The codex Atlanticus is a digital collection of drawings and texts by Leonardo da Vinci which is a part of the original collection at Biblioteca Ambrosiana in Milan. The creators of this digital archive have utilized data for storytelling and visualize information through various filters with which the user can unravel information of a particular document, beyond what is specified in it. The most interesting part is how the interface works and interacts with the user through visualized data. One would be more informed of the archival material going through this digital interface.

Links:

https://thevisualagency.com/works/decoding-leonardo-da-vinci-for-the-world/

Project 7 – Composition With Curves

Using multiple layers of atomic spirals, I created a composition that emulates either the acquisition & rotation of electrons around a nucleus or planets around a Sun – whichever interpretation is up to the viewer. In order to emphasize the idea of ‘cosmic creation’, I added randomly generated stars that twinkle from last weeks project and a lower opacity epispiral in the background to give an subtle explosion type effect.

Features:
– mouseX controls a (rotation of the circulating bodies)
– mouseY controls n (scale of epispiral + no. of points)

sketch

// Name: Tsz Wing Clover Chau
// Section: E 
// email: ctchau@andrew.cmu.edu
// Project-07

var a = 0;
var atomStart = 360
let stars = [];
var nStars = 60;
var noiseParam = 0;
var noiseStep = 0.08;
var count = 0;
var twinkleRate = 10;



function setup() {
    createCanvas(480, 480);
    background(0);
    for (var i = 0; i<nStars; i++){
        stars.push([random(0, width), random(0, height), noise(noiseParam)]);
        noiseParam += noiseStep;
    }
}

function draw() {
    background(0);

    for (var i = 0; i<nStars; i++){
        curStar = stars[i];
        push();
        noStroke();
        fill(100);
        circle(curStar[0], curStar[1], curStar[2]*5);
        if (count % twinkleRate == 0){
            twinkle(curStar)
        }
        
        pop();
    }



    var h = constrain(mouseY, 0, height);
    var w = constrain(mouseX, 0, width);


    //atomic spiral
    noFill();
    stroke(255);
    
    a = map(h, 0, height, 0, 16);

    
    beginShape();
    for (var i = 60*a; i <= 360*a; i++){
        var theta = radians(i);
        var r = theta/(theta-a)*65;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        
        if (i == 360*a){
            push();
            fill(190);
            circle(x, y, width/70);
            pop();

        } 
    }
    endShape();


    // SUN / NUCLEUS
    a2 = map(h, 0, height, 0, 10);
    beginShape();
    for (var i = -360*a2; i <= 0; i++){
        var theta = radians(i);
        var r = theta/(theta-a2)*50;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        if (i == -360*a2){
            push();
            fill(255);
            stroke(2);
            circle(x, y, width/20);
            pop();
        }
    }
    endShape();


    b = map(h, height/3, height, 0, 16);
    beginShape();
    for (var i = 60*b; i <= 360*b; i++){
        var theta = radians(i);
        var r = theta/(theta-b)*100;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
        
        if (i == 360*b){
            push();
            fill(190);
            circle(x, y, width/50);
            pop();

            circle(x, y, width/20);
        } 
    }
    endShape();



    if (mouseY >=  height/2){
        c = map(h, height/2, height, 0, 16);
        beginShape();
        for (var i = 90*c; i <= 360*b; i++){
            var theta = radians(i);
            var r = theta/(theta-c)*150;
            var x = r * cos(theta) + width/2;
            var y = r * sin(theta) + height/2;
            vertex(x, y);

            
            if (i == 360*c){
                push();
                fill(190);
                circle(x, y, width/50);
                pop();
            } 
        }
        endShape();
    }
    
    

    //poinsot's spirals
    var n = map(w, 0, width, 0, 8);
    push();
    stroke(150, 150, 150, 150);

    beginShape();
    for (var i = -360; i <= 360*b; i++){
        var theta = radians(i);
        var r = pow(n, 3)*abs(1/cos(n*theta));
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
    }    
    endShape();
    pop();

    count++;

}


function twinkle(star){
    //constraining star size
    if (star[2] >= 1){
        star[2] -= random(0.8, 0.8);
    } else {
        star[2] += random(-0.4, 0.4);
    }
    star[2] = abs(star[2]);
}

Looking Outwards 07: Information Visualization

Where the Wild Bees Are
Moritz Stefaner (+ Jen Christiansen + Jillian Walters)
Nobember 28, 2013

Where the Wild Bees Are – Scientific American

Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
What do you know (or what do you suppose) about the algorithms that generated the work?
It what ways are the creator’s artistic sensibilities manifest in the final form?

The project I have chosen to discuss is ‘Where the wild bees are” by Mortiz Stefaner (+ Jen Christiansen + Jillian Walters). It is an information graphic showing the status of various bee species and the relationship between each bee species the plant species they frequently interact with. One thing I admire is the sheer quantity and complexity of data the graphic is able to succinctly and clearly communicate on a single page. Great care has also been put into establishing a visual language of circular charts, each representing a single bee species, that is reminiscent of the hexagonal bee comb structure to emphasize the bee theme, allowing the graphic to feel clean and coherent. A short explanation of the various visual elements and their meaning can be found on the left, but it is split into short sentences that are easy to parse.

According to Stefaner’s blog post detailing their progress, the first and most crucial step was understanding the feel of the texture of the data – “understanding what can be done with it, and which views seem to generate the most interesting insights.” They first entered the data into a spreadsheet-style program called Tableau and produced a matrix view, which allowed to them to judge the denseness of connectivities between different network links and identify connection patterns. They then investigated the topology of the network (via gephi, an open graph visualisation platform), trying to see if there were any emergent commonalities between bee species that had gone extinct.

Organising the plants on the ‘ground’ and the bees in the ‘air’, they then connected the different data sets. However, it became complicated very quickly and difficult to read, prompting them to adopt a more general ‘plant visitation profile’ that highlighted each bee species individually.

“In this case, shifting the view from the macro-patterns to the micro-level… was crucial to untangle the mess and make sure the basic statistics about the bees – the main story = came across well.”

looking-outwards 06

Clare Katyal

I am inspired by the randomness in the piece 4900 Colours: Version II by Gerhard Richter. Richter used a computer program to randomly assign a color to each 5×5 square, which is then put together with other squares in forty-nine 10×10 displays. The colors were randomly selected from a palette of 25 colors. This piece is very interesting because it was created in order to demonstrate the joy of looking at objects that at first glance, do not have any meaning other than being squares. And yet, the random colors and the patterns created by randomness can provoke deeper thought from viewers and inspire them to question how often colors appear randomly together. The arrangement of the panels was not done randomly, but by the artist. This makes one wonder if art is ever truly random, or if there is always a slight oversight or bias from the artist creating the art.

https://plus.maths.org/content/understanding-uncertainty-pure-randomness-art

Gerhard Richter, 2007

Project 6 – Abstract Clock

Before we had clocks, we looked to the skies and celestial bodies above to tell time and orientation. For this project, I’ve plotted a night sky with 12 different constellations that appear as the day progresses, with meteor showers occuring every 5 minutes.

Basic Features:
– Stars that twinkle randomly
– Background color based on time of day (lightens as day progresses)
– 12 different constellations (accurate to Northern Hemisphere in August)
– Every hour a new constellation appears
– Meteor showers or ‘shooting stars’ that occur every 5 minutes to indicate the passing of 5 minutes

(Please note that in order to import the star data without using a csv (due to difficulties circumventing CORS policy) the first 495 lines of code are all star + constellation information.)

sketch

// Name: Tsz Wing Clover Chau
// Section: E 
// email: ctchau@andrew.cmu.edu
// Project-06



let data = [   //first constellation
            [[[-81.30973247,    45.89753673, "L"],   
              [-69.80657573,    27.25487531, "L"],
              [-83.5701992,     13.59553656, "L"],
              [-102.9353214,    33.81097102, "M"],
              [-81.30973247,    45.89753673, "L"]],
 
             [[-81.30973247,    45.89753673, "L"],
              [-83.21194136,    57.57386131, "M"],
              [-78.00737768,    70.19871847, "M"],
              [-65.52047168,    90.38733495, "M"]],
 
             [[-81.30973247,    45.89753673, "L"],
              [-79.00179591,    58.28543518, "S"],
              [-72.71622665,    66.82432172, "M"],
              [-56.23603836,    80.84899719, "M"]],
 
             [[-69.80657573,    27.25487531, "L"],
              [-63.09108408,    24.45143041, "M"],
              [-59.33124834,    12.51803871, "S"],
              [-53.67504909,    9.38172277 , "S"]],
 
             [[-69.80657573,    27.25487531, "L"],
              [-70.35891151,     20.90153254, "M"],
              [-70.22649991,     18.78294683, "S"],
              [-58.83910175,     0.068773112, "S"],
              [-51.8212866,     -0.549147718, "S"]],

             [[-83.5701992,     13.59553656, "L"],
              [-80.88006024,     5.718673925, "S"],
              [-80.74322899,     2.504256586, "M"],
              [-74.12860005,    -9.286504731, "M"],
              [-63.76642979,    -8.872286463, "M"]]],

             // second constellation
            [[[39.01312993,   70.78430398,   "L"],
              [47.35506114,   71.00498999,   "L"],
              [49.34123524,   60.19137546,   "L"],
              [43.77750399,   57.0099355 ,   "M"],
              [42.04897812,   50.0771234 ,   "L"],
              [40.28349003,   44.51583592,   "M"],
              [43.01999656,   36.48286513,   "M"]],
 
             [[43.77750399,   57.0099355 ,   "M"],
              [39.01312993,   70.78430398,   "L"],
              [33.53041101,   86.12662728,   "M"],
              [30.9148731 ,   97.89654786,   "M"],
              [41.18456465,   84.69474518,   "M"],
              [50.58589777,   91.84811645,   "M"],
              [51.67570523,   92.99241428,   "M"],
              [53.03796456,   104.6533541,   "S"],
              [55.49003134,   104.2719215,   "S"]],
                 
             [[85.42531527,   58.66254473,   "S"],
              [82.46534439,   59.53708159,   "M"],
              [58.44921701,   58.7298168 ,   "M"],
              [65.24369563,   67.20609705,   "M"],
              [71.43272565,   81.13141461,   "M"],
              [68.6072989 ,   83.14957657,   "S"]],
                 
             [[49.34123524,   60.19137546,   "L"],
              [58.44921701,   58.7298168 ,   "M"]],
                 
             [[41.18456465,   84.69474518,   "M"],
              [47.35506114,   71.00498999,   "L"]],
                 
             [[85.42531527,   58.66254473,   "S"],
              [82.46534439,   59.53708159,   "M"],
              [58.44921701,   58.7298168 ,   "M"],
              [65.24369563,   67.20609705,   "M"],
              [71.43272565,   81.13141461,   "M"],
              [68.6072989 ,   83.14957657,   "S"]]],
 
             // third constellation
            [[[1.458598798,   66.23616304,  "L"],
              [2.352193916,   60.74930789,  "S"],
              [4.368337719,   56.17211655,  "S"],
              [9.653903905,   52.95718454,  "S"],
              [16.19118114,   51.23449244,  "L"],
              [15.10294121,   47.50814724,  "M"],
              [8.564096444,   49.46980066,  "S"],
              [9.653903905,   52.95718454,  "S"]]],
            
             // fourth constellation
            [[[-6.590790179,   -83.80630313, "L"],
              [-0.615323792,   -77.31080679, "L"],
              [-5.71200542,    -76.35517899, "L"],
              [-8.064704903,   -69.53493942, "L"],
              [-13.86042784,   -71.60960823, "S"],
              [-17.56801424,   -70.75267342, "L"],
              [-21.50545029,   -72.71002812, "S"],
              [-20.14209587,   -76.22259689, "L"],
              [-6.590790179,   -83.80630313, "L"]],

             [[-13.86042784,   -71.60960823, "S"],
              [-20.14209587,   -76.22259689, "L"]],

             [[-5.71200542,    -76.35517899, "L"],
              [-6.590790179,   -83.80630313, "L"]],

             [[-5.71200542,    -76.35517899, "L"],
              [-6.590790179,   -83.80630313, "L"]],
             
             [[-8.064704903,   -69.53493942, "L"],
              [-3.082627727,   -63.36904156, "S"]],
 
             [[-17.56801424,   -70.75267342, "L"],
              [-20.38617647,   -63.6192995,  "S"],
              [-21.99497748,   -62.36800982, "S"],
              [-25.96335333,   -57.61310903, "S"]],
 
             [[-6.590790179,   -83.80630313, "L"],
              [-5.114574435,   -87.96959846, "M"]],
 
             [[-21.50545029,   -72.71002812, "S"],
              [-31.81704138,   -67.75307637, "S"],
              [-39.34651974,   -70.82585414, "S"],
              [-41.38721948,   -71.52954371, "S"],
              [-40.9202775,    -83.68265947, "S"],
              [-41.1347843,    -84.75519348, "S"],
              [-39.40063134,   -97.38439895, "S"],
              [-27.41782088,   -102.2813735, "S"],
              [-27.72946212,   -102.9794499, "S"]],
 
             
             [[-39.34651974,   -70.82585414, "S"],
              [-28.01323318,   -94.69202961, "S"]],
 
             [[-20.38617647,   -63.6192995,  "S"],
              [-18.02660164,   -62.86852569, "S"]]],
            
             //fifth constellation
            [[[51.68313157, -74.59487497,    "S"],
              [51.85688208, -71.58319946,    "S"],
              [49.91857688, -50.48883666,    "M"],
              [54.8517741 , -41.53970748,    "M"],
              [66.68054428, -49.44026667,    "M"],
              [64.1863709 , -65.64553098,    "M"]],

           
             [[49.91857688, -50.48883666,    "M"],
              [66.68054428, -49.44026667,    "M"]]],

              // sixth constellation
              [[[-28.25049035,    21.90763427, "L"],
              [-29.05237454 ,  -8.933976793, "M"],
              [-30.05337011,   -21.79845264, "L"],
              [-32.01340999 ,  -24.46854673, "S"],
              [-38.51780667 ,  -32.31873544, "S"],
              [-23.73184394 ,  -30.50911015, "S"],
              [-15.83268968,   -18.49868084, "M"],
              [-28.47445623,   -20.35135353, "M"],
              [-6.246178612,    7.80368656 , "L"],
              [-7.700470381,    9.046871459, "S"],
              [-28.25049035,    21.90763427, "L"]],
 
             [[-28.25049035,    21.90763427, "L"],
              [-27.20862688,    15.00847228, "L"],
              [-23.75429763,    7.316898561, "M"],
              [-19.5234676,    -1.520496344, "M"]],
 
 
             [[-42.86022433,    9.735155491, "M"],
              [-35.20115034,    10.69366795, "M"],
              [-27.20862688,    15.00847228, "L"],
              [-18.11568352,    17.26722891, "M"],
              [-13.08553401,    23.52012366, "M"],
              [-10.87867391,    24.49114211, "M"]],
 
             [[-15.83268968,   -18.49868084, "M"],
              [-14.51018108 ,  -17.07162404, "S"]],
 
             [[-23.73184394 ,  -30.50911015, "S"],
              [-19.20732445 ,  -40.8800735,  "S"],
              [-17.88320838 ,  -42.11591516, "S"]],
 
             [[-8.005402526,    6.677783255, "S"],
              [-10.13992754,    6.396307428, "S"],
              [-11.87569514,    1.963063164, "S"]]],

             //seventh constellation
            [[[60.54101784,   2.275816369, "L"],
              [48.47102481,    6.48703491 , "M"],
              [37.83395909,    9.664913466, "M"],
              [37.21603826,    18.80131432, "M"],
              [44.145579  ,    20.34611639, "M"],
              [49.35376885,    12.40142   , "S"],
              [60.54101784,    2.275816369, "L"]],

             [[49.35376885,   12.40142   , "S"],
              [49.08894564,    10.94489233, "S"]],

             [[56.89016285,   -7.804902645, "S"],
              [60.54101784,    2.275816369, "L"],
              [66.91639149,    4.836863903, "M"]]],

            //eigth constellation
            [[[61.03712532,   -23.51897245, "M"],
              [76.2399394 ,   -17.85197365, "M"],
              [87.20224289,   -16.41843998, "M"],
              [98.36940576,   -2.089490027, "M"],
              [108.4602156,   -5.991269825, "M"],
              [109.69881  ,   20.01815869 , "S"],
              [119.3328342,   23.67244373 , "S"]],
             
             [[65.55982628,  -32.94580699,  "M"],
              [75.53156455,  -30.43924983,  "M"],
              [98.62336421,  -31.35454998,  "L"],
              [108.4602156,  -5.991269825,  "M"],
              [116.0938088,   1.248421898,  "S"]],
             
             [[88.35446325,   6.729849457,  "M"],
              [98.36940576,  -2.089490027,  "M"]],

             [[76.2399394 ,   -17.85197365, "M"],
              [75.53156455,  -30.43924983,  "M"]],

             [[87.20224289,   -16.41843998, "M"],
              [98.62336421,  -31.35454998,  "L"]]],
            
            //ninth constellation
            [[[-27.97036149,    97.86651501, "S"],
              [-18.94048898,    94.12007854, "S"],
              [-9.09408544 ,    98.29879614, "S"],
              [-10.59327567,    108.0279711, "S"],
              [-16.74127398,    119.7956241, "S"]]],

            //tenth constellation
            [[[5.319571808 ,     15.27986704, "S"],
              [2.225986467 ,     5.831577348, "S"],
              [8.997290938 ,     6.071090008, "S"],
              [11.07069217 ,     5.894303006, "M"],
              [15.10868883 ,     0.099613614, "S"],
              [12.50228334 ,    -7.032641486, "M"],
              [8.481085936 ,    -5.839664643, "S"],
              [4.56767671  ,    -4.368466998, "M"],
              [2.171312707 ,    -2.838674937, "S"],
              [-0.355196297,    -3.244706657, "S"]],
                 
              [[2.171312707, -2.838674937,  "S"],
               [1.709621983, -1.653668745,  "S"]],
                
              [[26.18888289, 16.05781367 ,  "S"],
               [22.33741325, 17.38990091 ,  "S"],
               [19.76011401, 18.25865346 ,  "S"],
               [18.39717201, 13.36557494 ,  "S"],
               [17.32571053, 9.224521115 ,  "M"],
               [19.39550622, 1.749250539 ,  "M"],
               [24.48804677, -8.578746279,  "M"],
               [26.93450093, -10.89496905,  "M"],
               [27.19512669, -16.68665272,  "M"],
               [25.66033052, -20.2774966 ,  "M"]],
                
              [[12.50228334, -7.032641486,  "M"],
               [13.73443018, -18.42818892,  "S"],
               [24.48804677, -8.578746279,  "M"]],
                 
              [[15.10868883, 0.099613614,   "S"],
               [19.39550622, 1.749250539,   "M"]],
                   
              [[11.07069217, 5.894303006,   "M"],
               [17.32571053, 9.224521115,   "M"]]],

            // eleventh constellation
            [[[12.6209419,     -76.17543312, "M"],
              [14.31490933,    -68.88084874, "M"],
              [12.81336171,    -67.87981699, "M"],
              [14.8154252 ,    -63.08916507, "M"],
              [6.204943095,    -29.96074626, "M"],
              [8.275577271,    -20.3704406,  "L"],
              [19.03382074,    -23.72757948, "M"],
              [28.02080187,    -31.100746,   "M"],
              [34.45008626,    -37.57453788, "M"]],
 
             [[6.204943095,    -29.96074626, "M"],
              [5.314500086,    -32.52363291, "S"],
              [1.666573231,    -47.94643484, "M"]],   
 
             [[-14.81981548,   -29.73185186, "S"],
              [-4.719413958,   -39.09939645, "M"],
              [7.351003499,    -51.95056182, "S"],
              [8.924053384,    -55.20391499, "M"],
              [14.03646551,    -51.87905955, "S"],
              [17.70651702,    -55.28452075, "L"]],
 
             [[17.70651702,    -55.28452075, "L"],
              [28.15534601,    -47.71694618, "L"],
              [33.53711124,    -39.03884973, "M"],
              [34.45008626,    -37.57453788, "M"]],
           
 
             [[6.204943095,    -29.96074626, "M"],
              [1.144487844,    -32.23404872, "S"],
              [-0.129682563,   -32.90009235, "S"],
              [0.941778916,    -34.00051224, "S"]],
 
 
             [[19.03382074,    -23.72757948, "M"],
              [19.93153171,    -22.45340907, "S"]]], 
            
            // twelth constellation
            [[[-44.13070076,  -47.56894476, "S"],
              [-45.54745045,  -50.83836714, "M"],
              [-49.22571716,  -54.74951485, "S"],
              [-48.61759037,  -55.6182674 , "S"],
              [-57.2778691 ,  -66.24946712, "S"],
              [-60.10329585,  -68.26762909, "S"],
              [-65.55710623,  -64.4554043 , "S"],
              [-72.68365623,  -58.95743272, "S"],
              [-73.28305034,  -57.26823116, "S"],
              [-75.51715563,  -53.29043393, "S"],
              [-78.73208764,  -46.15219506, "M"],
              [-76.00756899,  -47.35098326, "S"],
              [-68.43340714,  -49.53059819, "S"],
              [-62.71191797,  -51.98266497, "S"],
              [-44.13070076,  -47.56894476, "S"]]],

            // single stars

            [[[104.9886578 ,     52.44117013 ,   "M"],
              [106.1322829 ,     32.59591081 ,   "M"],
              [113.6667542 ,     47.59758141 ,   "M"],
              [5.11024982  ,    -88.47011433 ,   "M"],
              [88.41769489 ,    -64.89519854 ,   "M"],
              [11.27889721 ,    -30.50408545 ,   "M"],
              [-3.37534974 ,     67.12602697 ,   "M"],
              [35.62895531 ,    -68.60804233 ,   "M"],
              [40.36506015 ,    -59.2406066  ,   "M"],
              [43.70513643 ,    -69.07280707 ,   "M"],
              [42.7175803  ,    -63.12573704 ,   "M"],
              [42.13375365 ,    -35.96420913 ,   "M"],
              [39.80992995 ,    -25.98964281 ,   "M"],
              [34.84245066 ,    -13.29661451 ,   "M"],
              [35.94287055 ,     -9.676812218,   "M"],
              [37.47766673 ,    -12.74640456 ,   "M"],
              [42.60330677 ,    -17.49558517 ,   "M"],
              [41.27916704 ,    -23.18270057 ,   "M"],
              [-19.04817726,    -88.46549279 ,   "S"],
              [-21.80293192,    -88.17308867 ,   "S"],
              [-22.75709275,    -89.55816084 ,   "S"],
              [-23.0636038 ,    -92.31056828 ,   "S"],
              [-22.43683664,    -94.61454593 ,   "S"],
              [-20.48514261,    -97.60750188 ,   "S"],
              [-15.55931565,   -100.4457165  ,   "S"],
              [-16.74127398,    119.7956241  ,   "S"],
              [-10.59327567,    108.0279711  ,   "S"],
              [-27.97036149,     97.86651501 ,   "S"],
              [-18.94048898,     94.12007854 ,   "S"],
              [-13.27280304,     86.72326807 ,   "S"],
              [-9.09408544 ,     98.29879614 ,   "S"],
              [-42.27589132,     -9.540592057,   "S"],
              [-41.9227937 ,    -11.52676616 ,   "S"],
              [-41.9227937 ,    -15.76393756 ,   "S"],
              [-43.79845795,     -8.625985361,   "S"],
              [-43.22467432,    -10.47974785 ,   "S"],
              [-13.72874433,     9.44562888  ,   "S"],
              [-14.54971549,     8.530832444 ,   "S"],
              [33.94988529 ,    13.19588964  ,   "S"],
              [69.46108546 ,    23.60510962  ,   "S"],
              [79.9786976  ,    12.72308656  ,   "S"],
              [78.64087004 ,    34.91748725  ,   "S"],
              [-47.60015863,   -30.24429763  ,   "S"],
              [-52.49938807,   -35.14352707  ,   "S"],
              [-57.26620591,   -18.76862507  ,   "S"],
              [-58.76687078,   -15.63488371  ,   "S"],
              [-54.57383658,   -12.85423997  ,   "S"],
              [-53.60281813,   -13.03078878  ,   "S"],
              [30.93918652 ,   -55.61717811  ,   "S"],
              [32.58373868 ,   -57.97675294  ,   "S"],
              [33.97803289 ,   -60.2648255   ,   "S"],
              [31.22519559 ,   -62.6959026   ,   "S"],
              [38.07330037 ,   -58.95429872  ,   "S"],
              [39.8021085  ,   -61.02328683  ,   "S"],
              [43.94435199 ,   -54.39176988  ,   "S"],
              [-8.005445306,   -105.0033915  ,   "S"],
              [-2.356766173,   -104.9318892  ,   "S"],
              [30.67780305 ,    -85.10779604 ,   "S"],
              [32.46048329 ,    -84.07571801 ,   "S"],
              [41.77341897 ,    -87.2819446  ,   "S"],
              [44.06113402 ,    -90.49632903 ,   "S"],
              [47.24656004 ,    -81.49026093 ,   "S"],
              [50.3451108  ,    -83.54630863 ,   "S"],
              [51.67719804 ,    -82.88026501 ,   "S"],
              [52.33248013 ,    -98.81150986 ,   "S"],
              [58.84812426 ,    -95.04691547 ,   "S"],
              [53.56322507 ,    -95.84327739 ,   "S"],
              [58.64277685 ,    -86.21382367 ,   "S"],
              [73.95741511 ,    -83.33540582 ,   "S"],
              [59.67565503 ,    -74.68175023 ,   "S"],
              [70.24547773 ,    -69.81673594 ,   "S"],
              [44.55936066 ,    -74.0157066  ,   "S"],
              [55.68343334 ,    -24.77410426 ,   "S"],
              [60.08082279 ,    -32.78235823 ,   "S"],
              [40.16744129 ,    -22.02126697 ,   "S"],
              [-28.65268571,    -34.7891396  ,   "S"],
              [-13.20466495,    -40.96834791 ,   "S"],
              [-9.497139968,    -45.60275414 ,   "S"],
              [-6.407535816,    -46.57377258 ,   "S"],
              [-7.96784617 ,    -54.24914286 ,   "S"],
              [-0.560136995,    -24.5197572  ,   "S"],
              [-10.68766986,    -14.29161588 ,   "S"],
              [-10.16641833,    -11.42473247 ,   "S"],
              [-4.606402005,    -10.72973043 ,   "S"],
              [-0.725973947,    -11.97494241 ,   "S"],
              [-25.80629245,    -24.41817625 ,   "S"],
              [-71.25040192,    -77.43958597 ,   "S"],
              [-64.2745821 ,    -77.98540056 ,   "S"],
              [-59.91294378,    -81.310256   ,   "S"],
              [-62.24452988,    -41.89702708 ,   "S"],
              [-71.38093073,    -34.2612911  ,   "S"],
              [69.51227912 ,      5.467669522,   "S"],
              [70.549062   ,      2.393072019,   "S"],
              [107.9486287 ,     57.55384711 ,   "S"],
              [80.51445449 ,     78.84416438 ,   "S"],
              [83.27260918 ,     86.91681224 ,   "S"],
              [83.47442537 ,     68.88789869 ,   "S"],
              [100.1578976 ,     62.90068486 ,   "S"],
              [64.64441402 ,    109.6664684  ,   "S"],
              [49.1146577  ,     98.60492271 ,   "S"],
              [11.49177673 ,     72.23870395 ,   "S"],
              [15.26641233 ,     54.31944387 ,   "S"],
              [-6.152714418,     52.61545832 ,   "S"],
              [-17.60771933,     30.85955337 ,   "S"],
              [-15.24825692,     22.06359599 ,   "S"],
              [-22.66330689,     22.15187039 ,   "S"],
              [-22.66330689,     20.65120552 ,   "S"],
              [-33.0796866 ,     19.01812904 ,   "S"],
              [-32.63831458,     22.68151682 ,   "S"],
              [-38.37615086,     19.76846147 ,   "S"],
              [-36.56652557,     17.91469898 ,   "S"],
              [-37.096172  ,     28.11039269 ,   "S"],
              [-36.21342795,     33.09789653 ,   "S"],
              [-41.37748061,     15.39887846 ,   "S"],
              [-38.50856246,     18.1795222  ,   "S"],
              [-26.84551443,    -11.1849741  ,   "S"],
              [-53.76052441,     21.78456178 ,   "S"],
              [-80.19844615,     27.63723148 ,   "S"],
              [-36.86304668,      7.09621255 ,   "S"],
              [-33.02311009,      4.756940835,   "S"],
              [-31.52244522,      6.390017315,   "S"],
              [-20.17918426,     -5.571164473,   "S"],
              [-17.48175884,     -9.226660678,   "S"],
              [-26.47267039,     -6.22969016 ,   "S"],
              [-24.87874372,    -11.90844128 ,   "S"],
              [-25.13676322,    -12.61213084 ,   "S"],
              [-50.85272315,     26.86216427 ,   "S"],
              [-48.56412749,     28.44238509 ,   "S"],
              [-54.06765516,     39.77638269 ,   "S"],
              [-48.67310823,     36.77941217 ,   "S"],
              [-48.45514674,     34.32734538 ,   "S"],
              [-43.71448429,     37.92371    ,   "S"],
              [-43.60550354,     35.85307583 ,   "S"],
              [-41.31690787,     40.70271903 ,   "S"],
              [-41.31690787,     38.46861373 ,   "S"],
              [-38.75586034,     40.53924791 ,   "S"],
              [-53.3639135 ,     50.0685607  ,   "S"],
              [-47.5289726 ,     66.29329569 ,   "S"],
              [-41.48054119,     69.01781434 ,   "S"],
              [-46.54814588,     73.81296717 ,   "S"],
              [-58.31806646,     73.21357306 ,   "S"],
              [-19.90235346,     76.59197619 ,   "S"],
              [-67.85380515,     80.87790581 ,   "S"],
              [-85.70244993,     56.09141573 ,   "S"],
              [-87.95576721,     69.31483029 ,   "S"],
              [-94.77501688,     71.50884975 ,   "S"],
              [-95.24939946,     56.0321179  ,   "S"],
              [-50.36555387,     98.81623761 ,   "S"],
              [-45.91821713,    105.3389982  ,   "S"],
              [-43.30911291,     98.40115285 ,   "S"],
              [-34.65060103,     66.54015533 ,   "S"],
              [35.35434846 ,     33.92570089 ,   "S"],
              [41.26219059 ,     29.41076463 ,   "S"],
              [30.45760312 ,    124.6731233  ,   "S"],
              [15.20672482 ,    111.9510896  ,   "S"],
              [6.102884206 ,    112.6124797  ,   "S"],
              [1.356437388 ,    122.2998998  ,   "S"],
              [-33.24663947,    117.5951965  ,   "S"],
              [-42.97148247,    113.9780293  ,   "S"],
              [-44.75041717,    112.4955837  ,   "S"],
              [-35.97433934,    122.1611289  ,   "S"],
              [-33.36523512,    122.5762136  ,   "S"],
              [-99.20350628,     67.5572706  ,   "S"],
              [-98.72912369,     59.25557535 ,   "S"],
              [-56.51147925,     49.43528664 ,   "S"],
              [-57.9610908 ,     47.85962192 ,   "S"],
              [9.815890457 ,    -91.30950062 ,   "S"]]]
  
            ];

let starDim = [7, 5, 3];

var bgColor;

var meteorShower = false;
let meteorStart = [];
let meteorEnd = [];
let shootOffset = [];
let shootWeight = [];

var shootCount_start = 0;
var shootCount_end = 0;

var n = 200;
var nMeteors;

function setup() {
    ellipseMode(CENTER);
    createCanvas(480, 480);
    frameRate(10);

    // each constellation
    for (var i = 0; i < data.length; i++){ 
        //lines within constellation
        for (var j = 0; j < data[i].length; j++){ 
            // indiv stars within constellation
            for (var k = 0; k < data[i][j].length; k++){ 
                star = data[i][j][k];
                star[0] = map(star[0], -113, 120, 0, width);
                star[1] = map(star[1], -113, 120, 0, height);

                var r;
                var star = data[i][j][k];

                if (star[2] == "L"){
                    r = starDim[0];
                } else if (star[2] == "M"){
                    r = starDim[1];
                } else {
                    r = starDim[2];
                }
                star[3] = r;
            }
        }
    }
}

function initiateMeteorShower(){
    meteorStart = [];
    meteorEnd = [];
    shootOffset = [];
    //meteor steup
    nMeteors = int(random(0, 10))
    for (var i = 0; i<nMeteors; i++){
        var start;
        var end;
        var dirX;
        var dirY;

        //var pathRand = random(0,2)

        if (int(random(0,2)) == 0){
            start = [0, random(0, height)];
            end = [width, random(0, height)];

        } else {
            start = [random(0, width), 0];
            end = [random(0, width), height];

        }
        meteorStart.push(start);
        meteorEnd.push(end);
        shootOffset.push(random(2, 15));
        shootWeight.push(random(1,4));
    }
}



function draw() {
    var curTime = (hour()*3600) + (minute()*60) + second();
    bgColor = map(curTime, 0, 86400, 0, 255);

    background(bgColor);

    //every 10 minutes initiate meteor shower
    if (minute() %5 == 0){
        if (!meteorShower){
            initiateMeteorShower();
        }
        meteorShower = true;
    } else {
        meteorShower = false;
    }
    
    if (meteorShower){
        for (var i = 0; i<nMeteors; i++){
            shootingStar(meteorStart[i], meteorEnd[i], 
                         shootOffset[i], shootWeight[i]);
        //noLoop();
        }
    }
    

    //go through each constellation, draw lines between each pt
    for (var i = 0; i < data.length; i++){ // each constelation
        //lines within constellation
        for (var j = 0; j < data[i].length; j++){
            if (i < hour()%12){
                drawConstellation(data[i][j]);
            }
            // indiv stars within constellation
            for (var k = 0; k < data[i][j].length; k++){ 
                drawStars(data[i][j][k]);
                twinkle(data[i][j][k]);
            }
        }
    }

    


}


function drawStars(star){
    var r = star[3];
    push();
    noStroke();
    var c = (bgColor+200) %255
    fill(c)
    circle(star[0], star[1], star[3]*1.5);
    pop();
}

function twinkle(star){
    //constraining star size
    if ((star[2] == "L" & star[3] >= starDim[0]) || 
        (star[2] == "M" && star[3] >= starDim[1]) || 
        (star[2] == "S" && star[3] >= starDim[2])){
        star[3] -= random(0.8, 0.8);
    } else {
        star[3] += random(-0.8, 0.8);
    }
    star[3] = abs(star[3]);
}

function drawConstellation(constellation){
    var c = (bgColor+200) %255
    stroke(c);
    beginShape(LINES);
    for (var i = 1; i < constellation.length; i++){
        vertex(constellation[i-1][0], constellation[i-1][1]);
        vertex(constellation[i][0], constellation[i][1]);
    }
    endShape();
}


function shootingStar(curStar, nextStar, offset, shootWeight){
    var dx = (nextStar[0] - curStar[0])/n;
    var dy = (nextStar[1] - curStar[1])/n;


    if (shootCount_end < n){
        shootCount_end ++;
    }
    if (shootCount_end > offset){
        shootCount_start ++;
        
    }

    if (shootCount_start == n){
        shootCount_end = shootCount_end % n;
        shootCount_start = shootCount_start % n;
        meteorShower = false;
    }

    push();
    strokeWeight(shootWeight);
    var c = (bgColor+200) %255
    stroke(c, c, c, 180);
    line(curStar[0] + (shootCount_start*dx), 
         curStar[1] + (shootCount_start*dy), 
         curStar[0] + (shootCount_end*dx), 
         curStar[1] + (shootCount_end*dy));
    fill(c, c, c, 200);
    circle(curStar[0]+ (shootCount_end*dx), curStar[1]+ 
          (shootCount_end*dy), 5);
    pop();

}
``

Looking Outwards 06: Randomness

Artwork: Structure de Quadrilatères
Artist: Duncan Geere

The series of work I’ve chosen is Structure de Quadrilatères by Vera Mulnar, a Hungarian-born artist who many consider a pioneer of digital and algorithmic art.

I admire this work because there is an architectural quality to it that I quite enjoy. These works feature a series of quadrilaterals drawn with ink on paper.
However, each shape contains a degree of randomness – corners are offset and then returned to their original positions, heights and widths are lengthened and shortened randomly (probably through either a general random function or through perlin noise). The shapes overlap, shift and move in a way that gives the impression of vibration. Despite being composed purely of straight lines and rigid shapes (no curves), the work is dynamic yet controlled and invites the viewer to explore the identity of a shape.

Molnar’s experiments with generative art predate the cokmputer,
inventing the ‘machine imaginaire’ (ie. algorithms) follow a series of rules to create an artwork. After teaching herself the earliest programming language (Fortran), she fed punched cards into a computer which was attached to a plotter which moved a pencil or pen over a piece of paper. The discipline required to execute such a process as well as the intensity to even consider such an exploration in the first place is very evident in the final works.

Molnar is credited with saying: ‘My life is squares, triangles, lines. I am mad about lines’ and upon viewing her work, one can only agree.

Links:
https://www.artsy.net/artist/vera-molnar-1
https://spalterdigital.com/artists/vera-molnar/

Looking Outwards – 06

I admire the artwork of Tyler Hobbs called Continuity No. 8 made in 2014. It is from a series of work that is formed by pseudo-random quadrilaterals. The overlap of the quadrilaterals is the negative space, and the positive space is built up by layers. The proximity to the pseudo-random focal point changes the brightness, transparency, and sharpness of the positive space. The first layer helps generate the second layer, helping the work be more cohesive. This entire collection is generated this way, but this piece is my favorite because of its final composition. It reminds me of a subway passing by so fast with the lights bright. It seems never ending and continuous just like the name of the artwork, Continuity. I believe the artist shows their sensibilities in the bias of the pseudo random numbers that are chosen as the focal points of the work and the choice of picking this artwork to be shown. There must have been many iterations made using this process, so I think showing this specific one shows the artist’s sensibilities.

https://tylerxhobbs.com/essays/2014/randomness-in-the-composition-of-artwork

LO 06: Design 3-1. Data 4, 5, 6, 6, 6 by Hiroshi Kawano – 1964

Hiroshi Kawano was a Japanese philosopher who approached the field of digital art through philosophy. His generative artwork is based out of Mondrian using probabilistic methods of computation. In one of his works titled – Design 3-1. Data 4, 5, 6, 6, 6; also known as 2nd order color Markov chain, Kawano used a Japanese OKITAC 5090A computer which generated black and white print over which Kawano applied colors by hand. One thing that is interesting in works are the mutability of the Mondrian paintings through coding and randomizing the interrelationship of patterns. On the other hand, this makes me wonder about deterministic and indeterministic approaches.