mkubota@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Mari Kubota- Looking Outwards- 07

Phototrails by Lev Manovich is a research project that uses media visualization techniques for exploring visual patterns, dynamics and structures in approximately 2.3 million user-generated photos from Instagram. This data visualization project scales the images to any size and organize them in any order, presenting, for example, all the images in a collection sorted by their dates, locations, or visual characteristics. There are many ways the images were laid out to visualize different aspects of the data. Techniques include radial, montage, photoplot, and points and lines layouts.

This project drew my attention because of the way it presents data of photographs is through the photographs themselves. The unique characteristic of this data visualization is that it uses singular images to depict larger images that show patterns across a global scale.

Mari Kubota- Project- 06- Abstract Clock

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 6
*/


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

function draw(){
    background(178,208,166);
    noStroke();
    //creates vars to call on time
    var sec= second();
    var min= minute();
    var hr= hour();
    var size= 200;

    //Mapping time to shape components
    var mappedSec = map(sec, 0,59, width/2-size,width/2+size);
    var mappedMin = map(min,0, 59, 0, size);
    var mappedHr = map(hr, 0, 23, 270, 630);

    //blue circle
    fill(178,208,220);
    ellipse(width/2, height/2, size, size);

    //Background color circle ellipsing blue circle (seconds)
    fill(178,208,166);
    ellipse(mappedSec, height/2, size, size);

    //white circle (minutes)
    fill(225);
    ellipse(width/2, height/2, mappedMin, mappedMin);

    //yellow arc (hours)
    angleMode(DEGREES);
    stroke(255,248,175);
    noFill();
    strokeWeight(10);
    arc(width/2, height/2, size+50, size+50, 270, mappedHr);



    }

In this project I was inspired by the waxing and waning of the moon. Every second shifted a background colored circle over the blue circle to give an illusion of an eclipse. The center white circle grows bigger every minute. And the yellow arc on the outside grows longer every hour in a 24 hour period. The most challenging part of this assignment was adjusting the time variables to the right numbers and components.

Mari Kubota- Looking Outwards- 06

A program by a computational mathematician Andrej Bauer generates a piece of art randomly when you put in a title. The program is implemented in ocaml with the online version being implemented using ocamljs. How the program works is that the title you input becomes a seed for a number that is used to construct a mathematical formula which determines the placement of each pixel on the canvas. The art itself isn’t randomly generated each time since the same title yields the same results. The name of a picture should consist of two words with the first word determining the colors and the layout of focal points, and the second word determining the selection and arrangement of graphical elements. Therefore, by changing the first word and keeping the second, the colors and the layout change while the style remains the same. As a result, keeping the first word and changing the second one leads to a very different picture. The program is implemented in ocaml with the online version being implemented using ocamljs.

I found this program intriguing because rather than making art completely random, Andrej Bauer found a way of using mathematical algorithms to equate a specific word to a specific image that never fails to change.

Mari Kubota- Looking Outwards- 05

3DQ is a digital agency based in Barcelona founded in 2015 by Diego Querol that does Interior Design and Architecture Computer Generated Images (CGI). The purpose of 3DQ is to make photorealistic renderings of interior spaces and architecture in order to help people visualize a project. The Coworking 2040, for example, was made using Corona Renderer, which makes design, composition, lighting and texturing and modelling. Corona Renderer can also edit the texture and lighting of a material real time with little rendering time.

The colorful and realistic renderings of the Coworking 2040 drew me to 3DQ. Being able to create a tool to visualize a space without actually creating it allows people to get a feel of the space without jeopardizing money or time. A lot of 3DQ’s projects are highly saturated and texturized, giving it an alluring and realistic glow.

Mari Kubota- Project- 05- Wallpaper

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 5
*/

var spacing= 100; //space bewtween elements

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

//draws wallpaper
function draw(){
    background (150,200,200);
    Wallpaper();

}

//function that creates patterns
function Wallpaper(){ 

//cactus
    for (var x = 50; x<=width; x += spacing) {
        for (var y = 50; y <= height; y+=spacing) {
            stroke (154,205,50);
            fill(152,181,104);
            ellipse(x,y,20,20);
            ellipse(x+15, y+15, 20, 20);
            ellipse(x,y+15, 20, 20);
            ellipse(x+15,y, 20, 20);

//sparkles
    for (var a = 100; a<width; a += spacing) {
        for (var b = 100; b < height; b+=spacing) {
            stroke(204,204,0);
            fill("yellow");
            quad(a-10, b, a, b+15, a+10, b, a, b-15);
        }
    }

}
}
}

In this project I made a wallpaper with cactus and diamonds on a turquoise background. By relying on nested loops, I was able to create orderly rows of the pattern interchangeably. The challenge of this project was creating a function called Wallpaper which contained the pattern that had to be called in a draw function without looping repeatedly.

Mari Kubota- Project 04- String Art

sketch">

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 4
*/

function setup(){
	createCanvas(400,300);
	background (0);
	
	//left white crossed lines
    stroke(255);
    var yl = height*(5/6);
    var ym1 = height*(6/8);

    for(var i=0; i < 15; i++){
        line(0, yl, width/2, ym1);
        yl *=0.97;
        ym1 *= 1.02+mouseX;
    };

    //right white crossed lines
    var yr = height*(5/6);
    var ym2 = height*(6/8);

    for(var i=0; i < 15; i++){
        line(width, yr, width/2, ym2);
        yr *=0.97;
        ym2 *= 1.02;
    };

//diamond 
    stroke(255);

//bottom vertical lines
    var w1= width/4;
    for (var x=w1; x<width*(3/4); x+=14){
        line (x,height/2,width/2,height*(5/6));
    }

//upper left lines
    var w2= width/3;
    var w4= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/4,height/2, w2, y); 
        w2+=5;

        line (width/2-30,height/2, w2-5, height/3); 
        line (width/2-30, height/2, w4, height/3);
        w4-=4;
    }

