afukuda-FinalProject

sketch

/*  Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | Final Project
 */ 


// ---- VARIABLES FOR FERRIS WHEEL ---- 
  // ferris wheel color
  var structureColor = 255;  // white
  var supportColor = 90;     // grey 
  
  // speed
  var speed = 160;
  
  // ferris wheel dimensions
  // note: counting circles from most inner to outermost 
  var centerX;        // center of ferris wheel (x-coordinate)
  var centerY;        // center of ferris wheel (y-coordinate)
  var radiusC1;       // radius of circle 1  
  var radiusC2;       // radius of circle 2 
  var radiusC3;       // radius of circle 3 (carrying the passenger cars)
  var radiusC3R;      // radius of circle 3 (passenger cars rotate on it)
  var radiusCar;      // radius of passenger car 
  var radiusBolt;     // radius of bolt on passenger car (detail)
  
  var base;           // base of ferris wheel 
  var baseW;          // width of base of ferris wheel 
  var baseH;          // height of base of ferris wheel 

// ---- END OF VARIABLES FOR FERRIS WHEEL ---- 

// ---- VARIABLES FOR FIREWORK ---- 
var fireworks = []; 
var particles = [];
var gravity = 0.7;
// ---- END OF VARIABLES FOR FIREWORK ---- 


function setup() {
	createCanvas(480, 480); 
  	frameRate(10);
	strokeWeight(1);
	stroke(255);

    // ---- FERRIS WHEEL ---- 
    // define ferris wheel dimensions
  
    var h = height/1.75;   // scaling ferris wheel (overall)

    centerX = h/2.2;  
    centerY = h - h/10; 
    radiusC1 = h/11; 
    radiusC2 = h/2.8; 
    radiusC3 = h/1.3; 
    radiusC3R = h/1.4; 
    radiusCar = h/10;
    radiusBolt = h/60;

    base = h/90;
    baseW = h/6.5;
    baseH = 1.35*h;

    // ---- FIREWORK ---- 
	fireworks.push(new Firework());
}

function draw() {
    background(36, 69, 140);
	background('rgba(0,0,0, 0.1)');

    // ---- FERRIS WHEEL ---- 
    
    // ---- ROTATIONAL ----
    // draw grey beam
    push();
    strokeWeight(1.1);
    stroke(supportColor);
    noFill();
    translate(centerX,centerY);
    rotate(frameCount/speed);
    for (k = PI/8; k < 2*PI; k += PI/4) {
      arc(0, 0, radiusC3, radiusC3, k, k + PI/4, PIE);
    } 
    pop();

    // draw white beam & circle 
    push();
    strokeWeight(1);
    stroke(structureColor);
    noFill();
    translate(centerX,centerY);
    rotate(frameCount/speed);
    for( i=0; i < 2*PI; i += PI/4) {
      arc(0, 0, radiusC3, radiusC3, i, i + PI/4, PIE);
    }
    pop();
  
    // draw passenger car 
    push();
    for (k=0; k<8; k++) {
        fill(72,157,206);
        arc(radiusC3R/1.85*cos(frameCount/speed + (PI/4*k)) + centerX, radiusC3R/1.85*sin(frameCount/speed + (PI/4*k)) + centerY, radiusCar, radiusCar, 0, PI);
    }
    fill(supportColor);
    translate(centerX,centerY);
    rotate(frameCount/speed);
    for (j=0; j < 2*PI; j += PI/4) {
        ellipse(radiusC3R/1.85*cos(j), radiusC3R/1.85*sin(j), radiusBolt, radiusBolt);
    }
    pop();
  
    // ---- STATIONARY ---- 
    // circle 1 
    push();
    strokeWeight(1.2);
    stroke(structureColor);
    fill(supportColor);         
    ellipse(centerX,centerY,radiusC1,radiusC1);
    pop();

    // circle 2 
    push();
    strokeWeight(1.2); 
    stroke(structureColor);     
    noFill();
    ellipse(centerX,centerY,radiusC2,radiusC2);
    pop();
  
    // support beam (base & passenger car)
    push();
    strokeWeight(1);
    stroke(structureColor);
    fill(0,0,0,0);
    for(a=0; a<base; a++) {
    triangle(centerX, centerY + a, centerX - baseW + a, baseH, centerX + baseW - a, baseH);
    } 
    pop();

    // ---- PIER ---- 
    push();
    strokeWeight(5);
    stroke(102,51,0);
    line(0,baseH, centerX*1.5, baseH);
    line(centerX*1.5-10, baseH, centerX*1.5-10, height);
    line((centerX*1.5-10)*2/3, baseH, (centerX*1.5-10)*2/3, height);
    line((centerX*1.5-10)/3, baseH, (centerX*1.5-10)/3, height);
    line(10, baseH, 10, height);
    pop();

    // ---- OCEAN ---- 
    push();
    drawWaveDistant(); // calling wave draw function    (foreground)
    drawWaveClose();   // calling wave draw function    (foreground)
    pop();

    // ---- FIREWORK ---- 
    push();
    translate(width / 2, height);

    if (random(1) < 0.10) {            // probability of firework release
        fireworks.push(new Firework())
    }

    for (var i = fireworks.length - 1; i >= 0; i--) {
        if(fireworks[i].type == "Exploded") {
            fireworks.splice(i,1);
            }
        else {
        fireworks[i].draw();
        }
    }

    for (var i = particles.length - 1; i >= 0; i--) { 
        if(particles[i].position.y > 0 || particles[i].brt <= 0) {
            particles.splice(i,1);
        }
    else {
        particles[i].draw();
    }
    }
    pop();

}   // ---- END OF DRAW FUNCTION ------- 

