Clover – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 11 – Generative Landscape

I combined handdrawn assets from a previous project with walking sprite from Assignment 9 to create a scene of a person walking outside. The sketchy ‘handdrawn’ aesthetic of the assets combined with the layers scrolling at different speeds to create a sense of parallax. Occasionally, another character will pass by between the layer behind the main character.

sketch

var walkImage = [];   // an array to store the images
var character;

var fgElem = [];
var mgElem = [];
var bgElem = [];
var pgElem = [];

var fg = [];
var mg = [];
var bg = [];
var pg = [];

function preload(){
    // walk cycle
    walkImage[0] = loadImage("https://imgur.com/8HlL26L");
    walkImage[1] = loadImage("https://imgur.com/VLCqhEO");
    walkImage[2] = loadImage("https://imgur.com/6rAVlb8");
    walkImage[3] = loadImage("https://imgur.com/2VRJjQ6");
    walkImage[4] = loadImage("https://imgur.com/zFCNtnG");
    walkImage[5] = loadImage("https://imgur.com/AnyR09P");
    walkImage[6] = loadImage("https://imgur.com/PMB0qDG");
    walkImage[7] = loadImage("https://imgur.com/CiQWgmP");




    //loading foreground
    fgElem[0] = loadImage("https://imgur.com/RUYNCQT");
    fgElem[1] = loadImage("https://imgur.com/UaNr8wZ");
    fgElem[2] = loadImage("https://imgur.com/LsfvMCm");
    fgElem[3] = loadImage("https://imgur.com/GRwR31R");
    fgElem[4] = loadImage("https://imgur.com/xQtPjEQ");
    fgElem[5] = loadImage("https://imgur.com/cTUW62y");
    fgElem[6] = loadImage("https://imgur.com/cY58wgx");


    //loading midground
    mgElem[0] = loadImage("https://imgur.com/lal5lq9");
    mgElem[1] = loadImage("https://imgur.com/c5fb0jp");
    mgElem[2] = loadImage("https://imgur.com/kKwofLH");
    mgElem[3] = loadImage("https://imgur.com/iN2MTZN");
    mgElem[4] = loadImage("https://imgur.com/QclBuA8");
    mgElem[5] = loadImage("https://imgur.com/IAaQ7Ta");
    mgElem[6] = loadImage("https://imgur.com/g3xh1GG");
    mgElem[7] = loadImage("https://imgur.com/LWmOUjc");
    mgElem[8] = loadImage("https://imgur.com/xSvimmS");

    //loading background
    bgElem[0]= loadImage("https://imgur.com/8MNPtj6");
    bgElem[1]= loadImage("https://imgur.com/4bjqW3c");
    bgElem[2]= loadImage("https://imgur.com/q7xaqWr");
    bgElem[3]= loadImage("https://imgur.com/gEnWbVW");
    bgElem[4]= loadImage("https://imgur.com/0yBIPM8");
    bgElem[5]= loadImage("https://imgur.com/6TYtEHn");

    //loading clouds
    pgElem[0] = loadImage("https://imgur.com/pdXo0gP");
    pgElem[1] = loadImage("https://imgur.com/ohLIq5A");
    pgElem[2] = loadImage("https://imgur.com/I9uzjJC");
    pgElem[3] = loadImage("https://imgur.com/JYXlm2v");
}


