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

Looking Outward 06: Randomness

labios

Title: labios

Artist: Manoloide

Date: 2018

I really admire the bold color choices in this piece of artwork. In my work so far in class, it’s been difficult to use bold colors with them looking tacky. This piece has a very smooth, continuous feel to it, which makes me wonder what code they used to generate the curves and shapes. I’m particularly curious about what was used to depict the lines separating apart from the multicolored curves. The almost gradient of the colors and the lack of sharp edges or corners help create the smooth and continuous feeling.

I would guess that there’s randomness components are used to generate the locations of spheres and the curves of the multicolored lines. There might also be randomness in the spacing apart of the lines at the locations they come apart at.

The image I found was not animated, but this piece would be fascinating to look at as an animation. If the code could use non linear movement (sine or cosine curves? Spherical movement?) to have the multicolored lines warp and shift, I would imagine that it would produce quite a mesmerizing effect.

Other artwork by Manoloide:

Project 05: Wallpaper

sketch

//Alana Wu
//ID: alanawu
//Project 05: Wallpaper


function setup()
{
    createCanvas(400, 400);
    background(255);
}

function draw()
{

    bigGrid (.25, 0);
    bigGrid(.125, 50);
    bigGrid(.0625, 75);
    noLoop();
}

//blue, dark red, yellow color scheme
/*function bigGrid (s, dist)
{
    for (var x = 0; x < 4; x ++)
    {
        for (var y = 0; y < 4; y ++)
        { 
            push();
            translate (x*100 + dist, y*100 + dist);
            scale (s);
            grid (40, 0, 13, 78, 255, 100, 10); //blue             
            grid (15, 300, 100, 0, 255, 255, 30); //violet
            grid (2, 150, 76, 25, 255, 120, 5); //red
            grid(10, 200, 255, 0, 0, 100, 10); //mustard
            grid (10, 300, 255, 236, 0, 150, 15); //yellow
            pop();
        }
    }
}*/

//green, blue, yellow, red color scheme
function bigGrid (s, dist)
{
    for (var x = 0; x < 4; x ++)
    {
        for (var y = 0; y < 4; y ++)
        { 
            push();
            translate (x*100 + dist, y*100 + dist);
            scale (s);
            grid (40, 0, 0, 255, 50, 150, 10); //green            
            grid (15, 300, 255, 0, 0, 255, 30); //red
            grid (10, 150, 0, 0, 55, 180, 15); //blue
            grid(10, 200, 255, 255, -200, 100, 10); //yellow
            grid (10, 300, 180, -100, -100, 150, 15); //dark red
            pop();
        }
    }
}

//pastels color scheme
/*function bigGrid (s, dist)
{
    for (var x = 0; x < 4; x ++)
    {
        for (var y = 0; y < 4; y ++)
        { 
            noStroke();
            push();
            translate (x*100 + dist, y*100 + dist);
            scale (s);
            grid (40, 0, 150, 255, 255, 100, 10); //pale blue             
            grid (30, 300, 150, 150, 255, 255, 30); //lavender
            grid (2, 150, 255, 80, 255, 120, 5); //pale pink
            grid(10, 200, 255, 200, 200, 100, 10); //pink
            grid (10, 300, 250, 250, 190, 150, 15); //pale yellow
            pop();
        }
    }
}*/


function grid (rectW, start, red, green, blue, opacity, dist)
{
    for (x = start; x <= width - rectW; x += dist)
    {
        var count = 0;
        fill (red, green, blue, opacity);
        rect (x, 0, rectW, height);
        rect (0, x, width/2, rectW);
        red += 10;
        blue += 20;
        green += 10;
    }

}

To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities.

After building the initial function, I played around with a lot of different color schemes and opacities, a few of which are shown below (scroll down past the code). For the future, I think it’d be interesting to try and create optical illusions.

Looking Outwards 05: 3D Computer Graphics

Artist: Stephan Martiniere, a concept illustrator and artist who’s created graphics for Avenger: Age of Ultron, Ready Player One, Avatar, Star Wars, and many other acclaimed films. He’s also produced 150+ book covers, comic book covers, and editorial illustrations for clients like National Geographic, Penguin and Random House, Pyr, etc.

Link to Artist’s Site: https://www.martiniere.com/portfolio

Link to article: https://archive.factordaily.com/cli-fi-science-fiction/