//upper right lines
    var w3= width*(2/3);
    var w5= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width*(3/4),height/2, w3, y); 
        w3-=5;

        line (width/2+30, height/2, w3+5, height/3); 
        line (width/2+30, height/2, w5, height/3);
        w5+=4;
    }

//upper center criss cross lines
    var w6= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/2-30, height/2, w6, y);
        w6+=4;
    }    
    var w7= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/2+30, height/2, w7, y);
        w7-=4;
    }

	
//top of diamond
	line (width/3, height/3, width*(2/3),height/3);

}

In this project I created a diamond out of string out. The numerous lines were made from for loops and line shapes. The challenging part of this project was making the lines in the diamond match up into a cohesive shape.

Mari Kubota- Looking Outwards- 04

The project Storm Room (2009) by Janet Cardiff and George Miller is a mixed media installation that mimics the sounds and visuals of a room on a stormy day. The installation art lasts for around ten minutes. It was created for the Echigo Tsumari Art Triennial and is located in a deserted dentist’s office near Doichi, Japan. The intention of the installation art was to recreate the feeling of danger when taking refuge from a storm. The flow of water, the lights, the strobes, and the fans are controlled by a computer while the audio is projected out of 8 speakers throughout the room to create an immersive experience. Janet Cardiff’s style is expressed in this work because of the care that went into the sound of the installation.

This project attracted my attention because a lot of different elements that engage different senses were used in order to recreate the experience of a storm. The computer program that controlled the water, lights, strobes, and fans is also of interest to me because of the way it randomizes the experience each time.

Mari Kubota- Project- 03- Dynamic-Drawing

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 3
*/
var x = 300;
var y = 300;
var diameter = 8;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var angle = 0;

function setup() {
    createCanvas(640, 480);
    
}
//following mouse
let value = 0;
function mouseMoved() {
    value = value + 5;
    if (value > 255) {
    value = 0;
}
}

function draw(){
    background (200-mouseY,220-mouseY,250);
//trees

    translate(100 - mouseX/2, 0);
    fill(0);
    rect (-100, 400,1050,80);

    rect (30,200,20,200);
    triangle (40,150,80,350,0,350);

    rect (180,200,20,200);
    triangle (190,150,100,350,280,350);

    rect (330,200,20,200);
    triangle (340,150,380,350,300,350);

    rect (530,200,20,200);
    triangle (530,100,640,350,440,350);

    rect (750,200,20,200);
    triangle (750,100,860,350,660,350);

//firefly
    fill(value-100, value, value-200);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.1*diffx;
    y = y + 0.1*diffy;
    noStroke();
    ellipse(x, y, diameter, diameter);

}

In this project, I created a drawing of a firefly flying through the forest. The color of the sky, the movement of the trees, and the movement of the firefly are all controlled by the mouse.

Mari Kubota- Looking Outwards- 03

The Digital Construction Environment (2016) by Neri Oxman’s Mediated Matter Group at MIT is an open dome structure, with a diameter of 14.6 m and a height of 3.7 m, fabricated using the The Digital Construction Platform (DCP). The Digital Construction Platform is an experimental large robotic arm system that can rapidly 3D print large scale structures on site.

The Digital Construction Platform creating the Digital Construction Environment

The robotic arm consists of two systems, a large arm made for reach and the small “hand” used for more precise positioning. The Digital Construction Environment was made using digitally controlled mathematical calculations in order to make the curvature for the dome structure. This project drew my interest because it reminded me of a large scale 3D printer. It is an interesting new way of building a structure using computers and mathematical equations.

Video of DCP

Mari Kubota- Project 2- Variable Faces

In this project I changed the size of the cat’s eyes, nose, mouth, head, ears, and body with each mouse press. The most challenging part of the project was to make the ears connect to the head with each randomized variable.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 80;
var bodyWidth = 100;
var bodyHeight = 150;
var noseX = 10;

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

function draw() {
    noStroke();
    background(147,184,186);

    fill (0);
    ellipse(width/2, height/2+100, bodyWidth, bodyHeight); //body
    triangle(width/2, height/2+faceHeight/2, width/2+faceWidth/2, height/2, width/2+faceWidth/4,height/4); //ear
    triangle(width/2, height/2+faceHeight/2, width/2-faceWidth/2, height/2, width/2-faceWidth/4,height/4); //ear
    ellipse(width/2, height/2, faceWidth, faceHeight); //head

    fill(255,145,200);
    triangle (width/2, height/2+15, width/2+noseX, height/2+5, width/2-noseX, height/2+5); //nose
    stroke(255,145,200);
    strokeWeight(4);
    line(width/2, height/2+15, width/2+eyeSize, height/2+20); //mouth
    line(width/2, height/2+15, width/2-eyeSize, height/2+20); //mouth

    noStroke();
    fill (231,219,82)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //eye
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize); //pupil
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize); //pupil
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(80, 150);
    eyeSize = random(10, 30);
    bodyWidth = random(100,150);
    bodyHeight = random(130,200);
    noseX = random(5,20);
}