Author: Sarah

Abstract Clock

sketch.6.slDownload
// Sarah Luongo
// Section A

// This code aims to tell time via a buttefly, with the body filling to blue every second, purple dots being added every minute, and the background changing every hour.

var r = 12;
var g = 16;
var b = 30;

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

function draw() {
    // Background changes different shades of blue every hour
    H = hour();
    // Black - medium blue from 12 AM - 7 AM
    if (H<8){
        background(r*H, g*H, b*H);
    // Medium blue - light blue from 8 AM - 4 PM
    } else if (H >= 8 & H <= 16) {
	background(r*H, g*H, 245*H);
    // Light blue - dark blue from 5 PM - 11 PM
    } else {
        background(192 - (r+13)*(H-16), 255 - (g+20)*(H-16), 255 - b*(H-16));
    }

    translate(width/2, height/2);
    // Pink wings for the butterfly
    fill(255, 50, 123);
    butterflyW();

    // Body of the butterfly
    fill(0); // Black
    ellipse(0, 0, 6, 100);

    // Body filling to a blue color every second
    fill(120, 150, 160);
    var S = map(second(), 0, 59, 0, 100);
        ellipse(0, 0, 6, S);

    // Purple dots added every minute
    fill(75, 0, 110);
    rotate(radians(45));
    for (var j = 0; j < minute(); j++) {
	// Bottom right wing
	if(j <= 15) {
	    circle(j*12+13, 0, 10);
	// Top left wing 
	} else if(j <= 30) {
	    circle(-(j-15)*12-7,0,10);
	// Bottom left wing
	} else if (j <= 45) {
	    rotate(radians(90));
	    circle((j-30)*12+7,0,10);
	    rotate(radians(-90));
	// Top right wing
	} else {
	    rotate(radians(90));
	    circle(-(j-45)*12-7,0,10);
	    rotate(radians(-90));
	}
    }
}

function butterflyW() {
    var da = PI/100;
    beginShape();
    for (var i = 0; i <= 2*PI; i += da) {
	var w = sin(2*i) * width/2;
	var x = w * cos(i);
	var y = w * sin(i);
	vertex(x, y);
    }
    endShape(CLOSE);
}

I wanted to do a butterfly to tell time for this project because I was inspired by one of the many faces on my apple watch. Also, I used to love catching butterflies when I was younger (and letting them go of course). I think there are a lot of beautiful butterflies out there. I would’ve like to do a more exquisite butterfly, but I felt it was better to try and have the assignment requirements down before designing anything too crazy. I was happy to at least show a little design to the butterfly with the addition of purple dots every minute.

Looking Outwards – 06

Black Shoals Stock Market Planetarium, by Joshua Portway and Lise Autogena, was a project created in 2001 to represent stock market trades live. The biggest draw to this project for me was that it was two artists’ representation of the stock market, and I had just got into trading this past summer myself. On their website they describe components of the stock market as creatures that have unique “DNA” code and each traded company represents a star. The positions of these companies started out randomly positioned, but eventually drifted together over time into clusters, constellations, and nebulae. When a star is flashing it means someone just sold or bought a trade, and these trades produce food for the creatures in the “environment” the artists created. The bigger the trade, the more food is produced. The title was based on the “Black Scholes” formula which was attempting to accurately estimate the current value of a share. Two of the three mathematicians, who by the way won (all three) a Nobel Prize for this formula, went on to start a company called, “Long Term Capital Management”. Moral of this story is the company ended chaotically which almost brought the US stock market down. There are many parallels between biology, history, and the stock market that truly make this a unique and inspirational piece. I am not doing it a justice with this short blog, so I would definitely recommend checking out their website (posted below) describing the piece.

http://www.blackshoals.net/the-project-1

LONDON, ENGLAND – DECEMBER 02: A visitor walks past the ‘Black Shoals: Dark Matter’ projection at the Big Bang Data exhibition at Somerset House on December 2, 2015 in London, England. The projection displays stars which represent live stock market activity. The show highlights the data explosion that’s radically transforming our lives. It opens on December 3, 2015 and runs until February 28, 2016 at Somerset House. (Photo by Peter Macdiarmid/Getty Images for Somerset House)

Project 05 – Wallpaper

sketch.sl5Download
// Sarah Luongo
// sluongo
// Section A

function setup() {
    createCanvas(465, 465);
    background(84, 141, 155);
    noLoop();
}