This piece of imagery was created for the book New York 2140 by Kim Stanley Robinson, which is set in a futuristic NYC that’s been flooded by rising sea level. I particularly like this piece of computer graphics because it helps people visualize the effects of climate change. Because the scope of climate change and its effects is so huge, for many of us, it’s hard to comprehend what the world will look like in 50, or even 10 years because of it. Not being able to comprehend the effects of climate change can result in either denying its existence, not doing anything about climate change (due to a feeling of helplessness), eco-anxiety, or taking tangible action. I think 3D computer graphics like this that depict how our world will look like with climate change will really help communicate the effects of climate change to people. This particular image is very optimistic and depicts a world in which we adapt to a changing Earth, so we could assume that the creator is optimistic about how humanity will adapt in the future. Pairing this piece with equally possible dystopian imagery would help show people what results from taking action now vs. not taking action now.

An interesting possibility would be to put together a project that exhibits an image of a current city, a produced image of how it’ll look in 50 years if we reduce carbon emissions by X amount by a certain time, and a produced image of how the city will look if we don’t reduce carbon emissions by X amount.

Environments artwork by Stephen Martiniere

Project 04 String Art

String Art Project Download

//Alana Wu
//ID: alanawu
//Project 04: String Art



function setup ()
{
    createCanvas (400, 300);
}

function draw ()
{
    background (0);
    if (mouseIsPressed)
    {
        background(255);
    }
    var x = 100;
    var y = 100;
    var dist = 50;
    var num = 5;

    push();
    translate (100, 75);
//white lines
    for (y = 10; y <= 300; y += 5)
    {
        strokeWeight (4);
        rotate (radians (-num + 180));
        stroke (255);
        if (mouseIsPressed)
        {
            stroke(0);
        }
        line (x + dist, y + dist, min (mouseX, 300), y);
        strokeWeight (.5);
        dist -= 1;
    }

//purple lines
    for (y = 100; y <= 200; y += .5)
    {
        rotate (radians (num));
        stroke (76, 0, 153);
        if (mouseIsPressed)
        {
            stroke (179, 255, 102);
        }
        line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
        dist -= 5;
    }
//light blue lines
    for (y = 200; y <= 400; y += 1)
    {
        rotate (radians (num));
        stroke (0, 255, 255);
        if (mouseIsPressed)
        {
            stroke (255, 0, 0);
        }
        line (min (mouseX, 400), y, x + dist, y + dist);
    }
    pop();

//white string in larger black circle
    push ();
    translate (300, 200);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//big circle
    ellipse (0, 0, 250, 250);
    for (var k = 0; k < 100; k+= 1)
    {
        rotate (radians (num));
        stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
        if (mouseIsPressed)
        {
            stroke (0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (1));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            push ();
            translate (-100, -50);
            for (var a = 0; a < 40; a ++)
            {
                stroke (100, 255, 100);
                rotate (radians (4));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            pop();
            noFill();
            ellipse (0, 0, 220, 220);
            ellipse (0, 0, 180, 180);
            ellipse (0, 0, 140, 140);
        }
        line (25, 0, 25 + mouseY/5, 45);
    }
    pop ();

//string in smaller black circle
    push();
    translate (180, 275);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//smaller circle
    ellipse (0, 0, 100, 100);
    for (var i = 0; i < 100; i ++)
    {
        rotate (radians (num));
        stroke (204, 204, 255);
        if (mouseIsPressed)
        {
            stroke (51, 51, 0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (num));
                line (15, 25, 15 + min (mouseX/10, 20), 35);
            }
        }
        line (15, 5, mouseY/8, 30);
        line (10, 5, min (mouseY, 50), min (mouseY, 50));
    }
    pop ();

    if (mouseIsPressed)
    {
        push();
        translate (mouseX, mouseY);
//circle of red string circles
        for (var c = 0; c <= 8; c ++)
        {
            translate (20, 20);
            for (var b = 0; b < 80; b ++)
            {
                stroke (255, 0, 0);
                rotate (radians (num));
                line (8, 8, 20, 20);
                noStroke();
            }
        }
        pop();
    }
}

For this project, it was hard to figure out what I wanted to do, since I didn’t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.

Looking Outwards 04: Sound Art

