Project 10

Beginning sketches
sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 10
 */

//tried to depict Baymax from Big Hero 6
//interacting with a spider
//and going from being confused to happy :)

var baymax;
var spider;
var question;

function preload() {
    baymax = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ding.wav");
    spider = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fall.wav");
    question = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/questionmark.wav");
}

function soundSetup() {
    baymax.setVolume();
    spider.setVolume();
    question.setVolume();
}

function setup() {
    createCanvas(400, 400);
    background(225);
    frameRate(1);
    useSound();
}

function baymax() {
    stroke(0);
    strokeWeight(3);
    ellipseMode(CENTER);
    //drop shadow
    fill("grey");
    noStroke();
    ellipse(width / 2, 350, 218, 54);
    //legs
    stroke(0);
    fill("white");
    ellipse(170, 300, 54, 90);
    ellipse(230, 300, 54, 90);
    //arms
    ellipse(145, 212, 68, 162);
    ellipse(255, 212, 68, 162);
    //body
    ellipse(200, 200, 145, 218);
    //face
    ellipse(width / 2, 109, 145, 90);
    //mouth
    line(163, 112, 236, 112);
    //eyes
    fill(0);
    ellipse(163, 112, 9, 18);
    ellipse(236, 112, 9, 18);
}

function smile() {
    arc(width / 2, 112, 73, 20, 0, PI, OPEN);
}

function spider() {
    //spider
    push();
    line(width / 2, 0, width / 2, 180);
    fill(0);
    ellipse(width / 2, 182, 10, 14);
    ellipse(width / 2, 176, 8, 10);
    strokeWeight(1);
    for (i = 0; i <= 3; i++) {
        line(width / 2 + 4, 4 * i + 176, width / 2 + 8, 4 * i + 170);
        line(width / 2 + 8, 4 * i + 170, width / 2 + 12, 4 * i + 176);
        line(width / 2 - 4, 4 * i + 176, width / 2 - 8, 4 * i + 170);
        line(width / 2 - 8, 4 * i + 170, width / 2 - 12, 4 * i + 176);
        }
    pop();
}

function question() {
    text("?", 100, 100);
}

function draw() {
    if (frameCount > 0) {
    baymax();
    }
    if (frameCount >= 7) {
        spider();
        spider.play();
      }
    if (frameCount >= 10) {
        question();
        question.play();
      }
    if (frameCount >= 9) {
        smile();
        baymax.play();
      }
    if (frameCount > 18) {
      frameCount === 1;
      }
}

Looking Outwards – 09

I decided to look into Angela Washko and her work in feminist and alternative video games.
“The Game: The Game” is a fresh take on dating sims, as the player goes through the experience of seduction as a femme-presenting individual.
Along with the traditional dating sim mechanics, this game also provides commentary on politics, tactics and practices of the male pick-up strategies.
It creates empathy or a sense of understanding among people in these specific and hyper-gendered social situations.
I’ve always thought of video games as a platform of expression, but I hadn’t considered political or social commentary to be a particularly prominent aspect.
However, Washko and her work has brought this element into the forefront of my attention, and I will continue to look for more meaningful avenues that video games may promote in the future.
More generally, Washko’s work takes on a specific angle in interdisciplinary art, combining aspects of performance, mainstream media, digital art, cinematography and video games.
She’s a Associate Professor of Art at CMU and primarily works with the MFA program.
https://angelawashko.com/section/437138-The-Game-The-Game.html

LO-08 Creative Practice of an Individual

Alexander Chen is an artist and creative director at Google. He specializes in music visualization and experimentation in Cambridge, MA.
His educational background is focused in Engineering and Digital Media Design at UPenn.
He has worked on a number of fascinating projects as a freelancer, including a program that turns NYC’s subway system into a musical instrument.
His experience playing viola also inspired him to examine classical music such as the Bach Cello Suite and visualize it using string physics.
At Google, Chen has contributed to the Les Paul Google Doodle as well as the Chrome Music Lab.
I found Chen a very relatable and open speaker, and I think I share a similar connection to music, as I feel like visual art and music have strong ties to one another.
As a classically trained pianist/violinist, his Baroque.me project was particularly meaningful to me and opened my eyes to the possibilities of music visualization.
It changed the way I listened to a piece I’d listened to probably a hundred times before.
In terms of strategy, I was particularly impressed with the number of demos Chen had to offer the audience, which kept them engaged and entertained.
https://www.chenalexander.com/Bio
https://vimeo.com/232541082 embedding is not working 🙁