function flower() {
    push();
    translate(74, 74);

    // Purple petals
    for (var i = 0; i < 4; i ++) {
        noStroke();
	fill(51, 0, 102);
	ellipse(0, -15, 15, 25);
	triangle(-6, -22.63, 6, -22.63, 0, -31);
	stroke(229, 204, 0);
	strokeWeight(1);
	line(0, -16, 0, -11);
	rotate(radians(90));
    }
    
    // Pink petals
    push();
    rotate(radians(45));
    for (var i = 0 ; i < 4; i ++) {
	noStroke();
	fill(255, 204, 204);
        ellipse(-20, 0, 40, 15);
	triangle(-34, -5.4, -34, 5.4, -45, 0);
	fill(0, 0, 255);
	circle(-9, 0, 2);
        rotate(radians(90));
    }
    pop();
    
    // Center of flower
    noStroke();
    fill(55, 24, 85);    
    circle(0, 0, 12);
    pop();
}

// Horizontal vines
function vinesH() {
    // Vines
    noFill();
    stroke(24, 129, 24);
    strokeWeight(2);
    bezier(1, 74, 15, 85, 25, 65, 40, 74);
    // Leaves
    noStroke();
    fill(24, 129, 24);
    ellipse(8, 72, 3, 9); // Left-most leaf
    ellipse(22, 79, 4, 10); // Center leaf
    ellipse(38, 69, 2, 7); // Right-most leaf
}

// Vertical vines
function vinesV() {
    // Vines
    noFill();         
    stroke(24, 129, 24);
    strokeWeight(2);                                    
    bezier(74, 1, 85, 15, 65, 25, 74, 40);
    // Leaves
    noStroke();
    fill(24, 129, 24);
    ellipse(72, 8, 9, 3); // Top-most leaf 
    ellipse(79, 22, 10, 4); // Center leaf
    ellipse(69, 38, 7, 2); // Bottom-most leaf
}

function draw() {
    for (var i = 0; i < 5; i++) {
        for(var j = 0; j < 5; j++) {
        push();
        translate(106*i, 106*j);
        vinesH();
        vinesV();
        flower();
        pop();
        }
    }
}

I wanted to do a floral pattern because I love flowers. I also really ran with the idea of creating something I would wear. I actually have a floral shirt with variations of pink flowers, and this is slightly based off of it. I normally draw flowers as I have created in this code (which you can see from the sketch below), and I wanted the multiple petals to make them all different colors. However, the colors I chose were different from the sketch because I didn’t have many pen options on my tablet, if I did they would have been the colors I choose in this code as they are all colors I love!

LO – 05

    The 2004 film, The Polar Express, is a film I am very fond of. It is a film I have watched every year over the holidays since it was released. It brings back memories of when I was younger, the biggest being how I thought it was so cool that they animated the characters after actors, like Tom Hanks as the Conductor (among other characters) and Josh Hutcherson as the Hero Boy (although he didn’t voice him). I didn’t know what it was called at the time, I just remember my older siblings telling me they made the characters look like the voice actors. I know the term now to be called motion-capture (mo-cap), which digitally captures actors movements, features, emotions, etc., with a computerized camera to help develop virtual characters . Director Robert Zemeckis brought on the Sony ImageWorks team to insert actors like Tom Hanks into a CGI environment, called Performance Capture. Performance Capture is an improvement of mo-cap that uses digital cameras with a 360-range to help simultaneously record multiple actors’ facial expressions and body movement. Jerome Chen’s was the visual effects supervisor of ImageWorks who initially worked on the advancement of mo-cap, that was later called Performance Capture (as mentioned above). Along with the mo-cap aspect, there was a lot of time put into the rest of the animations (like the train, etc.). However, the biggest thing that stood out to me when I was younger were the characters. Zemeckis really wanted to articulate the emotion of each character, and with too small a budget to do live action, he turned to mo-cap and created a world that is hard not to love as it gets played every holiday season. To check out more information about the production of this film check out the link below:

Performance Capture CGI Technique In ‘The Polar Express’: An Advance For Animation

And check out the trailer if you’ve never seen The Polar Express:

Project 4 – String Art

sketch.sll4Download
// Sarah Luongo
// Section A

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

function draw() {
    for (var i = 0; i <= 150; i++) {
	stroke(120, 150, 180);
	
	// Blue background horizontal lines
	line(0, height/2- i, width, height/2 - i);
        
	// Blue intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
        stroke(132, 205, 190);
	
	// Green background horizontal lines
	line(0, height/1.5 + i, width, height/1.5 + i);
	
	i += 1;
    }

    for (var i = 0; i <= 75; i++) { 
	stroke(210, 200, 220);
	// Pink intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
	
	// Pink intersecting lines at the top
        line(width-(6*i), 0, 0, height/2 + (2*i)); // left
        line(6*i, 0, width, height/2 + (2*i)); // right
    }
    // Pebbles
    fill(230, 230, 250);
    ellipse(mouseX, mouseY, 100, 50);
}