Created by Fraction, Louis-Phillippe St. Arnault, Nature Graphique, and Creation Ex Nihilo, Entropia is an immersive performance built of interconnected layers of media; a physical geodesic structure, immersive visuals, and sonic effects are synchronized by real time 3D programming. It’s meant to pay tribute to the architect and theorist of geodesic design, Richard Buckmeister Fuller.

I particularly admire how new artists added on to the project throughout its making, building new layers of media into what the previous artist had done. The fact that the production used real time programming was also very impressive, and therefore must creative a different experience each time Entropia is performed. The idea that an exact performance will never be recreated would probably make people appreciate all the more.

Going back to the idea that coding isn’t widely considered an “art”, having performances like this would help realize how coding can be artistic in itself. Coding could, like writing, be considered a creative way of expression… just in a different language.

Creators: Fraction, Louis Phillippe St-Arnault, Nature Graphique, Creation Ex Nihilo

First performed May 2015.

Project 03: Dynamic Drawing

This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right.

Dynamic Drawing Download

//Alana Wu
//ID: alanawu
//Section C
//Project-03

//sun and moon move in a circle centered in the canvas
// stars rotate around the moon
//clouds rotate around the sun
//when sun is above height/2, sunrise, then blue, then sunset colors
//when moon is above height/2, varying shades of blue 

