Final Project – Naomi Shimada

For my final project I wanted to incorporate my writing. I took a short story that I wrote and then broke it down into 15 different scenes. I looked at each scene and then decided on a strong image on each one like a picture book. From there I coded each scene as a separate function with helper functions to create each individual aspect. In some of the scenes I decided that I wanted there to be an interactive aspect so I coded other functions that were dependent on the mouse position. I thought that by making the writing more visual and because often times you have to read the story to know what’s animated in the scene the writing itself would become more enjoyable to non-readers.

Credit for the images and the song, none of which are my own:

I wanted to code the photo of the man in the door, but creating an accurate image that captured the emotion in the actor’s face was too difficult. Here is the link.

The next image is the high chair in the kitchen. Here is the link to the original image.

The third image is another that I wanted to code but found that using an image conveyed the emotion better. Here is the link.

The final image link.

The song is Styx’s Sail Away.

Screenshots from the project:


Looking Outwards 12

One of my inspirations for my final project comes in the form of online kids’ books. I have young cousins who are learning how to read. Instead of practicing how to read with paper books they I did, they instead are learning how to read online. has many books online that help kids learn how to read. While I want to add an interactive aspect and my story will not be for small children, I realized that this approach to reading might make adults who may not like to read enjoy it more.

Link to

For the interactive part, I remembered a game from back when I was in fourth grade Spanish class. It was Jumpstart Spanish and I remembered how the game made me want to learn Spanish. Conceptually it was similar to clicking and dragging which are things that I want to incorporate to make reading fun.


Final Project Proposal

I’d like to do a final project that is an interactive story. I’m a creative writing major with a background in fine arts so I’d like to take a story of mine and then make it into an interactive experience using some sketches of mine and incorporating the whole thing into an interactive program. For example, when the right side of the screen is clicked the scene would change like the flipping of a book page. Similarly when the left side of the screen is clicked the scene would change back to the previous page. Within each screen the text of the story of the scene would be displayed and then the various elements within each screen would be interactive. For example, if a character moves in the text then the character could be dragged by the mouse from one location to another. I haven’t worked out which story I am going to use or if I’m going to use one already existing and the amount of text per page yet, but I’m hoping that it will have maybe a fairytale book feel to it.


Project 11


I really enjoyed this project.  I liked being able to add in the color changing functions because it added variety and made the turtle design a bit more engaging. sketch

var turtle;
var startFrame;

var r = 235;
var g = 200;
var b = 200;
var x = 300;
var y = 300;