I want to create something that resembled a bag of pebbles. So, I made a see-through, colorful, bag using string art, and an ellipse that moves around behind the string art to look like a bunch of pebbles. I was also attempting to make the bag look open.

LO – 04

IM.PRINT by Demodern, is a very fascinating piece of artwork. Created in 2018, this audiovisual masterpiece starts with the tap of your finger. From there, you are taken into a world of your own, where you get to control the audio and visual with your own movements. When I first saw this I was visually entranced by it. It reminds me of virtual reality, which the artists tried very hard to recreate. They wanted you to truly feel immersed in what you create, and they did this with what they call an “Infinity Room”. The artpiece uses image processing when it scans your fingerprint and leap motion to give you control over the sound and colors, restoring to the original fingerprint upon stillness. Art is meant to be what you make it, if I wasn’t told this I don’t think I would’ve gotten as into it as I did. They truly demonstrate their understanding of art and how it is unique to every single person. By creating a space where artists can really express themselves, they help them tap into a world they can honestly call their own. To find out more information check out their website below (although I found that there vimeo gave a little more information, so I posted that link as well):

https://demodern.com/projects/im-print

https://vimeo.com/278485333

LO 3

What was really special about the piece, Astrocyte, made in 2017 was the simple fact that it was 3D printed. It brings back memories of when I was in high school and decided to do a 3D printed project for my IB Math Project. This was the first time I used a 3D printer and it was exhilarating. What is inspirational about this piece specifically is how pretty it looks. It reminds me of the Corning Museum of Glass (CMOG), where I spent a good amount of my childhood back. I would love to go see this display, and feel like I could sit there for hours and reminisce. 3D printing has become much more common than it was when I first used, it and it is really neat to see how it is growing. I imagine it took a lot of moving pieces to put this together. They had many people in various teams, such as technology, design, and research help create this project. The coolest part, is the technique used, one I have mentioned in one of my earlier inspirations, which is the combination of light changing according to movement, and sounds and vibrations playing a role in that as well.

Astrocyte

Project 3: Dynamic Drawing

sketch.sl4Download
// Sarah Luongo
// Section A

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