function setup()
{
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var x = 30;

function draw()
{
    strokeWeight(0);
    background(0);

//moves (0,0) to center of canvas
    translate (300, 225);

//as mouse moves from left to right, background sky transitions
//from red (sunrise) to yellow, blue, yellow, and back to red(sunset)
    if (mouseX < 120)
    {
        fill (255, mouseX*2, 0);
    }
    if (mouseX>= 120 & mouseX < 220)
    {
        fill (255, 255, mouseX-40);
    }
//get from (255, 255, 180) to (50, 155, 255)
    if (mouseX>= 220 & mouseX < 300)
    {
        fill (50+(300-mouseX)*2.5, 155+(300-mouseX)*1.2, 255 - (300-mouseX));
    }
//get from (50, 155, 255) to (255, 255, 180)
    if (mouseX >= 300 & mouseX < 380)
    {
        fill (50+(mouseX-300)*2.5, 155+(mouseX-300)*1.2, 255-(mouseX-300));
    }
//from (255, 255, 180) to (255, 240, 0)
    if (mouseX >= 380 & mouseX < 480)
    {
        fill (255, 175+(480-mouseX), (480-mouseX)*1.4);
    }
    if (mouseX >= 480)
    {
        fill(255, 700-mouseX*1.1, 0)
    }
    rect (-300, -225, 600, 225);
    fill (mouseX/25, mouseX/25, 100);
    rect (-300, 0, 600, 225);

//draws background clouds that move horizontally
    push(0);
    fill(235);
 
 //if mouse is pressed, clouds change to dark gray and move left
    if (mouseIsPressed)
    {
        fill (90);
        x -= 5;
    }
    translate (-300, -225);
    ellipse (x, 45, 40, 40);
    ellipse (x+25, 30, 50, 50);
    ellipse(x+35, 60, 35, 35);
    ellipse (x+20, 50, 40, 40);

    ellipse (x+500, 150, 40, 40);
    ellipse (x+475, 160, 50, 50);
    ellipse(x+525, 170, 35, 35);
    ellipse (x+500, 180, 40, 40);

    ellipse (x + 300, 60, 40, 40);
    ellipse (x + 270, 70, 30, 30);
    ellipse (x + 285, 90, 50, 50);
    ellipse (x + 320, 90, 40, 40);

    ellipse (x+50, 100, 40, 40);
    ellipse (x+80, 130, 50, 50);
    ellipse(x+30, 132, 35, 35);
    ellipse (x+58, 135, 50, 50);
    pop();


//draws sun
    push();
    rotate (radians (135+mouseX/3.55));
    fill (255, 255, 0);
    ellipse (90, 90, 50, 50);
            translate (90, 90);
//draws 9 clouds around the sun
    for (var i = 0; i <= 8; i++)
    {
        rotate (radians (40));
        fill (255);
        strokeWeight(0);
        ellipse (mouseX/5 + 5, mouseY/5 + 5, 15, 15);
        ellipse (mouseX/5 - 8, mouseY/5-10, 15, 15);
        ellipse (mouseX/5, mouseY/5, 20, 20);
    }
    pop();

//draws moon
    push();
    
    rotate (radians(315+mouseX/3.55));
    fill (255, 255, 200);
    ellipse (90, 90, 50, 50);
    translate (90, 90);

//draws randomly moving stars around the moon 
    for (var j = 0; j < 5; j++)
        {
            rotate (radians(random (50, 80)));
            fill (255, 255, 204);
            rectMode (CENTER);
            rect (mouseX/9, mouseX/8, 5, 20);
            rect (mouseX/9, mouseX/8, 20, 5);
            push();
            translate (mouseX/9, mouseX/8);

//can you change the frameRate for only a section of the code?
            for (var h = 0; h <= 7; h++)
            {
                fill (255 - mouseX/7, 255 - mouseY/3, 255 - mouseX/5);
                rotate (radians (mouseY));
                ellipse (10+mouseX/20, mouseY/50, 8, 8);
            }
            pop();
        }

 //clouds move horizontally right by .5 every frame
    x += .5;

    pop();

}

Looking Outwards 03: Computational Fabrication

Wanderers computationally grows wearables through a process that emulates natural growth behavior. The shapes start out as a “seed” and adapt to their environment as they grow.

The process imitated biological growth by transforming a geometric input into an intermediate representation, then deforming the initial geometric representation. The deformed initial representation reacts to the deformation of the object. This process is done iteratively, so as it repeats, the deformations aggregate into visible growth of the object.

I admire this project because it take biomimicry to the next level; rather than emulating specific end product qualities found in nature, this project literally grows and adapts the same ways living organisms do. Most man-made creations lack this quality. This opens up a whole host of new possibilities in design because as humans, many aspects of the future will always be uncertain, so fixed design will always have a flaw. But if you create algorithms that are capable of adapting to future changes, then design will be much for capable and efficient. Many of the things we design (buildings, energy systems, etc) are meant to exist for long periods of time and will need to be able to adapt to uncertain changes (eg effects of climate change).

Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

sketch

//Alana Wu
//Section C


 var faceWidth = 120;
 var eyeLength = 20;
 var x = 200;
 var y = 250;
 var eyeThickness = 5; //for changing eye thickness
 var randomEars = 1; //for changing hat/ears
 var randomSun = 10; //for changing yellow polka dot locations

function setup() {
    createCanvas(640, 480);
}
 
function draw()
{
    background (51, 0, 102);

//if mouse is pressed on yellow sun, yellow polka dots appear
    if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
        && mouseY > .1*height && mouseY < .3*height) 
    {
        fill (255, 255, 0)
        strokeWeight(0);
        ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
        ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
        ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
        ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
        ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
        ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
        ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
        ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
        ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
        ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
        ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
        ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
    }

//blush button
    strokeWeight (0);
    fill (255, 0, 127);
    rect (15, 15, 70, 40);

//draws blue tear shape button
    fill (0, 0, 255);
    beginShape();
    curveVertex(50, 100);
    curveVertex(50, 100);
    curveVertex(25, 150);
    curveVertex(50, 175);
    curveVertex(75, 150);
    curveVertex(50, 100);
    curveVertex(75, 150);
    curveVertex(50, 100);
    endShape();

//draws sun
    fill (255, 255, 0);
    ellipse (.8*width, .2*height, width/5, width/5);
    strokeWeight(8);
    stroke(255, 255, 0);
    line ( .8*width, .2*height, .8*width + width/6, .2*height);
    line ( .8*width, .2*height, .8*width, .2*height + width/6);
    line ( .8*width, .2*height, .8*width, .2*height - width/6);
    line ( .8*width, .2*height, .8*width - width/6, .2*height);
    line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
    fill (255);
    strokeWeight (0);
    ellipse (x, y, faceWidth, faceWidth); //draws head shape

    strokeWeight (eyeThickness); //thickness of eye line
    stroke(0);
    line (x - faceWidth/5, y - faceWidth/5,
    x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
    line (x + faceWidth/5, y - faceWidth/5,
    x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line


//draws body
    strokeWeight(5);
    stroke(255);
    fill (255);
    line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
    line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
    line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs 
    line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet 
    line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
    if (mouseIsPressed)
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
        stroke(0);
        ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
    }
//when mouse isn't pressed, arms are raised 
   else
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
        stroke (0);
        line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
    }


//blush spots appear when you click "blush" button
    if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
    {
        strokeWeight (0);
        fill (255, 0, 127);
        ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
        ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
    }

// draws blue tear lines under eyes when blue teardrop is clicked
    if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
    {
        stroke (0, 0, 255);
        strokeWeight(8);
        line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
        line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
        strokeWeight (0);

    }

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
    if (randomEars <= 1) //draws panda ears
    {
        fill (0);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        fill (255);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
    }
    else if (randomEars <= 2) //draws red top hat w/ black and white buckle
    {
        strokeWeight (0);
        fill (255, 0, 0);
        rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
        rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
        fill (0);
        rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
        fill (255);
        rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
    }
    else if (randomEars <= 3) //draws pink cone hat
    {
        strokeWeight(0);
        fill (255, 0, 127);
        triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
        fill (255);
        ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
    }   
}


