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

Final Project 14

Julianna Bolivar — Sun, 05 Dec 2021 00:03:12 +0000

My final project is both about light pollution and the aurora borealis. The details are revealed through the facts displayed when you click on the moon. The facts related to the aurorae detail how the same phenomenon that causes aurorae also cause ozone layer depletion. Additionally, the electron precipitation introduced during aurora enters the Earth’s thermosphere may cause further depletion of the ozone layer. (https://www.innovationnewsnetwork.com/evidence-of-earths-auroras-causing-mesospheric-ozone-layer-depletion/14279/). To talk about aurorae, we must also talk about light pollution. Particularly in cities, it’s difficult to see such views or any stars at all in the night sky. Pittsburgh has dealt with both these subjects; you can’t see stars at night, and recently aurorae was visible just north of the city.

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Final Project

var buildings = [];
var buildingsShowing = [];
var stars = [];
var starsShowing = [];
var counter = 0;
var starsCounter = 0;
var moonAngle = 0;

//gradient variables
const X_AXIS = 2;
let c1, c2;

var facts = ["Light pollution impacts animal behaviors, such as migration patterns, wake-sleep cycles, and habitat formation.", 
"Increased amounts of light at night lowers melatonin production, resulting in sleep deprivation, stress, anxiety, etc.", 
"Nocturnal light interrupts sleep and confuses the circadian rhythm in humans and animals.",
"Astronomers are concerned with light pollution as it reduces their ability to view celestial objects.", 
"The phenomena that causes aurorae also causes ozone layer depletion.",
"The ozone layer protects life on Earth from damaging UV light.",
"The electron precipitation that escapes into the thermosphere during aurora may cause further ozone layer depletion.",
"The aurora borealis was recently visible as low as in Pittsburgh."];
var index = 0;





var moonImg;
function preload(){
  //load image
  moonImg = loadImage("https://i.imgur.com/1lsi57S.png");
}

function setup() {
    createCanvas(640,240);
    frameRate(30);

    //lerp color for aurorae sky
    c1 = color(98, 6, 137); //purple
    c2 = color(1, 153, 82); //green
    
    //buildings
    for (var i = 0; i < 20;i++){
        var bldngs = random(width);
        buildings[i] = makeBuildings(bldngs);
    }

    //stars
    for (var i = 0; i < 20;i++){
        var strs = random(width);
        stars[i] = makeStars(strs);
    }
}

function draw() {
    fill(6, 11, 49);
    rect(0,0, 640, 240);

    //if mouse is at top, stars and aurorae appear
    if (mouseY 0) {
            buildingsToKeep.push(buildingsShowing[i]);
        }
    }
    buildingsShowing = buildingsToKeep; // remember showing buildings
}

function addNewBuildings(){
    counter+=1;
    if (counter % 65 == 0){
        buildingsShowing.push(makeBuildings(width, 0));
    }
}

//building object
function makeBuildings(bx, by){
    var buildings = {x:bx, y:by, 
        breadth: 50,
        nFloors: round(random(2,8)),
        bColor: random(50,125),
        speed: -1.0,
        move: buildingsMove,
        draw: drawBuildings }
    return buildings;

}

//building characteristics
function drawBuildings(){
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(this.bColor); 
    push();
    translate(this.x, height);
    noStroke();
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i++) {
        fill(mouseY/height*200);
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();

}

function buildingsMove(){
    this.x += this.speed;
}


//stars 
function updateAndDrawStars(){
    for (var i = 0; i < starsShowing.length; i++) {
        starsShowing[i].move();
        starsShowing[i].draw();
    }
}

function removeStarsOffScreen(){
    var starsToKeep = [];
    for (var i = 0; i < starsShowing.length; i++){
        if (starsShowing[i].starsX + 10 > 0) {
            starsToKeep.push(starsShowing[i]);
        }
    }
    starsShowing = starsToKeep;
}

function addNewStars(){
  starsCounter+=1;
    if (starsCounter % 5 == 0){
        starsShowing.push(makeStars(random(width), random(height)));
    }
}

//stars object
function makeStars(sx, sy){
    var s = {starsX: sx,
             starsY: sy,
             starsSpeed: -1,
             move: starsMove,
             draw: starsDraw}
    return s;
}

function starsMove(){
    this.starsX += this.starsSpeed;
}

function starsDraw(){
    fill(255);
    noStroke(); 
    circle(this.starsX, this.starsY, random(1,2));
}



//click on moon to flip through facts
function mousePressed(){
    if (mouseX<75&mouseX>25&&mouseY<75&&mouseY>25){
        index = floor(random(facts.length));
        if (index == facts.length) {
            index = 0;
        }
    }
}

Project 11: Generative Landscape

Julianna Bolivar — Mon, 15 Nov 2021 04:14:44 +0000

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Generative Landscape

var hills = []; //hills array
var trees = [];
var treesShowing = [];
var clouds = [];
var cloudsShowing = [];
var counter = 0;
var cloudCounter = 0;
var noiseParam = 0;
var noiseStep = 0.002;


function setup() {
    createCanvas(480, 300);
    //trees 
    for (var i = 0; i < 20;i++){
        var trs = random(width);
        trees[i] = makeTrees(trs);
    }
    //hills
    for (var i=0; i 0) {
            treesToKeep.push(treesShowing[i]);
        }
    }
    treesShowing = treesToKeep; // remember showing trees
}

function addNewTrees(){
    counter+=1;
    if (counter % 25 == 0){
        treesShowing.push(makeTrees(width, random(150,300)));
    }
}

function makeTrees(tx, ty){
    var trees = {x:tx, y:ty, 
        width:random(10, 20), 
        height:random(50, 90), 
        r:random(75,200), g:random(75,100), b: 0,
        speed: -1.0,
        move: treesMove,
        draw: drawTrees }
    return trees;

}

//draw trees
function drawTrees(){
    fill(160,82,45);
    rect(this.x, this.y, this.width, this.height);
    fill(this.r, this.g, this.b);
    circle(this.x-5, this.y-10, 50);
    circle(this.x+20, this.y-10, 50);
    circle(this.x+5, this.y-20, 50);
}

function treesMove(){
    this.x += this.speed;
}




function updateAndDrawClouds(){
    for (var i = 0; i < cloudsShowing.length; i++) {
        cloudsShowing[i].move();
        cloudsShowing[i].draw();
    }
}

function removeCloudsOffScreen(){
    var cloudsToKeep = [];
    for (var i = 0; i < cloudsShowing.length; i++){
        if (cloudsShowing[i].cloudX + 10 > 0) {
            cloudsToKeep.push(cloudsShowing[i]);
        }
    }
    cloudsShowing = cloudsToKeep;
}

function addNewClouds(){
  cloudCounter+=1;
    if (cloudCounter % 100 == 0){
        cloudsShowing.push(makeClouds(width, random(0,60)));
    }
}

function makeClouds(cx, cy){
    var c = {cloudX: cx,
             cloudY: cy,
             cloudSpeed: -1,
             move: cloudMove,
             draw: cloudDraw}
    return c;
}

function cloudMove(){
    this.cloudX += this.cloudSpeed;
}

function cloudDraw(){
    fill(165);
    noStroke();
    ellipse(this.cloudX, this.cloudY - 5, 60, 50);
    ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);
    ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);
    ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);
    ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);
}

My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I’ve struggled to make beautiful projects, but I’m pretty satisfied with this one.

LO: Social Impacts of Digital Art

Julianna Bolivar — Mon, 15 Nov 2021 04:09:32 +0000

Clearview AI is an app currently being used by hundreds of law enforcement agencies in the US, including the FBI. It can compare a photo of someone’s face to a database of more than 3 billion pictures that Clearview has access to from Facebook, Venmo, YouTube, and other sites. This database includes the FBI’s own database, which contains passport and driver’s license photos. It totals more than 640 million images of US citizens. Clearview AI then returns with matches, along with links to the sites where the database photos were from; it can easily return a name, and possibly a home address as well. What if the general public had access to this app? Police officers and Clearview investors think it’s a possibility for the future. Hopefully this never happens. Personally, I’d never feel safe again. And even in the hands of law enforcement, this technology is controversial. Privacy advocates warn that the app could still return false matches to the police and result in the incarceration of innocent people, and mass implementation and abuse of this technology could be a slippery slope to a surveillance state.

https://www.cnet.com/tech/services-and-software/clearview-app-lets-strangers-find-your-name-info-with-snap-of-a-photo-report-says/

Project 10: Sonic Story

Julianna Bolivar — Sun, 07 Nov 2021 02:33:32 +0000

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Sonic Story

var walkImage = [];  //stores chick images 
var walkHen = []; //stores hen images
var cornImg;
var angleCorn = 0;
var wheatImg;
var angleWheat = 0;
var snowImg = 0;
var snowY = 0;

var chirpingSound;
var cluckingSound;
var popSound;
var windSound;

function preload() {
    
    var filenames = []; //chick images
    filenames[0] = "https://i.imgur.com/Tfx9TC4.png";
    filenames[1] = "https://i.imgur.com/QahosbW.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]); 
    }

    var fileHen = []; //hen images
    fileHen[0] = "https://i.imgur.com/7p6gBTy.png";
    fileHen[1] = "https://i.imgur.com/CnvJ23d.png";
    for (var i = 0; i < fileHen.length; i++) {
        walkHen[i] = loadImage(fileHen[i]);
    } 
    //icon images
    cornImg = loadImage("https://i.imgur.com/5qLGEX6.png");
    wheatImg = loadImage("https://i.imgur.com/FjHLXeq.png");
    snowImg = loadImage("https://i.imgur.com/MnUy5ko.png");

    chirpingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/chirping.wav");
    cluckingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clucking.wav");
    popSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pop-1.wav");
    windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wind-1.wav");

}

function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
         }
    return c;
} 

function makeHen(hx, hy, hdx, hdy) {
    var h = {x: hx, y: hy, dx: hdx, dy: hdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepHen,
             drawFunction: drawHen
         }
    return h;
}

function stepCharacter(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkImage.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
} 

function stepHen(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkHen.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
}

function drawCharacter(){ //chicks
    if (this.walkingRight == true){
        image(walkImage[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkImage[this.imageNum], this.x, this.y);
        pop();
    } 
} 

function drawHen(){ //hen
    if (this.walkingRight == true){
        image(walkHen[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkHen[this.imageNum], this.x, this.y);
        pop();
    } 
}

var character = [];
var hen = [];


function setup() {
    createCanvas(600,700);
    frameRate(5);
    imageMode(CENTER);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    for (var i = 50; i <=450; i += 200){ //chicks
        character.push(makeCharacter(10, i, 5, 1)); 
    }
    for (var i = 50; i <=450; i += 200){ //hen
        hen.push(makeHen(10, i, 5, 1));
    }
}


function soundSetup() { // setup for audio generation
    chirpingSound.setVolume(0.3);
    cluckingSound.setVolume(0.5);
    popSound.setVolume(0.5);
    windSound.setVolume(0.5);
}


function draw() {
    background(135,206,235);
    //grass
    noStroke();
    fill(46,139,87);
    rect(0, 510, 600, 200);

    push();
    translate(200, 500);
    scale(0.2);
    for (var i = 0; i < 2; i++){ //call functions chicks
        character[i].stepFunction();
        character[i].drawFunction();
    }
    pop();
    
    if (frameCount >= 30){
    push(); //hens to right
    translate(300, 500);
    scale(0.2);
    for (var i = 0; i < 1; i++){ //call functions hen
        hen[i].stepFunction();
        hen[i].drawFunction();
    }
    pop();
}
    
    if (frameCount >= 50 & frameCount < 90){ //call corn
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleCorn)); //rotate corn
    angleCorn += 20;
    image(cornImg, 0, 0);
    }
    pop();

    if (frameCount >= 90 & frameCount < 130){
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleWheat)); //rotate wheat
    angleWheat += 20;
    image(wheatImg, 0, 0); //3 wheats
    image(wheatImg, 300, 0);
    image(wheatImg, 600, 0);
    }
    pop();

    if (frameCount >= 130 & frameCount < 200){
    push(); 
    translate(10, 100);
    scale(0.1);
    for (var i = random(-10,10); i < 2000; i+=50){ //snow falls
    image(snowImg, i*10, snowY); 
    snowY += 5;
    }
    pop();
    }

    text("p5.js 15104 fall 2021", 10, 15);
    
    if (frameCount >= 1 & frameCount < 30){
        chirpingSound.play();
    }
    if (frameCount == 33){
        chirpingSound.stop();   
    }

    if (frameCount >= 30 & frameCount < 35){
        cluckingSound.play();
    }

    if (frameCount >= 50 & frameCount < 52){
        popSound.play();
    }
    if (frameCount == 52){
        popSound.stop();
    }

    if (frameCount >= 90 & frameCount < 92){
        popSound.play();
    }
    if (frameCount == 92){
        popSound.stop();
    }

    if (frameCount >= 130 & frameCount < 160){
        windSound.play();
    }
    if (frameCount == 160){
        windSound.stop();
    }
}

I made the pixel art in Illustrator. My animation is based off of a lullaby in Spanish called Los Pollitos Dicen. My rendition is kind of a silly, abstract version. My mom would sing this to me often when I was a child.

In Spanish it goes;
Los pollitos dicen pío, pío, pío
Cuando tienen hambre, cuando tienen frío
La gallina busca el maíz y el trigo
Les da la comida, y les presta abrigo
Bajo sus dos alas, acurrucaditos
Duermen los pollitos hasta el otro día

English Translation;
The chicks say pío, pío, pío
When they’re hungry, and when they’re cold
The hen looks for corn and wheat
She gives them food and warmth
Under her wings, the chicks are comfy
And to the next day, the chicks are asleep

Project 09: Computational Portrait

Julianna Bolivar — Mon, 01 Nov 2021 01:12:14 +0000

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Computational Portrait

var img;

function preload(){
  //load image
  img = loadImage("https://i.imgur.com/eaETdlz.png");
  frameRate(10);
}


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


function draw() {
    image(img, 0, 0, 400, 400);
    for(var row = 0; row <= 200; row++) {
        for(var col = 0; col <= 200; col++){
            var x = col * 5;
            var y = row * 5;
            //pixels
            var pixelColor = img.get(x*5, y*5);
            noStroke();
            fill(pixelColor);
            //draw circle
            circle(x + 30, y + 50, 5); 
        }
    }
}

I didn’t expect my frame in frame pixels to create a distorted effect, but I really like how it looks. The spaces in between the circles allow you to see some of the original image underneath.

LO 09: Women and Non-binary Practitioners in Computational Art

Julianna Bolivar — Sun, 31 Oct 2021 20:15:37 +0000

Sputniko! is a Japanese/British Artist based in Tokyo. She creates film and multimedia installations which explore the social, cultural, and ethical implications of emerging technologies. She’s an Associate Professor of Design at Tokyo University of Arts. She gave a Ted Talk in TED 2019 and was selected as one of the Young Global Leaders by the World Economic Forum. One project of hers that I’m really intrigued by is “Red String of Fate – Tamaki’s Crush.” The red string of fate is a myth in which gods tie an invisible red string between soulmates. Sputniko! collaborated with scientists from NIAS to genetically engineer silkworms to spin the red string of fate by inserting genes that produce oxytocin (the social-bonding “love” hormone), and the genes of red-glowing coral into silkworm eggs. The film that accompanies the project centers around Tamaki, an aspiring genetic engineer, who makes her own red string of fate in the hopes of winning over another scientist, Sachihiko. She sews the red silk into her favorite scarf, but it’s so powerful that everyone starts to fall in love with her – everyone except Sachihiko.

https://sputniko.com/Red-Silk-of-Fate

Photo of the protagonists in the “Red Silk of Fate” short film.

LO 08: The Creative Practice of an Individual

Julianna Bolivar — Sun, 24 Oct 2021 03:44:43 +0000

Stefanie Posavec is a designer, artist, and author who creatively communicates data to all audiences. Her work is fun, modern, and has a heavy graphic design influence which shows through her colorful and geometric style. Her designs are not also visual but wearable (“Air Transformed”) or even interactive through dance (“Relationship Dance Steps”). She also enjoys book design when the opportunity presents itself. Her work has been exhibited at places such as the MoMA, the Storefront for Art and Architecture (New York), the Centre Pompidou (Paris), ArtScience Museum (Singapore), and more. One work I particularly enjoy is “Data Murmurations: Points in Flight (People Like You),” which illustrates how the various stakeholders in a biobank perceive the people who consent to their biological samples and data being used for research, specifically at Imperial College. The work itself looks almost childlike with the sketchy line quality, and it’s even more enjoyable when you scroll down and see the sketches of all the ways she imagined the data visualization. Describing her creativity as childlike may sound insulting, but i enjoy the uninhibited and beautiful visual of serious data. Her “Dear Data” and “Drawing the Dictionary” projects looks quite similar, and are actually all physical work, adding to the feeling of a lovely drawing handed to you by your child. Not all her work is in this style, but I find it very charming.

http://www.stefanieposavec.com/mywork

“Data Murmurations: Points in Flight (People Like You)”

“Dear Data”

Close-up of “Drawing the Dictionary”

Project 07: Composition with Curves

Julianna Bolivar — Sun, 17 Oct 2021 21:24:33 +0000

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Project 07: Composition with Curves

var x;
var y;

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

function draw() {
    background(0);
    for (var curveLines = 1; curveLines < 10; curveLines++){ //draw slinky
        for (var amtLines = 1; amtLines < 5; amtLines++){
            push();
            translate(curveLines * 10, amtLines * 10);
            drawEpiTri(); 
        }
    }
}

function drawEpiTri() {
    var a = map(mouseX, 0, width, 15, 100); 
    var b = map(mouseY, 0, height, 15, 50);
    noFill();
    stroke(mouseX, mouseY, 0); //color changes with mouse
    push();

    var a = map(mouseY, 0, width, 10, 50); 
    var b = map(mouseX, 0, height, 10, 50);
    var h = constrain(mouseY, 0, b);
    var ph = mouseY/50;

    beginShape(); 
    for (var i = 0; i <= 500; i ++) { //shape equation
        var theta = map(i, 0, 50, 0, TWO_PI);
        x = (a+b)*cos(theta)-h*cos(ph+theta*(a+b)/b);
        y = (a+b)*sin(theta)-h*sin(ph+theta*(a+b)/b);
        vertex(x, y);
    }
    endShape();
    pop();
}

Red circles.

Yellow spirals.

Green spirals.

Yellow Spaghetti.

LO: Information Visualization

Julianna Bolivar — Sun, 17 Oct 2021 21:15:23 +0000

Dr. Kirell Benzi is a data artist and researcher. Kirell holds a Master of Science in Communication Systems from ECE Paris and a Ph.D. in Data Science from Ecole Polytechnique Federale de Lausanne. In 2017, he started his studio, Kirelion, around information design, creative technology, data visualization, and software engineering. He has collaborated with the likes of the EU, Stanford, Princeton, Cornell, Berkeley, UCLA, and more. He creates art that is exceptionally beautiful, pieces that one wouldn’t assume is based off of data points. Some of my favorites are; “The Dark Side and the Light” (2015), which is built upon the interactions between more than 20,000 characters from the Star Wars universe. The blue nodes represent those associated with the light side of the Force, including the Jedi, the Republic, and the Rebellion. The dark side is represented by the red nodes, which includes the Siths and the Empire. Yellow nodes represent criminals and bounty hunters, which mostly connect to the red nodes. The most influential characters are Anakin and Emperor Palpatine. I also really enjoy “Scientific Euphoria” (2014), which is about how in July 2012, CERN physicists found evidence of a new elementary particle, predicted by Peter Higgs in 1964. The graph shows the flow of retweets as people discussed the discovery. The network splits into two with European tweets concentrated in the center and U.S. tweets at the bottom.

https://www.kirellbenzi.com/art

“The Dark Side and the Light” (2015).

“Scientific Euphoria” (2014).

Project 06: Abstract Clock

Julianna Bolivar — Mon, 11 Oct 2021 01:07:41 +0000

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock


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

function draw() {
    var minu = minute();
    //sky darkens by the hour
    background(hour()*5);
    
    //scoop slowly falls by the minute
    for (var col = 0; col <= 5 * minu; col+=1) { 
        fill("pink");
        push();
        translate(225, 40);
        circle(0, col, 20);
        pop();

    } 

    //arm waves for each second
    if (second()%2 == 0){
        line(150, 350, 100, 325);
    } else if (second()%2 != 0){
        line(150, 350, 100, 375);
    } 

     //stick figure man
    fill("white");
    circle(150, 300, 50); //head
    fill("black");
    circle(140, 298, 5);
    circle(160, 298, 5);
    line(150, 325, 150, 400); //back
    line(150, 400, 125, 450); //left leg
    line(150, 400, 175, 450); //right leg
    line(150, 350, 225, 350); //arm with ice cream
    fill(250, 215, 160);
    triangle(225, 365, 215, 345, 235, 345); //ice cream cone


}

Drawing of what I wanted to make.

8:59PM.

I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.