Project 07 – Composition with Curves

sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 07 - Composition with Curves
 */

var nPoints = 100;
var CYCLOID = 0;

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

function draw() {
    background(0);
    // draw the curve in the middle and iterate 3x
    translate(width / 2, height / 2);
    for (i = 0; i < 3; i ++) {
        drawCycloid();
        rotate(90);
    }
    rotate(mouseX / 50);
}

function drawCycloid() {
    // Cycloid:
    // https://mathworld.wolfram.com/Cycloid.html
    
    var x;
    var y;
    
    var a = constrain(mouseX / 2, 0, 200);
    var b = constrain(mouseY / 2, 0, 200);

    stroke(240, 3, 252);
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a * (t - sin(t));
        y = a * (1 - cos(t));
        vertex(x, y);
    }
    endShape();
}

I had a hard time figuring out the math behind the functions, but well, I guess I ended up getting it in the end. It’s not very fancy, but I iterated a Cycloid function three times to make a sort of 3-way yin&yang, minus the outer circle.

Cycloid function without any transformations
Started constraining x and y to mouseX and mouseY and rotating the canvas with mouseX
3 iterations with aforementioned constraints and transformations

Looking Outwards 07 – Data

https://ocean.rachelbinx.com/coral-map (can’t embed :<)

This happens to be an ongoing project, but I looked into Rachel Binx’s “Ocean Vis” collection of maps.
Binx is a data visualization specialist who bridges locational data with
She’s created maps of the oceans and their various biomes and species (coral specifically).
It caught my eye because I’d never seen a map that highlighted the oceans and was honestly initially confused as to the orientation.
I also began to feel more critical about my internalized definition of a map – I always saw them as land-oriented before (if someone asked me to draw the contour of an ocean I’d be really lost).

Map of various biomes in our oceans
Map of coral species distributions (interactive)

Project-06

sketchDownload
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 06 - Abstract Clock
 */

var x = [];
var y = [];
var s = 25;
var side = 10

var s;
var m;
var h;

//160, 160, 160
function setup() {
    createCanvas(480, 480);
    rectMode(CENTER);
    frameRate(1);
    stroke("white");
}

function circles(x, y) {
    fill(3,122,118); //squid game green
    ellipse(x, y, 10);
}

function triangles(x, y) {
    fill(237, 27, 118); //squid game pink
    triangle(x - side / 2, y - side * sqrt(3) / 2, x - side, y - 0, x - 0, y - 0);
}

function squares(x, y) {
    fill(255);
    rect(x, y, 30, 30);
}

function draw() {
    clear();
    background(0); //black background
    s = second();
    m = minute();
    h = hour();
    for (i = 0; i < h; i++) { // draw same # of shapes as hrs, mins, sec
        x[i] = random(10, 150);
        y[i] = random(10, 470);
        squares(x[i], y[i]);
    }
    for (j = 0; j < m; j++) {
        x[j] = random(170, 330);
        y[j] = random(10, 470);
        triangles(x[j], y[j]);
    }
    for (k = 0; k < s; k++) {
        x[k] = random(340, 470);
        y[k] = random(10, 470);
        circles(x[k], y[k]);
    }
}

I made a clock inspired by the Netflix show “Squid Game” – I used the colour palette of the outfits they wear as well as the shapes that represent ranks of the people running the game.

No spoilers 🙂

The circles (lowest rank symbol) represent seconds, triangles (soldiers) minutes, and squares (managers) hours.

I decided to make all of the shapes move at random within certain bounds to indicate controlled chaos, which pretty much sums up the dystopian narrative of Squid Game.

I haven’t watched it all yet, so PLEASE DON’T TELL ME ANYTHING ABOUT IT YALL

Looking Outwards 06

I found a generative computational artist named Anders Hoff (aka inconvergent) – he uses circles and convergent points to create an algorithm that mimics branches of a tree, all encompassed in a circular canvas.
The program ‘decides’ whether to collide or create a new branch, thus creating both intersection and deviation points to simulate a natural-looking plant.
The size of the branches also impacts the variability as well as the form, as the smaller branches have to respond to the larger branches that have already been drawn.
I think this is a cool way to bring computing and art together, and the detail that the artist includes (smaller branches are more concentrated and have comparable ‘mass’ to larger branches) is indicative of his dedication to making his algorithm match realities of the natural world.