function Firework() {
    push();
    this.position = createVector(int(random(0, 0+width/3)), 0);
    this.speed = createVector(random(-1,1), -random(20,24));
    this.sparkler = round(random(0,1)) == 0;
    this.fuse = random(-1,1);
    fireworkType = int(random (0,6));
    
    switch (fireworkType) {
        case 0:
        this.type = "simple";
        break;
        case 1:
        this.type = "simple"; // used to be crackle but transformation was messing up geometry
        break;
        case 2:
        this.type = "sparkle";
        break;
        case 3:
        this.type = "double";
        break;
        case 4:
        this.type = "finale";
        break;
        case 5:
        this.type = "shooter";
        break;
    }

    this.draw = function() {      // FUNCTION 1 
        stroke(255);
        
        if (this.fuse < this.speed.y) {
            this.explode();
        }

        if (this.sparkler) {
            sparkleDir = random(0, TWO_PI);
            sparkleVel = random(0,1);
            sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
            thisSparkle = new Particle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(3,8), random(255), random(255), random(255));
            particles.push(thisSparkle);
        }
        strokeWeight(2);
        stroke(random(255), random(255), random(255));
        point(this.position.x,this.position.y);

        this.position.add(this.speed);
        this.speed.y = this.speed.y + gravity;
    }                            // END OF FUNCTION 1 

    this.explode = function() {  // FUNCTION 2 
        switch (this.type) {
        case "sparkle":
        if (this.type == "sparkle") {
            for (var i = 0; i < 60; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,3) + random(0,3);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(3,8), random(255), random(255), random(255), "sparkle");
                particles.push(thisSparkle);
            }
                this.type = "Exploded";
        }

        break;

        case "double": {
            for (var i = 0; i < 90; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(3,5);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(2,4), random(255), random(255), random(255));
                particles.push(thisSparkle);
            }
            for (var i = 0; i < 10; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,.5);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(2,4), random(255), random(255), random(255));
                particles.push(thisSparkle);
            }
                this.type = "Exploded";
        }
        
        break;

        case "finale": {
            for (var i = 0; i < 500; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,4)+random(0,4);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(3,6), random(255), random(255), random(255));
                particles.push(thisSparkle);
            }
            this.type = "Exploded";
        }
        
        break;

        case "shooter": {
            for (var i = 0; i < 100; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,2)+random(0,3);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(1,3), random(255), random(255), random(255),"shooter");
                particles.push(thisSparkle);
            }
            this.type = "Exploded";
        }
        
        break;

        case "crackle": {
            for (var i = 0; i < 60; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,3) + random(0,3);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(7,10), random(255), random(255), random(255),"crackle");
                    particles.push(thisSparkle);
            }
            this.type = "Exploded";

        }
        
        break;

        default: {
            for (var i = 0; i < 100; i++) {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,5);
                sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(1,3), random(255), random(255), random(255));
                particles.push(thisSparkle);
            }
            this.type = "Exploded";
        }
        }
    }            // ---- END OF FUNCTION 2 
    pop();
}  