function setup() {
    createCanvas(400, 400);
    background(202, 240, 248);
    frameRate(12);
    imageMode(CENTER);
    character = makeCharacter(width/4, height*0.62, 0, 0);
    surpriseChar = makeCharacter(-width*2.5, height*0.62, -5.5, 0);

    var rand = 27;
    //loading foreground
    var x1 = random(1, width/4);
    for (var i = 0; i<rand; i++){
        var envChar = makeCharacter(x1, height*(0.63), 5.5, 0);
        envChar.imageNum = int(random(0, fgElem.length));
        x1 += random(width/(rand), (2*width)/rand);
        fg.push(envChar);
    }

     //loading midground
     var rand2 = 20;
     var x2 = random(1, width);
     for (var i = 0; i<rand2; i++){
         var envChar = makeCharacter(x2, height*(0.59), 2.5, 0);
         envChar.imageNum = int(random(0, mgElem.length));
         envChar.size = random(0.1, 0.17);
         mg.push(envChar);
         x2 += random(width/4, width/2);
     }

    //loading background
    var rand3 = 10;
    var x3 = random(1, width);
    for (var i = 0; i<rand3; i++){
        var envChar = makeCharacter(x3, height*(0.4), 1, 0);
        envChar.imageNum = int(random(0, bgElem.length));
        x3 += random(width/6, width/3);
       
        bg.push(envChar);
    }

    //loading clouds
    var rand4 = 4;
    var x4 = random(1, width*(2/3));
    for (var i = 0; i<rand4; i++){
        var y = random(height*0.05, height*0.4);
        
        var envChar = makeCharacter(x4, y, 0.2, 0);
        envChar.imageNum = int(random(0, pgElem.length));
        envChar.size = random(0.1, 0.2);
        pg.push(envChar);
        x4 += random(width/3, width/2);
    }
}


function draw() {
    background(190, 225, 230);
    push();
    noStroke();
    
    ellipseMode(CENTER);
    fill(246, 241, 209, 90);
    circle(width*0.75, height*0.17, width*0.27);
    
    fill(244, 222, 44, 70);
    circle(width*0.75, height*0.17, width*0.22);
    fill(244, 222, 44, 120);
    circle(width*0.75, height*0.17, width*0.17);
    fill(243, 222, 44);
    circle(width*0.75, height*0.17, width*0.12);
    pop();

    updateArray(pg, pgElem);
    for (var i = 0; i<pg.length; i++){
        pg[i].drawFunction(pgElem); 
        pg[i].moveFunction(pgElem);
        
    }  

    updateArray(bg, bgElem);
    for (var i = 0; i < bg.length; i++){
        bg[i].drawFunction(bgElem);
        bg[i].moveFunction(bgElem);
    }

    surpriseChar.drawFunction(walkImage);
    surpriseChar.stepFunction(walkImage);
    surpriseChar.moveFunction();
    


    updateArray(mg, mgElem);
    for (var i = 0; i < mg.length; i++){
        mg[i].drawFunction(mgElem);   
        mg[i].moveFunction(mgElem);
        
    }

    character.drawFunction(walkImage);
    character.stepFunction(walkImage);
    

    updateArray(fg, fgElem);
    for (var i = 0; i<fg.length; i++){
        fg[i].drawFunction(fgElem); 
        fg[i].moveFunction(fgElem);
        
    }  

    push();
    noStroke();
    fill(226, 208, 180);
    rect(0, height*0.74, width, height);
    pop();
}


// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter,
             moveFunction: moveCharacter
         }
    return c;
}

function stepCharacter(images){
    this.imageNum ++;
    this.imageNum = this.imageNum % images.length;
}

function moveCharacter(){
    this.x -= this.dx;
    if (this == surpriseChar & this.x > 200){
        this.x = -width;
    }
}