function setup() {
    createCanvas(600, 600);
    x = mouseX;
    y = mouseY;
    turtle = makeTurtle(430,100);

function draw(){

    for (var i = 0; i < 100; i++) {
        if(i %2){
        r = r - random(0,.08);
        g = g - random(.03,.06);
        b = b - random(.01,.2);
        if (i % 50 === 0) {

function mousePressed(){
    r = random(0,255);
    b = random(0,255);
    g = random(0,255);

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){
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,
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;}

Looking Outwards 11

I really liked Sony’s Evans-bot. An animated robot that creates songs, it is given a series of constraints for melody and harmony, a primary chord to work off of, and then a few backup chords. These constraints are called on a “leadsheet,” described by the creator as “monophonic melodies with underlying chord sequence, “in the style ” of arbitrary composers, or corpora.”

I really like this project especially because the music is programmed to sound like a particular style of a composer like George Gershwin or Irving Berlin. I’m a big Gershwin and Berlin fan so I enjoyed hearing trademarks of their music within the program. I’m not sure how a computer would’ve been programmed to create such a thing, but I highly enjoyed it and trying to reason through a potential code.

Link to Work


Looking Outwards 10

Anne Spalter is a digital mixed media artist. She was a math major undergrad at Brown University and then earned an MFA in painting from the Rhode Island School of Design (RISD). In the 1990s she founded the digital fine arts program at both Brown University and RISD. Her piece, Waves: Sunrise, looks like paint being marbled together but is actually generated from a computer program. Unfortunately, I couldn’t find specifics on how exactly Spalter generated the piece. To me, though, it looks like Spalter created pools of color and then constantly changed the pools’ size and shapes in order to create the mixing, marbling effect.  She might have also put in a threshold to be sure that one pool of color never filled up more than a certain amount of the canvas to ensure that she had a dynamic image at every moment.

Waves: Sunrise

About Anne Spalter

Two captures from Waves: Sunrise


Project 10

My project was inspired by Les Miserable’s famous barricade scene: Enjolras is on the wagon riding through France and passing by the buildings in the city.  I used a photo to render Enjolras and the French flag (copyright disclaimer, I don’t own either image used in the program).  This is Chris Durling as Enjolras of Melborne’s production of Les Mis.  Link to production.

Here is a shot from the 2012 Les Mis movie’s barricade scene and a screenshot of Ramin Karimloo as Enjolras in the West End’s 2004 Les Mis revival.  It’s hard to see but Karimloo is on top of a wagon similar to the one I created.



//Naomi Shimada
//Section D

var buildings = [];
var img;
var inloc = "";
var ig;
var loc = "";
var x = 200;
var y = 200;
var rotS=0;
var terrainSpeed = 0.00008;
var terrainDetail = 0.005;

function preload() {
   img = loadImage(inloc);
   ig = loadImage(loc);

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

    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);

function draw() { 
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var a = map(noise(t), 0,1, 0.5, height);
        vertex(w, a);


 image(ig, 0,0,img.width/8,img.height/8);
 image(img,250,80, img.width/10, img.height/10);  //Enjolras


function wagon(){
   fill(59,35,31);   //makes main of wagon
 stroke(42,25,22);    //outter rim of L wheel
 ellipse(x,y + 100,100,100);
 ellipse(x,y + 100,25,25);   //center of L wheel

 line(0,0,0,-50);  //spokes of the L wheel

 stroke(42,25,22);    //outter rim of R wheel
 ellipse(x+250,y + 100,100,100);
 ellipse(x+250,y + 100,25,25);   //center of R wheel

 line(0,0,0,-50);  //spokes of the R wheel
 line(x,y + 25, x-100, y +25);

 function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){

function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
    buildings = buildingsToKeep; // remember the surviving buildings

function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {

// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = 300; 
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, (bHeight+ this.put));
    rect(this.pos,, 30, 50);
    rect(this.pos, -bHeight+this.set, this.wide,this.tall);

function makeBuilding(LocationX) {
    var bldg = {x: LocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                wide: random(10,30),
                tall: random(10,50),
                pos: random(0,13),
                place: random(10,50),
                put: random(75, 150),
                set: random(170, 200),
                display: buildingDisplay}

    return bldg;

Project 09 – Portrait

I had a lot of fun with this project once I got the preliminaries set up.  I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image.  But then I realized that that wouldn’t work because of the constant mouse movement.  So I decided to create a more fun portrait.  The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it.  I spent a lot of time on this image but I still want to continue working on it.

screen-shot-2016-10-28-at-11-36-32-pm beginningscreen-shot-2016-10-28-at-11-36-47-pm after one movement with the mousescreen-shot-2016-10-28-at-11-36-13-pmafter scrolling over the image multiple times


//Naomi Shimada
//Section D

var img;
var inloc = "";
var distThreshold = 20;
var underlyingImage;

function preload() {
   img = loadImage(inloc);
   underlyingImage = loadImage(inloc);


function setup() {
    createCanvas(400,300);     //sets up on the background image

function draw(){
    for (var y = 0; y < height; y +=40){
        for (var x = 0; x < width; x +=40) {
            if (nearMouse(x, y, distThreshold)) {
           var c = underlyingImage.get(mouseX,mouseY);
              stroke(c);           //the stroke color is determined on the pixel underneath
              strokeWeight(1);          //creates the last name of the subject, Khalouf
              text("Khalouf", x,y);
                 image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);

    var x = constrain(mouseX, 0, img.width - 1);     //redraws the image based on mouse X and Y
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller,x, y, 120, 120);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image

function nearMouse(x, y, d) {
    return dist(x, y, mouseX, mouseY) < d;

Looking Outwards 9

I really like Alison’s choice of Moritz Stefaner’s Project Ukko. I agree with her assessment that it is very user friendly. The visualization of the wind patterns through tilt, thickness of line, and color is very easy for anyone to read and also does not demand extensive time because it is so accessibly done. Originally when I just saw the still of the project and hadn’t yet read Alison’s review or checked out the webpage, I had thought that it was a piece of artwork because it looked so artful. I really appreciated that Stefaner found a way to make a mathy area accessible to humanities students and to give beauty to what might not seem beautiful on the surface.


Alison’s Post


Looking Outwards 8

Jake Barton, the founder of Local Projects, “an experience design and strategy firm for museums, brands and public spaces in New York” (Wikipedia), gave a thought-provoking presentation called “Like Falling in Love” at Eyeo 2012. After graduating from Northwestern University with a degree in performance studies, Barton started designing sets on Broadway then worked for Ralph Applebaum Associates then finally founded Local Projects.

Barton works on making installations and public spaces relatable to visitors/viewers through technology. Though not highly discussed in his Eyeo speech, Barton was co-leader of the team that figured out how to list the names of the 9/11 victims on the new memorial. Instead of going alphabetically, he and his team found a way to list the victims through personal connections. As mainly a humanities, writing, student, I’m very interested in the ways that technology can bring people together and make things like art and perceptions more accessible to everyone.

When he presents, Barton is confident. He goes chronologically through the production of a project, sometimes even discussing the failed ideas. He gives multiple real life examples and uses visual aids. I’d like to learn to be as relaxed while presenting as Barton appears to be.

Wikipedia Page


Eyeo Speech