function Particle(position, speed, fade, r, g, b, type) { 
	this.position = position.copy();
	this.speed = speed.copy(); 
	this.fade = (fade == undefined ? 5 : fade);
	this.r = r
    this.g = g
    this.b = b
    this.type = type;

	this.brt = 70;

	this.burntime=0;

	this.draw = function() {
		stroke(this.r, this.g, this.b);
		newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
		newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;

		point(newPositionX, newPositionY);

		if (this.type == "shooter" & this.burntime > 1) {
			line(newPositionX, newPositionY, this.position.x + log(this.burntime-2) * 8 * this.speed.x, this.position.y + log(this.burntime-2) * 8 * this.speed.y + this.burntime * gravity);

(note: I uploaded my final project before the midnight deadline on Friday, however, I noticed that the visuals was not showing up on my post so I tried editing it. It is still not showing up on WordPress when it was originally.)

I changed my idea from my Final Project proposal; initially I wanted to create a storyboard that incorporated fireworks as the final landscape. But I thought a storyboard wasn’t “computational” enough and I wanted to incorporate more concepts learned in class. So that’s why I maintained creating a code for fireworks and incorporated a generative landscape of a ferris wheel. I wrote the fireworks to be multi-colored, and at random fire different styles of fireworks. One thing I struggled with is putting the ferris wheel code and the fireworks code together; the codes would affect the other and therefore I had to use push() and pop() to maintain the stylistic elements of the two components of my final project.

afukuda-LookingOutwards-12

 

[project 1 – Freeform | Interactive Reload Nr.1 by Rosanna Casalnuovo ]

“Freeform | Interactive Reload Nr.1” by Rosanna Casalnuovo is part of a series of interactive graphics with different geometrical compositions and colors realized with generative code. I admire the use of an array of vibrant colors in this project, something that I would hopefully be able to incorporate into my own project. I also find the balance between randomness yet the presence of an underlying structure in this project compelling, successfully making it an interesting interactive piece of work. An opportunity they might have overlooked is having a clear intent of their project. While the project is overall an interesting one, it just seems to be an interactive piece of work that is abstract and most likely programmed recreationally. By incorporating an intent, the project might become stronger and more meaningful.

[project 2 – Ring by Lucas Cabral]

“Ring” by Lucas Cabral, is another dynamic piece of work, in which the program creates distinct rings according to its accompanying sound. It attempts to emphasize that there is in fact a visual component in music as well, and overall plays around with the concept of sound visualization. The dynamic rings that appear on the screen reminded me of a kaleidoscope as well fireworks, which creates a relevance to my final project. I also enjoyed how the visuals changed depending on which part of the song was playing, along with the color of the rings. It would have been great if the artist took a further step forward and created more of these rings, creating a perception of depth and emphasizing the dynamism of the work.

Link | https://vimeo.com/241539505 [project 1]

Work | Rosanna Casalnuovo. Interactive Reload Nr.1. 11.06.2017

 

Link | https://vimeo.com/240247633 [project 2]

Work | Lucas Cabral. Ring. 10.26.2017

afukuda-Final-Project-Proposal

For my final project I would like to create something involving fireworks. There is some leeway as to how to make my project compelling and not just project fireworks, but I am leaning towards creating an illustration showcasing what a common summer festival in Japan is like (see preliminary sketch). The animation would follow a young couple as they go on their first date at the summer festival. By making this animation a part of my final project, it would allow me to showcase a part of my culture, making it a meaningful project. Further, it would give me the opportunity to further explore generative landscape, which we briefly touched upon for project 10. I enjoyed doing this project so it would be great if I can also integrate this form of visual into my project as well. I am working on this project alone.

afukuda-Project11-Composition

sketch

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 11
 */ 

var myTurtle; 

function setup() {
  createCanvas(400, 400);
  background(193, 228, 221);

  myTurtle = makeTurtle(width/2, height/2);  // set turtle at center of canvas 
  myTurtle.setColor(color(140, 164, 212));   // set stroke color 
  myTurtle.setWeight(1); 
  myTurtle.penDown();                        // initialize turtle 

  frameRate(2);
}


function draw() {
  var sideLength = 20;             // set initial side length of rectangle 

  for (i=0; i<50; i++) {
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);

    myTurtle.penUp();              // put pen up while rotation of rectangles are occuring 
    myTurtle.right(15);            // rotate rectangle by 30 degrees 
    myTurtle.penDown();            // put pen down 

    sideLength *= 1.05;            // increase side length by 1.05  
  }
}


// Turtle graphics implementation for p5.js:
function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtleBack(p) {
    this.forward(-p);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}

function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}

function makeTurtle(tx, ty) {
  var turtle = {x: tx, y: ty,
  angle: 0.0, 
  penIsDown: true,
  color: color(128),
  weight: 1,
  left: turtleLeft, right: turtleRight,
  forward: turtleForward, back: turtleBack,
  penDown: turtlePenDown, penUp: turtlePenUp,
  goto: turtleGoTo, angleto: turtleAngleTo,
  turnToward: turtleTurnToward,
  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
  setColor: turtleSetColor, setWeight: turtleSetWeight,
  face: turtleFace};
  return turtle;
}

For this project I used this week’s lab as an underlying base, as I wanted to develop it further and make it dynamic and more intricate, since I saw a potential for it to become a compelling piece of work. Using ‘Turtle Example 2’ as a guide, each loop creates an array of rotated squares, which is overall rotated to gradually fill the canvas. While working on this project, I was playing around with the value of angle of rotation, and I was intrigued with how a slight change in angle of rotation causes a significant change in the overall affect the aggregate conveys. In the current configuration the angle of rotation is set to 15, which conveys a spiraling, sea-shell like geometry. While an angle of rotation of 30 conveys a more radial aggregation (see below for visuals).

 

 

 

 

[screenshot of final project]

 

 

 

 

[screenshot of project with angle of rotation of 30]

 

 

 

 

[screenshot of lab assignment + initial sketch of project]

 

afukuda-LookingOutwards-11

Game of Skill 2.0

[Video showcasing the installation]

Game of skill 2.0 by Christine Sun Kim is an interactive installation, resembling a zipline, where a text about the future written by Kim and voiced by a museum intern (as she is deaf since birth) is played at different levels and speeds depending on the direction and speed of the participant. I find this project compelling, as she conveys listening, which is often regarded as a passive activity, as something requiring physical labor in order to “acquire”. And being deaf since birth, I think this project communicates her personal struggles, making it a meaningful project. The technical side of the project involves the use of velcro, magnets, custom electronics and the intern’s voice.

[A snapshot of how users interact with the installation]

Link | http://christinesunkim.com/work/game-of-skill-2-0/

Work | Christine Sun Kim. Games of Skill 2.0. October 11 2015 – March 7 2016

afukuda-Project10-Landscape

sketch

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project| 10
 */ 

var clouds = [];  // array containing clouds 
var boat;         // variable containing boat image 
var boatX;        // x-coordinate of boat 

function preload() {               // load boat image 
    boat = loadImage("https://i.imgur.com/Z33aV9X.png")  
}

function setup() {
    createCanvas(400, 200); 
    
    for (var i=0; i<8; i++) {      // create initial collection of the clouds
        var rx = random(width);
        clouds[i] = makeCloud(rx); 
    }
    frameRate(10);

    boatX = 0;                     // initial position (x-coord) of boat 
}


function draw() {   
    background(214, 233, 248);     // sky color setting 

    updateClouds();    // calling cloud functions       (background)
    addClouds(); 

    drawTerrain();     // calling terrain draw function (middle ground)
    drawWaveDistant(); // calling wave draw function    (foreground)
    drawBoat();        // calling boat draw function    (adding element)
    drawWaveClose();   // calling wave draw function    (foreground)
}


// ---- ELEMENT - BOAT ----
function drawBoat() {
    image(boat, boatX, 102, boat.width/10, boat.height/10);  // draw boat image at 1/10 scale 
    
    boatX = boatX + 2;    // move boat across the canvas at constant speed 
    
    if (boatX > width) {  // reset boat once it hits the right edge of canvas 
        boatX = 0;
    }
}


// ---- UPDATE FUNCTION ----
function updateClouds() {  // update position of clouds & draw them 
    for (i=0; i<clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}


// ---- ADD FUNCTION ----
function addClouds() {    // add more clouds 
    var newCloudLikelihood = 0.005; 
    if (random(0,1) < newCloudLikelihood) { 
        clouds.push(makeCloud(width));        // add new cloud to start of cloud array 
    }
}


// ---- ADDING MOTION TO OBJECT ----
function cloudMove() {    // add motion to clouds 
    this.x += this.speed;
}
    

// ---- DEFINING WHAT IS GOING TO BE DISPLAYED ----
function cloudDisplay() { 
    var u = 10;                      // constant unit (multiply depth to show clouds better)
    var cloudDepth = this.depth * u; // depth of cloud 

    noStroke();
    fill(252);                       // color setting - white 

    push();
        translate(this.x, height-90);
        beginShape();
            ellipse(0, -cloudDepth,  this.x * 0.25, u*1.25);
        endShape(); 
    pop();
}


// ---- DEFINING OBJECT ----
// ---- BACKGROUND - CLOUDS ----   
function makeCloud(cl) {
    var cloud = {
                x: cl,
                speed: -1,
                depth: round(random(6,12)), // need to adjust 
                move: cloudMove,
                display: cloudDisplay
                }
    return cloud;
}


// ---- MIDDLE GROUND - TERRAIN ----
var terrainSpeed = 0.0005;
var terrainDetail = 0.007;

function drawTerrain() {  
    noStroke();
    fill(147, 183, 147, 180); 

    beginShape();
        for (x=0; x<width; x++) {
            var t = (x * terrainDetail) + (millis() * terrainSpeed);
            var y = map(noise(t), 0, 1, 40, 120);
            vertex(x, y);
            vertex(0,height);
            vertex(width,height);
        }
    endShape();
}


// ---- FOREGROUND - WAVES ---- based on stevenraysimon sine wave script 
var offset = 0;
var amplitude = 1;

function drawWaveDistant() {   // function drawing waves (distant)
    stroke(256);
    strokeWeight(2);
    fill(90, 185, 224);  // color setting - blue 

    beginShape();
        vertex(0, height);
        for (x=0; x<width; x++) {       
            var angle = offset + x * 0.04; 
            var y = map(cos(angle), -amplitude*2, amplitude*2, 120, 160); 
            vertex(x, y);
        }
        vertex(width, height);
    endShape();
    offset += 0.2;
}

function drawWaveClose() {   // function drawing waves (close) 
    stroke(256);
    strokeWeight(4);
    fill(1, 106, 161, 250);  // color setting - dark blue 

    beginShape();
        vertex(0, height);
        for (x=0; x<width; x++) {       
            var angle = offset + x * 0.03; 
            var y = map(sin(angle), -amplitude, amplitude, 120, 160); 
            vertex(x, y);
        }
        vertex(width, height);
    endShape();
    offset += 0.4;
}













For this project I wanted to create a generative sea landscape from the perspective of someone on a boat ride. This was inspired by a boat ride during my Asia trip over the summer. Something I had difficulty with was to oscillate the waves in the vertical direction simultaneously; as a result the waves are simply moving in the horizontal direction. What is intriguing, however, is that if you stare at the waves for some time you get an illusion that the waves are moving in their “wave-like” manner. I made the landscape elements be of continuous motion, and experimented with using images (rather than generating the geometries through p5js) to add the boat element into the program.

Initial sketch of my generative landscape

afukuda-LookingOutwards-10

[ a video synopsis of the project]

Vertical Cinema is a program of ten films by avant-garde filmmakers, musicians and visual artists, printed on 35mm celluloid and projected vertically by means of a specially developed set-up. Vertical Cinema is a site-specific cinema, a cinema attuned to the architecture of the church. What I admire about this project is how it pushes the boundaries of what constitutes a “cinema”. It first challenges the conventional projection of films horizontally by projecting it vertically. And as shown in the video, the installation distorts the films to the point where it looks like projection of light beams. It makes us ponder whether this can still be considered a “cinema”?

A little about Tina Frank:

Tina Frank is a graphic designer, media artist as well as a professor of graphic design at the University of Art and Design in Linz, Austria. She pursued her academic studies in graphic design at Graphische Lehr-und Versuchsanstalt Vienna. She was the founder & creative director for the design offices U.R.L. Agentur für Informationsdesign. Her roots were in web design and cover designs for experimental electronic music during the mid 1990s when she also started to work with digital real-time visualization, video & multimedia.

Link | http://www.tinafrank.net/audiovisual-art/colterrain/

Work | Tina Frank. Vertical Cinema. Oct 12 2013

afukuda-Project09

sketch

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 09
 */ 

var underlyingImage; 

function preload() {  // load image 
    var myImageURL = "https://i.imgur.com/HE5yzx9m.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(300, 300);
    background(0);
    underlyingImage.loadPixels(); // load pixel data of image 
    frameRate(15);
}

function makeCorner(x, y) {  // x-coordinate & y-coordinate 
    noStroke();
        for (var i=0; i<width; i+=6) {                      // horizontal lines of dots 
            var colorLocationH = underlyingImage.get(i, y); // gets color value of image at (i,y)

            noStroke();
            fill(colorLocationH);                           // fills circles with color of image at (i,y)
            ellipse(i, y, 2, 2);

                                                            // vertical lines of dots 
            var colorLocationV = underlyingImage.get(x, i); // gets color value of image at (x,i)

            noStroke();
            fill(colorLocationV);                           // fills circles with color of image at (x,i)
            ellipse(x, i, 4, 4);
        }
}

var timer = 0;

function draw() {             // draw at a defined time (0, 6, 12, etc.)
   makeCorner(timer, timer);
   timer += 6;
}
 


Using the sample code given for this project as a starting point, I wanted to create more directionality & structure in how the points aggregated to create the underlying portrait. Starting at the top-left corner of the canvas, I wanted the pixels to aggregate horizontally until the edge of the canvas, then vertically (see sketch). I ended up writing a code which does all the horizontal and vertical pixels in each row simultaneously, however, through the variance in point sizes I was able to make the aggregate of the pixels more engaging and interesting and am overall content with the result.

  

 

 

 

 

 

afukuda-LookingOutwards-09

RASTER by Kyuha Shim


[Vimeo video showcasing RASTER]

This project caught my eye because I learnt about the De Stijl movement in an architectural history course, therefore it is of some familiarity to me. It also intrigued me, as the project takes something that was originally handcrafted and mimics it through the use of technology. To do this, one must fully understand the meaning behind the artistic style. I concur with my peer, that Shim is able to “combine both an advanced knowledge of De Stijl work both technically but visually.” I think, however, that RASTER is on the verge of losing the essence of what is De Stijlism; De Stijl advocates pure abstraction and universality by a reduction to the essentials of form and color, simplifying visual compositions to the vertical and horizontal, using only black, white and primary colors. Through manipulating the resolution of the grid, RASTER may become too intricate to be considered “De Stijl”.

Link |
http://www.kyuhashim.com/ [Shim’s website]
https://courses.ideate.cmu.edu/15-104/f2017/2017/09/02/lookingoutwards-01-2/ [Peer’s Looking Outwards post]

afukuda-LookingOutwards-08


Eyeo 2015 – Theo Watson & Nick Hardeman

Theodore Watson and Nick Hardeman are the key figures of the creative studio Design IO LLC (based in Cambridge, Massachusetts), specializing in the design and development of innovative, interactive installations. Watson – the Creative Director w/ a BFA Design & Technology from Parsons School of Design – is an artist, designer and experimenter whose work strives to invite people to play. Hardeman – Minister of Interactive Art – is a new media artist, designer and experimenter who enjoys combining traditional means of art medium with emerging technologies.

The studio blends design and technology, creating innovative, interactive installations and galleries for the people to enjoy. I admire their progressive mindset; applying current technological capabilities into traditional means of art. Growing up, interactive installations were not common (if they even existed); yet in today’s museum galleries – especially the children section – there are so many variety of interactive installations. I think this fosters the children’s growth more and that is why I admire how Design IO has contributed so many of these installations. Out of all their work, the Living Library my favorite project. Growing up I always enjoyed the interactive books like Eric Carl; it engages children more. And I think that the Living Library pushes this concept effectively through the use of technology.

Their presentation skill is pretty orthodox; they begin with introduction of the speakers, and they transitioned to the precedent which inspired the project they are talking about. Their presentation organization was very basic yet appreciated for its logical flow and simplicity.


Video showcasing Living Library project by Design IO (favorite work by them)

Link | http://design-io.com/ – Design IO website
http://design-io.com/projects/LivingLibrary/ – Living Library project page