function drawCharacter(images){
    if (images == fgElem){
        push();
        translate(this.x, this.y);
        scale(0.1);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == bgElem){
        push();
        translate(this.x, this.y);
        scale(0.19);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == mgElem){
        push();
        translate(this.x, this.y);
        scale(0.18);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == pgElem){
        push();
        translate(this.x, this.y);
        scale(this.size);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else {
        if (this == surpriseChar){
            push();
            scale(-1, 1);
            image(images[this.imageNum], this.x, this.y);
            pop();
        } else {
            image(images[this.imageNum], this.x, this.y);
        }
    }
}

function updateArray(array, source){
    for (var i = 0; i < array.length; i++){
        elem = array[i];
        if ((source == fgElem & elem.x < -10)||
            (source != fgElem && elem.x < -100)){
            elem.x = width + random(width/4, width);
            elem.imageNum = int(random(0, source.length));
        }
    }
}

Looking Outwards 11: Societal Impacts of Digital Art

The article “How Artists Can Bridge the Digital Divide and Reimagine Humanity” by Agnes Chavez discusses the importance of bridging the ‘digital divide’ with regards to accessibility on 3 fronts:

Digital capacity building
Digital public goods
Digital inclusion

The ‘Space Cloud’, a 10,000 sqft inflatable pavilion equipped with programmable LED lights and virtual reality headsets is one such example of how focused long term engagement can help to dissemination such knowledge to students in rural New Mexico. This is just one method of working towards an “equitable and sustainable digital society” via “digital cooperation”.

Chavez outlines 2 levels of digital divide – the first being accessibility and affordability of information and communication technologies (ICT) and the second being the “production gap”. According to Chavez, current production of the digital content is monopolized by “a small group of elites”. Giving a diverse pool of people the skills to transition from consumers to producers of such content would not only help empower people of underserved communities, but it would also ensure a greater range of content and deep our understanding of society.

Chavez concludes by emphasizing the importance of multiplicity with respect to solving modern problems: “In a world of complexity and constant change, no one approach is sufficient… By supporting these artists creating new digital tools and experiences, we allow our diverse communities to participate in reimagining our humanity.”

One thing that was heavily emphasized in my undergraduate Architecture education was how multidisciplinary any given project could be. In the same way we are all participants in a larger society, a single building is but part of a greater urban fabric. The inclusion of multiple voices is essential for any amount of success.

Works Cited

Chavez, Agnes. “How Artists Can Bridge the Digital Divide and Reimagine Humanity”, National Endowments for the Arts, https://www.arts.gov/impact/media-arts/arts-technology-scan/essays/how-artists-can-bridge-digital-divide-and-reimagine-humanity.

Project 9 – Computational Portrait

This portrait is based on the idea of the probabilistic road map as described in ‘Probabilistic Roadmap Path Planning’ by H. Choset et al. where the figure in the portrait is graph G and the red background are obstacles/collisions.

Controls

RIGHT ARROW = advance drawing one step
ENTER = start & stop drawing
‘r’ = refresh

sketch

//Name: Tsz Wing Clover Chau
//andrewid: ctchau
//Section E
//Project 9


var chosenPixels;
var step;

var bgPx = [];
var rStep;

var range = 30;
var baseImage;


function preload(){
    baseImage = loadImage("https://i.imgur.com/PaF0PFq.png");
}

function setup(){
    createCanvas(480, 480);
    background(255);
    frameRate(30);
    baseImage.loadPixels();

    //init array
    chosenPixels = [];
    bgPx = [];
    step = false;
    rStep =  random(0, 30);

    for (var i = 0; i < rStep; i++){
        pt = makePoint(int(random(0, 480)), int(random(0, 480)));
        if (isRed(pt)) {
            bgPx.push(pt);
        } else {
            chosenPixels.push(pt);
        }
    }
}


function draw() {
    drawBg();
    if (keyIsDown(RIGHT_ARROW) || step){   // press right arrow to invidually step
        addPx();
    }
    drawFace();
}


//HELPER FUNCTIONS
function makePoint(px, py){
    var pt = {x: px, y: py};
    pt.c = baseImage.get(px, py);
    pt.neighbors;
    return pt;
}

function addPx(){
    rStep =  random(0, 100);
    var newPx = 0;
    while (newPx < rStep){
        pt = makePoint(int(random(0, 480)), int(random(0, 480)));

        //add to bg array + pick new if red
        while (isRed(pt)){
            if (int(random(0, 8)) == 1){
                bgPx.push(pt);
            }
            pt = makePoint(int(random(0, 480)), int(random(0, 480)));
        }

        var min_dist = range;
        for (var j = 0; j < chosenPixels.length; j++){
            var checkPx = chosenPixels[j];
            var d = dist(checkPx.x, checkPx.y, pt.x, pt.y);
            
            if ((dist(checkPx.x, checkPx.y, pt.x, pt.y) < range) & (d < min_dist)){
                min_dist = d;
                stroke(pt.c);
                strokeWeight(0.5);
                line(checkPx.x, checkPx.y, pt.x, pt.y);
                chosenPixels.push(pt);
                newPx ++;
                break;
            }
        }
    }
}


function isRed(pt){
    if (pt.c[0] > 50 & pt.c[1] < 30){
        return true;
    }
    return false;
}

function keyPressed(){
    if (keyCode == ENTER){  //ENTER to autocomplete
        step = !step;
    } else if (key == 'r'){  //press 'r' to reset!
        setup();
    }
}



function drawBg(){
    for (var i = 0; i < bgPx.length; i++){
        px = bgPx[i];
        px.c[3]= 80;
        stroke(px.c);
        strokeWeight(0.3);
        if (int(random(0,2)) == 1){
            line(px.x, 0, px.x, height);
        } else {
            line(0, px.y, width, px.y);
        }
    }
}

function drawFace(){
    for (var i = 0; i < chosenPixels.length; i++){
        var curPx = chosenPixels[i];
        stroke(curPx.c);
        strokeWeight(5);
        point(curPx.x, curPx.y);
    }
}

Logic/Pseudocode:

Configuration q = series of randomly generated non-background pixels (ie. not red).
Q = new randomly generated non-background pixels
- if distance from q -> Q < acceptable range, append to q
N = rStep (ie. no. of new non-background pixels added to q)

Probabilistic Roadmap Path Planning by H. Choset et Al

References:
http://www.cs.columbia.edu/~allen/F15/NOTES/Probabilisticpath.pdf

Looking Outwards 09: A Focus on Women and Non-binary Practitioners in Computational Art

Title: REAL/RAW/FAST Identity System
Artist: adidas x FIELD.IO
(Commissioned by: adidas Global Brand Design, Generative System Design: FIELD.IO, Motion & Identity Design: DIA, Media Asset Production: Stink, Creative Lead: Fleur Isbell, Xander Marritt, Lead Developer: Bruno Imbrizi Developer: Seph Li, Riccardo Cambiassi, Samuel Honigstein, Documentation: Kosuke, Chris Dumon, Executive Creative Direction: Marcus Wendt, Creative Director: Mile Hughes, Motion Design: Julien Bauzin, Producer: Alice Shaughnessy, Motion Design: Xavier Boivin, Strategy + Consulting: Vera-Maria Glahn)

The project I’ve chosen to discuss is the REAL/RAW/FAST Identity System designed by FIELD.IO (in collaboration with DIA) for sportwear brand adidas. According to the project description, the REAL/RAW/FAST Identity System is the “new face of adidas flagship stores: A Generative Identity System for Retail Screens – bespoke, dynamic, scalable.” Essentially, the system pulls from a pool of kinetic typefaces, procedural animations and local elements that move and change compositions on a series of screens in real time, to create a visual storefront with a bold and unique brand identity. One thing I admire is how it can be adapted from “a plug-and-play rollout to a bespoke flagship version, the Generative System provides solutions for any scale and use case”. The encoded flexibility of the system allows it to be adapted to different campaigns, regardless of content, and to different storefronts, regardless of scale/ screen arrangement. By designing a system, the same elements within a single campaign can be reconfigured and remixed to remain fresh and engaging to the consumer’s eyes. Not only is this project aesthetically simple and clean, the compositions generated and the transitions between such compositions feel seamless, effortless and very satisfying. For me, it is the perfect example of how systems design can integrate digital art into marketing without feeling awkward or clumsy like most digital art campaigns tend to, but also how basic coding and illustration skills can be leveraged to serve a large scale, lucrative project.

Of the members of the team that worked on the REAL/RAW/FAST Identity System, the creator I’ve decided to focus on is Vera-Maria Glahn. She is the managing director for FIELD.io, a digital art studio based in London, UK.
She completed her undergraduate education in Arbitur, Arts, German, English and Philosophy at the Gymnasium Theodorianum in 2003, going on to receive a Masters in Art in Visual Communication with Distinction from the Kinsthochschule Kassel (School of Arts & Design in Kassel) in 2009. She started her career in the media arts industry in 2003 as a producer and curator, notably for the Kassel Documentary Film & Video Festival in Germany and the V2_Institute for the Unstable Media in Rotterdam, Netherlands. She co-founded FIELD.io with Creative Director Marcus Wendt in 2009 following her postgraduate studies and currently manages and produces independent and commissioned digital art for various brand and cultural institutions around the world. I’ve chosen to focus on Vera-Maria because as a co-founder of FIELD.io, her ethics and approach to computational art is reflected in the brand’s direction, allowing me to discuss the brand’s values as a whole. Some of the brand’s core tenants include:

Imagination (new forms of brand experience, storytelling, creative expression)
Innovation (developing new forms of interaction, products and services)
Technology (deep engagement + understanding for technically rich content)
Relationships (establishing deep + long term connections with brands + people)
In particular, I really like how the brand (and likely due to Vera-Maria’s founding vision) have positioned themselves as pioneers of digital art and design strategies for major brands, and how everything – from their website UI to their projects to their team portraits on the website – serve to reinforce this vision.

Links:
https://field.systems/work/real-raw-fast-identity-system
https://2016.motionawards.com/judge/vera-maria-glahn/
https://www.linkedin.com/in/veraglahn/?originalSubdomain=de
https://expandedanimation.com/speaker/vera-maria-glahn/

Looking Outwards 08: The Creative Practice of an Individual

Joanie Lemercier
Landscapes & Algorithms
Eyeo 2017

Joanie Lemercier is a French artist based in Brussels and principal of studio Joanie Lemercier. None of his profiles online list any institution of education. He desribes himself as a visual artist operating on the mantra: “light as a medium, space as a canvas”, with an interest in playing with light, geometry and human perception to capture the ‘sublime’.

In 2007, he and several other friends started a collective ‘visual label’ called AntiVJ. Until he parted ways with them in 2013 to start his own practice, his body of work consisted of temporary (and then eventually permanent) museum and gallery installations, architectural projections on and inside monuments aroudn the world, live music events and festivals (eg. Mutek) alongside artists such as Flying Lotus and Adrian Utley.

FUJI (不死）(2014)

One major impression the video left on me was how much of Lemercier’s thought process paralleled mine. From the fascination with light and geometry, to our reliance on visual perception, to the ‘sublimity’ of nature, I felt that Lemercier was describing the motivations I was feeling in words even better than I would have.
In particular, when he talked about staring into the mountains and feeling this weird indescribable feeling, I remembered how when I lived in Hong Kong, whether it was during the day, or at sunset, or at 2am at night, when I felt restless, I would go to the harbour and stare out at the sea and just get lost in the waves. At the time, my main creative outlet was dance – and similar to how the mountains and topographical patterns influence Lemercier’s work – flow, layers, waves, compression and release inspired by the movement of the sea found themselves in my dance. Another thing I admired the intensity with which he approaches his work – He describes a period of his time at AntiVJ as ‘living inside the computer’ and even ends his talk but reaffirming his desire to continue chasing the representation of the ‘sublime’. I’ve come to realise I also have a tendency to hyperfixate on my passion projects. For instance, I’ve been increasingly interested in filmography and video editing, and every time I start a new project, I am unable to think about or focus on something else for at least 1-2 days. Hearing his words and seeing his body of work felt affirming, almost like he was saying: “This is how I interpreted my feelings [of the sublime] and how they informed my work. .. [If I can do it, so can you]”.

When presenting his work, he kept it simple and light, starting with a introduction of where he had gone and the relevant concept (ie. pantheism/ the sublime), moving onto a brief overview of the project (ie. where + when it was) and wrapping it up with 1 – 2 sentences offering an insight from behind the scenes. Because his work with projection is interactive and time based, when presenting his work, he included numerous videos or gifs of the places he visited and the at pieces in motion, and you were able to easily keep up and understand what he was talking about. For instance, I found it difficult to connect when he was describing the FUJI installation purely through words and still images. However, once he showed the video of the installation in motion, his process and his motivations became clear. The seeming effortlessness with which he was able to communicate the large breadth of his work, in my opinion, was facilitated by how directly he correlated his inspirations and his ideas to the resultant projects and will definitely be something I keep in mind in future projects.

Links:
https://joanielemercier.com/about/
http://eyeofestival.com/2017/speaker/joanie-lemercier/
https://joanielemercier.com/why-im-leaving-antivj/
https://www.clotmag.com/interviews/joanie-lemercier-projecting-the-sublime-of-light-and-space
https://vimeo.com/channels/eyeo2017/232544911

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

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/

Project 5 – Wallpaper

I was inspired by fruit slices and the cute illustrator aesthetic of fun summery-y wallpapers. There are 4 main types of types, when combined with various colors create a visually appealing pattern.

sketch

// Tsz Wing Clover Chau
// Section E

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

var nX;
var nY;
var n = 5;
var size;

var count1;
var count2 = 0;
var count3;
var swap = true;

let colors1 = [[230, 57, 70], [252, 213, 206], [255, 183, 3], [249, 220, 196], [231, 111, 81]];

let colors2 = [[254, 250, 224], [233, 237, 201], 
                            [236, 248, 248], [250, 237, 205], [255, 255, 255]];

function draw() {
    size = width/n;
    strokeWeight(3);

    ellipseMode(CENTER);

    for (var j = 0; j < n; j++){
        if (j %2 == 0){
            swap = false;
            count1 = 1;
            countUp = true;

            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                firstRow(i*size, j*size, size, i);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }
                count1 = count1%5;
                swap = !swap;
            }

        } else {
            swap = true;
            count1 = 4;
            
            countUp = false;
            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                count2 += 1;
                count2 = count2%5;
                count3 = count2;

                secondRow(i*size, j*size, size, i, j);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }

                count1 = count1%5;
                swap = !swap;
            } 
        }
    noLoop();
    }
}