function draw() {
// To change background according to positon of mouse
var bkgrR = min(mouseY/4, 45);
var bkgrB = min(mouseX/4, 45);
var bkgrG = (bkgrR-bkgrB);

// To constrain motion of stars within canvas
var motionX = map(mouseX, 0, width, 0, 15);
var motionY = map(mouseY, 0, height, 0, 15);

// To change colors of stars	
var r = max(mouseX/1.8, 150);
var g = max(mouseY/1.8, 150);
var b = max((mouseY/1.8)-(mouseX/1.8), 150);
	
    // Fourth value gives background transparency - will make all stars have "following circles" that fade as the stars move (easier to see when you move the mouse really fast
    background(bkgrR, bkgrG, bkgrB, 45);
    
    // To get rid of cursor
    noCursor();

    // This circle is the new cursor shape
    fill(255, 255, 51); // yellow
    circle(mouseX, mouseY, 3);

    // Stars
    fill(r, g, b);
    circle(motionX, motionY, 8 * mouseX/560);
    circle(motionX + 320, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    fill(r - 47, g - 27, b - 143);
    circle(motionX + 340, motionY + 19, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 233, motionY + 385, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 19, motionY + 347, 8 * (mouseX/560 + mouseY/410));
    fill(r + 84, g + 119, b - 78);
    circle(motionX + 40, motionY + 238, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 405, motionY + 356, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 446, motionY + 395, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 23, motionY + 273, 8 * (mouseX/560 + mouseY/410));
    fill(r + 210 , g - 140, b + 37);
    circle(motionX + 172, motionY + 143, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 204, motionY + 297, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 198, motionY + 189, 10 * (mouseX/560 + mouseY/410));
    fill(r + 32, g + 130, b + 23);
    circle(motionX + 285, motionY + 302, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 534, motionY + 67, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 67, motionY + 45, 7 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 423, motionY + 227, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 367, motionY + 329, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 257, motionY + 348, 10 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 73, motionY + 143, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 143, motionY + 324, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 300, motionY + 225, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 558, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 340, motionY + 445, 9 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 510, motionY + 267, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 304, motionY + 130, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 229, motionY + 38, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 512, motionY + 106, 8 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 429, motionY + 145, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 400, motionY + 73, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 172, motionY + 430, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 84, motionY + 443, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 117, motionY + 233, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 545, motionY + 357, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 584, motionY + 167, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 448, motionY + 332, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 515, motionY + 207, 6 * (mouseX/560 + mouseY/410));
}

I’m very fascinated by stars and one of my favorite albums to listen to is an astronomy album by Sleeping At Last. I was inspired by this album, so I wanted to make this project kind of like space, but a little more fun. I wasn’t quite sure how to make a star shape, so I decided to makes circles as stars. My sketch is below:

My Many Faces

It was really fun making a bunch of different faces. I really wanted to experiment with color, not just focus on the faces. So, you should be able to see that the colors change depending on the face I make. Also, I enjoyed making laugh lines for my happy face!

sketch-SarahLDownload
function setup() {
    createCanvas(640,480);
    background(247,221,235);
    text("p5.js vers 0.9.0 test.", -3, -3);
    text("Sarah",603,476);
}

function draw() {
    noStroke();

    // hair
    fill(38,23,8);
    ellipse(320,260,300,450);

    // face
    fill(235,190,143);
    ellipse(320,250,200,270);

    // ears
    circle(220,240,25);
    circle(420,240,25);

    // neck
    rect(297,300,50,150);

    // nose
    stroke(255,222,179);
    strokeWeight(2);
    triangle(310,285,320,250,330,285);

    // bangs
    noStroke();
    fill(38,23,8);
    arc(250,110,160,190,-.18,HALF_PI+QUARTER_PI,OPEN); // left
    arc(370,125,125,130,QUARTER_PI,-2.5,OPEN);         // right

    // This is my happy face
    if(mouseIsPressed & (mouseY < (height * .33))) {
	// eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right

        // mouth
        fill(255, 255, 255);
        stroke(255, 0, 0);
        strokeWeight(4);
        arc(320, 315, 55, 55, 0, PI, CHORD);
        stroke(0);
        strokeWeight(1);
        line(297.5, 326.5, 342.5, 326.5);

        // eyes
        stroke(0);
        strokeWeight(6);
        line(260,227,290,227); // left
        line(350,227,380,227); // right

        // crows feet - left
        stroke(0);
        strokeWeight(1);
        line(243,233,255,227);
        line(243,227,255,227);
        line(243,222,255,227);

        // crows feet - right
        line(385,227,397,233); 
        line(385,227,397,227);
        line(385,227,397,222);

	// upper body   
	stroke(0);
	strokeWeight(1);
        fill(255,255,153);
        rect(250, 410, 140, 70);
    }

    // This is my surprised face
    else if(mouseIsPressed & (mouseY > (height * .66))) {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
	   
        // mouth
        noStroke();
        fill(0,0,0);
        circle(320, 325, 40, 40);

        // eyes (outer)
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();
        fill(0, 0, 0);
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(0,76,153);
        rect(250, 410, 140, 70);
    }

    // This is my angry face
    else if(mouseIsPressed) {
        // eyebrows
        stroke(38,23,8);
        strokeWeight(3);
        line(260,205,290,213); // left
        line(350,213,380,205); // right

        // mouth
        stroke(0);
        strokeWeight(6);
        line(298,327,343,327);

        // eyes (outer)                       
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right	
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(205,0,0);
        rect(250, 410, 140, 70);
    }

    // This is my neutral face
    else {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
       
        // mouth
	stroke(255,153,204);
	strokeWeight(3);
        line(298,327,343,327)

	// eyes (outer)                       
        stroke(0);
	strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right        
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(204,255,229);
        rect(250, 410, 140, 70);
    } 
}

LO 2: My Admiration

The art piece “Into the Trees” published on September 8th, 2010 by Robert Hodgin and Zoë Keating mixes code and keyboard commands with music, to create a stunning video of redwoods. When I first saw this piece, I found it eye catching, aesthetically pleasing, and quite simply, beautiful. After reading about it, I saw it was modeled after the redwoods of northern California, home of the composer, Zoë. I admired this, because I’ve always wanted to live in a redwood house when I first learned of how huge they are. Also, I love listening to instrumental music and I believe the cello is a beautiful instrument. I admire all of these elements, including how the piece operates, because they resonate with me and my likes. Robert normally makes a simple beat, but was inspired by Zoë’s music, and expanded his senses to create code that matched the haunting and somber beat of Zoë’s cello. The code was more extensive than creating basic 3D objects (e.g a table or shapes), so Robert had to invest in additional tech to get the granular aspects of the trees, etc. The extra care and articulation makes this a wonderful collaboration.

Here’s the link for more information: http://roberthodgin.com/project/into-the-trees

And a short clip of the artwork: