Author: Julianna Bolivar

LO 06: Randomness

Andrej Bauer, a professor of computational mathematics at the University of Ljubljana, created “random art.” Every picture is created by a computer program that accepts a string from which an image is randomly generated. The picture’s name is the base for a pseudo-random number generator, used to create a mathematical formula, which determines the colors used in the picture. The same name will always create the same picture, though adjustments like capitalization will produce a change. If the picture name consists of two words, the first word determines the colors and focal points of the image, while the second word determines the selection and arrangements of elements present. You can make your own random art – just type in a name for the picture, press “Paint,” and watch as the image loads. At first the colors are selected, and you see a pixelated screen of color. Then, it begins loading and becoming a more complex and high quality painting. Some string images are generated more quickly than others.

http://www.random-art.org/

“Play That Funky Music” random picture, words capitalized.
“play that funky music” random picture, words not capitalized.

Project 05: Wallpaper

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Project 05: Wallpaper



function setup() {
    createCanvas(400, 400); //canvas
    background(225, 99, 71); //orange background
}

function draw() {
    for (var row = 0; row < 10; row ++){
        for (var col = 0; col < 10; col ++){
            drawSection(row*45, col*75);
        }
    }
}

function drawSection(x, y){
    push();
    translate(x-55, y-20);
    stroke("black");
    noFill();
    stroke(0);
    //stem 1
    curve(0, 5, 68, 19, 68, 56, 10, 60);
    curve(65, 10, 68, 30, 75, 40, 115, 65); 
    //stem 2
    curve(115, 35, 90, 35, 90, 60, 115, 65); 
    //stem 3
    curve(95, 60, 75, 70, 75, 80, 90, 80); 
    
    //flower 1
    noStroke();
    fill("white");
    circle(70, 20, 5); 
    circle(75, 20, 5);
    circle(66, 22, 5);
    circle(68, 15, 6);
    circle(73, 16, 6);
    circle(64, 18, 4);
    circle(79, 17, 4);
    circle(61, 23, 3);
    //flower 2
    circle(90, 35, 5); 
    circle(86, 32, 5.5);
    circle(95, 34, 5.5);
    circle(89, 29, 4.5);
    circle(93, 31, 4);
    //flower 3
    circle(75, 70, 3); 
    circle(73, 68, 4); 
    circle(77, 68, 3); 
    circle(75, 66, 2);
    circle(78, 71, 2);
    circle(71, 70, 2); 
    pop();
}
Pin from Pinterest.

I was inspired by this wallpaper I found on Pinterest. I did 3 different flowers in a repeating pattern. I’m really proud of myself for this project! I’m happy with how it turned out.

LO 05: 3D Computer Graphics

Animal Crossing: New Leaf was released by Nintendo for the Nintendo 3DS in 2012. It’s the 4th iteration in the Animal Crossing series, the predecessor to its incredibly successful sequel, Animal Crossing: New Horizons, which reportedly sold over 31 million copies as of December 2020. Just New Horizons makes up about 47% of all sales in the series of games. Still, as advanced and exceptional as New Horizons is, New Leaf has a charm that keeps players coming back even a decade after the initial release. New Leaf is full of content as a life simulation game, with over 333 possible animal villagers (not including special characters). With time the gameplay may get repetitive, and New Horizons has the same problem. But New Leaf has the added factors of characters with stronger personalities, a beautiful soundtrack, and that sense of nostalgia that has players still thinking fondly of New Leaf. Despite not having modern, clean graphics, the pixelated quality is charming and doesn’t get in the way of gameplay. While nicer graphics certainly look good, it doesn’t make up for content and playability.

Pictures from my own town in Animal Crossing!

Project 04: String Art

sketch
//Julianna Bolivar
//jbolivar
//Section D
//Program: String Art


var dx1;
var dy1;
var dx2;
var dy2;

var dx3;
var dy3;
var dx4;
var dy4; 

var dx5;
var dy5;
var dx6;
var dy6; 



var numLines = 50;

function setup() {
    createCanvas(300, 400);
    background(244, 235, 232);
    //hot pink
    stroke(222, 49, 99);
    //right most lines
    line(300, 300, 350, 300); 
    dx1 = (250)/numLines;
    dy1 = (290)/numLines;
    dx2 = (100)/numLines;
    dy2 = (290)/numLines;
    //left most lines
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;
    //overlapping lines
    dx5 = (150)/numLines;
    dy5 = (320)/numLines;
    dx6 = (90)/numLines;
    dy6 = (90)/numLines;
}

function draw() {
    //right most lines
    var x1 = 50;
    var y1 = 10;
    var x2 = 200;
    var y2 = 200;
    //left most lines
    var x3 = 0;
    var y3 = 200;
    var x4 = 220;
    var y4 = 350;
    //overlapping lines
    var x5 = 40;
    var y5 = 200;
    var x6 = 220;
    var y6 = 350;

    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        line(x3, y3, x4, y4);
        line(x5, y5, x6, y6);

        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;

        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        x5 -= dx5;
        y5 -= dy5;
        x6 += dx6;
        y6 += dy6;   
    }

    noLoop();
}

Mine is quite simple, I wanted to have an interaction or at least have a variety of colors but I couldn’t get it to work in time. I knew I wanted the strings to work vertically, and the overlapping strings was a mistake I ended up liking.

LO 04: Sound Art

I looked at a critically-acclaimed game called Incredibox, published by So Far So Good, released in 2009. It is an interactive music experience where you drag and drop different sounds for a lineup of 8 beatboxers to produce. You mix and match the sounds and singing options to create songs. Almost all of the sound options sound good together, so it’s nearly impossible to make a song that sounds bad. It’s also a visual experience. In each theme, when you drag a sound icon onto one of the 8 beatboxers, it dresses them in a new outfit. You have 8 different themes to choose from, 4 unlocked and 4 initially locked; Alpha (basic beatboxing), Little Miss (hip-hop), Sunrise (pop), The Love (French house), Brazil (Brazilian music), Alive (Japanese/modern music), Jeevan (traditional Indian), and Dystopia (futuristic). Incredibox has seen a recent resurgence due to the Dystopia theme becoming popular on Tiktok. I find this game very impressive in that there are so many musical styles explored, as well as the musical ability needed to make sure all the sounds combine well with each other, and still there are enough options to create many unique songs. There must be many looping functions as the beatboxers keep making their sound until you pause or change the sound assigned to them.

https://www.incredibox.com/demo/

Screenshot from me playing the “The Love” theme.

Project 03: Dynamic Drawing

sketch
//Julianna Bolivar
//jbolivar
//section d
var x = 305; //center petal
var y = 225;
var y1 = 140; //petals
var py1 = 0; //petal velocities
var y2 = 180;
var py2 = 0;
var y3 = 180;
var py3 = 0;
var y4 = 270;
var py4 = 0;
var y5 = 270;
var py5 = 0;

function setup() {
    createCanvas(600, 450);
    py1 = 0; //petal velocitiess
    py2 = 0;
    py3 = 0;
    py4 = 0;
    py5 = 0;
}

function draw() {
    if (mouseX > width/2){     
        background(0, 51, 102); //mouseX in right is midnight blue
    }
    else {
        background(173, 216, 230); //mouse X in left in sky blue
    } 
    
    push();
    rotate(frameCount / 50.0);
    star(100, 100, 80, 100, 20); //sun 
    pop();
    
    fill(154, 205, 50);
    noStroke();
    rect(290, 250, 30, 400); //stem
    fill(255, 105, 180);
    circle(305, y1, 100); //top petal
    circle(380, y2, 100); //upper right petal
    circle(230, y3, 100); //upper left petal
    circle(245, y4, 100); //lower left petal
    circle(370, y5, 100); //lower right petal
    y1 += py1; 
    y2 += py2; 
    y3 += py3; 
    y4 += py4; 
    y5 += py5; 
    fill(255, 215, 0);
    circle(x, y, (100 + mouseY/3)); //center gets bigger with mouseY
} 

function mousePressed() { //petals fall on click
    py1 = 10;
    py2 = 9;
    py3 = 5;
    py4 = 10;
    py5 = 6;
}

function star(x, y, radius1, radius2, npoints) { //star spin
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
    endShape(CLOSE);
}

This was so difficult. Because my idea was very simple at first it ended up looking all over the place as I added elements. Some things I never figured out, like how I wanted the petals to change as they fall.

LO: Computational Fabrication

Megumi Igarashi, or Rokudenashiko, which means “good-for-nothing kid,” made waves in the news when she was found guilty of obscenity in 2013 and 2014. This is because of the data distribution of her 3D model, “Pussy Boat,” molded after a scan of her own vagina. The vagina is a common motif in her art, as she tries to normalize the vagina in Japanese society. Many criticized the Japanese government for her arrest because of the hypocrisy, like how the Festival of the Steel Penis is held every year in Kawasaki, filled with phallic-shaped merchandise and food. Her studio was raided by police and they confiscated her more “realistic” art pieces. What’s left of her art is “Manko-chan,” a cute little character that is, well, a vagina. Still, it’s subversive how playful her art is when the conversation around female anatomy is shrouded in shame and stigma. Last year, the Japanese Supreme Court rejected her appeal for the obscenity charge. She will be fined ¥400,000 ($3,740).

https://www.japantimes.co.jp/news/2020/07/16/national/japan-top-court-rejects-vagina-kayak-artists-obscenity-appeal/

https://www.vice.com/en/article/ae5pvk/in-the-studio-with-japans-controversial-vagina-artist

Japanese artist jailed for vagina boat says outraged, vows legal fight | Reuters.com
Megumi Igarashi with the “Pussy Boat.”
Japanese court rules vagina figurines 'pop art', not obscenity | Reuters
Igarashi and “Manko-chan” figurines.

Project 02: Variable Faces; Face Variables

sketch

//Julianna Bolivar, Section D
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var skinTone = 1;
var mouth = 1;
var nose = 1;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    if (skinTone <= 1) {
        fill(230,204,178); //light skin tone
    } 
    else if (skinTone <= 2) {
        fill(221,184,146); //beige skin tone
    } 
    else if (skinTone <= 3) {
        fill(189,143,107); //tan skin tone
    } 
    else if (skinTone <= 4) {
        fill(156,102,68); //medium skin tone
    } 
    else if (skinTone <= 5) {
        fill(127,85,57); //dark skin tone
    } 
    else {
        fill(80,57,43); //deep skin tone
    }
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //head shape
    var eyeLX = width / 2 - faceWidth * 0.25; //left eye size
    var eyeRX = width / 2 + faceWidth * 0.25; //right eye size
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye
    if (mouth <= 1) {
        line(140,180,160,180); //small mouth
    } 
    else if (mouth <= 2) {
        line(125,180,175,180); //medium mouth
    } 
    else {
        line(115,180,185,180); //big mouth
    }
    fill(229,135,118); //pink for nose
    if (nose <= 1) {
        circle(width / 2, 160, 18); //circle nose
    }
    else if (nose <= 2) {
        square(143, 155, 13.5); //square nose
    } else {
        triangle(150, 150, 143, 165, 157, 165); //triangle nose
    }
    fill(0,0,0); //black pupils
    ellipse(eyeLX, height / 2, pupilSize, pupilSize); //left pupil
    ellipse(eyeRX, height / 2, pupilSize, pupilSize); //right pupil

}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    skinTone = random (0,6);
    mouth = random (0,3);
    nose = random (0,3);
}

LO: Generative Art

I’d like to talk about a video-game called “Little Computer People,” which is also known as “House on a Disc.” I’ve never played it myself, but I heard about it on the podcast “Wonderful!” — episode 95, around 38:35 — and for some reason I’ve never forgotten it. It’s basically like an early version of The Sims or Tamagotchi, released in 1985, and was credited as a source of inspiration for the making of The Sims (though The Sims came out 15 years later). As the player, you were a researcher observing the little person living in your computer. You entered your name, the date, and the time, so the game would address you in real time. You’d always have a male character assigned to you. And there were 256 possible different names that the character could have. The game play was basically typing in instructions for the person, like “take a shower,” “watch TV,” “play the piano,” etc. If you stopped feeding the character or making him sleep, his smiley face would turn into a frown, and then he’d turn green. The character could also send you, the player, correspondence with his little typewriter, like “Low on supplies,” “Would like to have a party,” “Would like to have a cat,” though there would be no result if you instructed him to have a party or get a cat. He could also initiate a game of poker, war, or anagrams with you. So although the gameplay may seem mundane or like it’s not much content, I myself am really impressed with all the different functions and variables working together to respond to the player’s input. And I imagine there are a lot of if/else if/else statements working together to produce those results as well.

Project 1: My Self-Portrait

sketch

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

function draw() {
    background(255, 192, 203);
    fill(59,25,7);
    rect(64,95,75,100); //hair
    fill(241, 194, 125);
    rect(90,135,20,20); //neck
    fill(255,235,238);
    rect(50,150,100,100); //body
    fill(241, 194, 125);
    ellipse(100, 100, 80, 80); //head
    fill(59,25,7);
    arc(62, 55, 60, 60, 0, PI / 2.0); //left bang
    fill(59,25,7);
    rect(92,56, 50,20); //right bang
    fill(59,25,7);
    rect(132,76,10,74); //strand
    fill(255,255,255);
    ellipse(75, 100, 30, 30); //left eye
    fill(255,255,255);
    ellipse(115, 100, 30, 30); //right eye
    fill(0,0,0);
    ellipse(75, 100, 10, 10); //left pupil
    fill(0,0,0);
    ellipse(115, 100, 10, 10); //right pupil
    stroke(0,0,0);
    fill(236,170,70);
    triangle(95,110,90,120,100,120); //nose
    noFill();
    arc(100, 110, 40, 40, 0, PI / 2.0); //mouth
}

I found it difficult to figure out arcs. My self-portrait is ugly-cute.