Looking Outwards 05

I’ve chosen to investigate the early stages of mainstream animated movies – I found a cool video of the early development stages of the movie Toy Story, just when “3D” animation was taking off.
I’d imagine that the process for animation back then was different than it is today – we have programs like Maya and Blender to help us render, process, and rig 3D models now.
Toy Story looked a lot different in this video than it did on release, and we can see the character design process (Woody was almost a villain!)
Tom Hanks seemed to have played an important role in determining the direction of the plot and characters.

https://www.youtube.com/watch?v=t2ejwJ0QXvs
Toy Story
Various Animators – Andrew Stanton & Pete Docter (named in the video)

Project-05

sketch
//Nami Numoto
//Section A
//mnumoto

var x = 0;
var y = 0;

function setup() {
    createCanvas(600, 300);
    background(191, 231, 242); //pastel blue
}

function kirby(x, y) {
    stroke(0); //black outline
    fill(224, 0, 91); //kirby feet pink! (feet come first because layers)
    ellipse(x + 20, y + 35, 40, 20);
    ellipse(x - 20, y + 35, 40, 20);
    fill(243, 165, 170); //kirby main body/face pink! + arms as well
    ellipse(x + 40, y + 10, 30, 25); //right arm ellipse
    ellipse(x - 40, y + 10, 30, 25); //left arm ellipse
    ellipse(x, y, 80, 80); //face ellipse
    fill(235, 104, 150); //kirby blush pink!
    ellipse(x - 20, y, 10, 5);
    ellipse(x + 20, y, 10, 5);
    //eyes going like ^^
    line(x + 8, y - 5, x + 12, y - 15); //right
    line(x + 12, y - 15, x + 16, y - 5);
    line(x - 8, y - 5, x - 12, y - 15); //left
    line(x - 12, y - 15, x - 16, y - 5);
    //i don't think i like the mouth actually, not with the ^^ eyes.. leave it off
}

function draw() {
    //set of loops for more-unit columns
    for(let i = 0; i <= 3; i += 1) {
        for(let column = 0; column <= 4; column += 1) {
            kirby(x + (200 * column), y + i * 100);
        }
    }
    //set of loops for less-unit columns
    for(let i = 0; i <= 2; i += 1) {
        for(let column = 0; column <= 3; column += 1) {
            kirby(x + (200 * column) + 100, y + i * 100 + 50);
        }
    }
}

I’ve made a Kirby wallpaper – I didn’t want to copy Kirby in his original form exactly, so I made him smiling with his eyes 🙂

This was a lot of fun, I hope to make more drawings like this.

Project-04

sketch
//Nami Numoto
//mnumoto
//Section A


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var r = 0; //red
var g = 0; //green
var b = 0; //blue

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    var r = random(0,255);
    var g = random(0,255);
    var b = random(0,255);

    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines; //shape 1 (given)

    ex1 = 2 * (150-50)/numLines;
    ey1 = 2 * (300-50)/numLines;
    ex2 = 2 * (350-300)/numLines;
    ey2 = 2 * (100-300)/numLines; //shape 2

    fx1 = 4 * (150-50)/numLines;
    fy1 = 4 * (300-50)/numLines;
    fx2 = 4 * (350-300)/numLines;
    fy2 = 4 * (100-300)/numLines; //shape 3
}

function draw() {
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    stroke(r, 0, 0); //set the stroke colour to some shade of red
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke(0, g, 0); //set the stroke colour to some shade of green
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ex1;
        y1 += ey1;
        x2 += ex2;
        y2 += ey2;
    }
    stroke(0, 0, b); //set the stroke colour to some shade of blue
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += fx1;
        y1 += fy1;
        x2 += fx2;
        y2 += fy2;
    }
    noLoop();
}

I’m not sure why it’s showing up the way it is – baseline, I struggled a lot with this project (mostly technically).

The idea was to make a fractal of sorts by squaring (hence the doubling and quadrupling) the original shape. I also intended to make each segment a different shade of red, blue, and green, infinitely.

Any suggestions? I was going to do a loop, but I was running low on time so I simply did it manually three times.