function mousePressed ()
{
    //when user clicks, these variables are reassigned to random values w/n specific ranges
    eyeLength = random (8, 25);
    eyeThickness = random (5, 12);
    randomEars = random (0, 3);
    randomSun = random (5, width/10);

}

Looking Outwards 02: Generative Art

Person standing in front of GITEX project of Dubai

GITEX is a project created by Marek Bereza and Felix Faire (of Marshmallow Laser Feast, an experiential collective based in London) that visualizes sets of urban data from Dubai in an interactive and immersive experience for the user. The 3D visualization and interaction software was written from scratch in C++.

Data is often hard to comprehend, especially for those unfamiliar with how to read data, yet it’s relevant to all our lives and the decisions we make. By turning sets of urban data into a visual, interactive experience, this project allows a resident of Dubai (or anyone else) to explore the city in perspectives that otherwise wouldn’t be accessible. I particularly admire this project because it both enables the average person to make more informed decisions about their own city, while also being a beautiful work of art in itself.

I don’t know much about the algorithm that generated the work, since it was built in scratch in C++. I do know that it must have incorporated a large variety of sets of data (traffic collisions, topographical data, geographic data, types of locations, etc).

Because the creators wrote the program from scratch, they would’ve implemented their own way of visualizing the city. It’d be fascinating if different people were to create their own version of this program: each person could convey which aspects of the city they find most important. For someone environmentally focused, they could emphasize green space and natural life in their visualization. For someone culturally focused, they could highlight the different cultures, ethnicities, and neighborhoods within a city.

While this is an amazing piece of work on its own, it’d be ideal if the concept could be transformed into a program where non-coders could upload their own sets of data and create personal maps of cities. This would enable people to communicate much more effectively in regards to any urban issues to want to advocate for.

Project 1: Self Portrait

// at least 10 graphic elements -> quad, triangle, ellipse,
//square, arc, line, point

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

function draw() 
{
    strokeWeight (0);

//lines in background
    strokeWeight (10);
    stroke (255, 255, 255); // white lines
    line (0, 200, 200, 0);
    line (30, 200, 200, 30);

    stroke (0, 0, 0); //black lines
    line (0, 0, 200, 200);
    line (30, 0, 200, 170);

    line (0, 150, 50, 200);
    line (0, 120, 80, 200);
    strokeWeight(0);

//earrings
    fill (0, 255, 255);
    triangle (45, 170, 65, 170, 55, 140);
    triangle (155, 170, 135, 170, 145, 140);
    fill (255, 255, 0);
    circle (55, 140, 7);
    circle (145, 140, 7);

//head
    fill (185, 255, 218);
    ellipse(100, 100, 100, 120);

    ellipse (100, 200, 200, 40);
    fill (0, 0, 102);
    arc (100, 100, 100, 120, PI + HALF_PI, HALF_PI, CHORD);
    arc (100, 200, 200, 40, PI, PI + HALF_PI);
    circle (80, 85, 15);
    fill (185, 255, 218);
    circle (120, 85, 15);
    fill (255, 255, 255);
    ellipse (100, 130, 50, 15);
    fill (210, 0, 0);
    circle (65, 110, 18);
    circle (135, 110, 18);

//hat
    fill (0, 0, 102);
    rect (55, 30, 90, 20);
    rect (75, 5, 50, 40);
    
    fill (185, 255, 218);
    rect (100, 30, 45, 20);
    rect (100, 5, 25, 40);

noLoop ();
}