function firstRow(x, y, r, i){
    if (swap){
        fill(colors1[count2]);
        if (i == 3){
            arc(x+r, y, r*(4/5), r*(4/5), HALF_PI, PI, PIE)


            push();
            noFill();
            stroke(50);
            arc(x+r, y, r, r, HALF_PI, PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x+(r*0.05), y+(r*0.95), r, r, -HALF_PI, 0, PIE);

        } else {
            arc(x+(r*0.95), y+(r*0.95), r*0.75, r*0.75, PI, -HALF_PI, PIE);

            push();
            noFill();
            stroke(50)
            arc(x, y, r, r, 0, HALF_PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x, y, r*(4/5), r*(4/5), 0, HALF_PI, PIE);
        }
    } else {
        fill(colors1[count2]);
        arc(x, y+r/2, r, r, -HALF_PI, HALF_PI, PIE);

        count2 += 1;
        count2 = count2 % 5;

        fill(colors1[count2]);
        arc(x+r, y+r/2, r*(4/5), r*(4/5), HALF_PI, -HALF_PI, PIE);

        push();
        noFill();
        strokeWeight(3);
        stroke(50);
        arc(x+r, y+r/2, r, r, HALF_PI, -HALF_PI, OPEN);
        pop();
    } 
}

function secondRow(x, y, r){
    if (swap){
        noFill();
        stroke(50);

        ellipse(x+r/2, y+r/2, r/3, r/3);

        noStroke();
        fill(colors2[count2]);
        ellipse(x+r/2, y+r/2, r/5, r/5);

    } else {
        fill(colors1[count3]);
        arc(x+r/2, y, r, r, 0, PI, PIE);
        count3 += 1;
        count3 = count3%5;
        fill(colors1[count3]);
        arc(x+r/2, y+r, r, r, PI, 0, PIE);
    }
}