Author: mmirho@andrew.cmu.edu

Max Mirho – Final Project – Popping Pup!

My goal in this project was to experiment with pixelation, and pixel images.
I created a cute little puppy and managed to switch his direction and cause different modes of his interaction.

I had a lot of fun, and I feel as if I have explored JavaScript enough to the point where a small adventure game would be possible.

While I continue learning to code, especially javascript, I know I need to review objects more and understand their full usefulness, as I’ve had trouble implementing, and my thought processes often don’t include them.

Hopefully, the format I’ve submitted is correct.

See below for a zip file of my program!

Max_Mirho_final

mmirho – Final Project – Mini Role-Playing-Game

I hope to create a very simple room, like the image below, where the player is a pixelated individual, with the capability to move around and interact with the environment, the furniture in the room, and anything on the walls.

The hope is that I create a code infrastructure that can be re-used for different rooms and further improvements, maybe to create a more full-scale game later.

My inspiration is Undertale, which I mentioned in a prior blog post.

mmirho – Looking Outwards – Gamer Makers

The first project I’ve found is by Greg Borenstein, called “Ten Seconds”.

Here’s a video describing it:

Greg constructed a very simple game using methods we have already gone over in class. I could construct the game now, and that fact inspires me to make something like it. The project was created 2016-03-25.

I also want to highlight an indie developer and composer named Toby Fox. He built the extremely well-known indie game “Undertale”.

I realize this is lame, but the best resource I can find explaining the game is the Wiki page: https://en.wikipedia.org/wiki/Undertale

The way he constructed the game was incredibly simple, and he used every possible aspect of creativity that he could to make the game crush all expectations. I think the art, music, and storyline are all brilliant, and I hope to learn from what Toby created. The game was published September 15, 2015.

I hope to construct a very small version of something similar to Undertale, so the game is a big inspiration.

mmirho – Looking Outwards 11 – Marble Machine

Though this is technically composed by a band, I very much would consider this piece much more artistic and designed than a musical composition. I think it blurs the line between the two even further because of course this is still meant to entertain.

The project is called “Marble Machine”, and is composed by Wintergatan.

Here’s the video:

You may argue that this instrument is not computational, but the design of the note timing, the construction of the machine’s parts, and the overall structure of the music is absolutely computationally based. It’s a real-world manifestation, but it was definitely created computationally. The design of the notes was then put through a CNC Mill to create the physical note timing.

mmirho – Project 11 – Color Clocks

I definitely learned the usefulness of turtles when it comes to both dashes and curves.

After fiddling around with turtle movement, I accidentally created rotating clock hands and decided to base my experiment on it.

sketch

var t1;
var t2;
//Two turtles used for clock hands

var tC1;
var tC2;
var tC3;
var tC4;
//Four turtles used for the circles

var t = 6;
//Simple incremental distance for convenience

function setup() {
    createCanvas(480, 480);
    
    t1 = makeTurtle(0, 0);
    t2 = makeTurtle(0, 0);
    //initialize both clock hand turtles

    tC1 = makeTurtle(0, 0);
    tC2 = makeTurtle(0, 0);
    tC3 = makeTurtle(0, 0);
    tC4 = makeTurtle(0, 0);
    //initialize the four circle turtles
}

function draw() {

    background(255);

    strokeJoin(MITER);
    strokeCap(PROJECT);

    makeCirclesAndHands(1, 1, "red", tC1);
    makeCirclesAndHands(3, 1, "green", tC2);
    makeCirclesAndHands(1, 3, "blue", tC3);
    makeCirclesAndHands(3, 3, "yellow", tC4);
    //Makes all four circles and the conditional clock hand situations

}


function hand(turtle, length, speed, x, y, color, thick) {

    turtle.penUp();
    turtle.goto(x, y);
    turtle.penDown();
    turtle.forward(length);
    turtle.right(speed);
    turtle.setColor(color);
    turtle.setWeight(thick);

    //Makes a clock hand that rotates around x,y and has 
    //a bunch of other variables tha control the appearance and movement

}

function circley(turtle, x, y, color) {

    //Makes a dashed circle at x,y with a 
    // color, using a specific turtle by
    // moving a given distance on the curve with
    // the pen down, then again with the pen up
    // then repeating that penUp penDown process
    // until the full circle is completed

    turtle.setColor(color);
    turtle.face(0);
    turtle.setWeight(6);
    turtle.goto(x,y);
    for (var p = 0; p < 18; p++) {
        for (var l = 0; l < 10; l++) {
            turtle.penDown();
            turtle.forward(1);
            turtle.right(1);
        }
        for (var i = 0; i < 10; i++) {
            turtle.penUp();
            turtle.forward(1);
            turtle.right(1);
        }
    }

}

function distance(x1,y1,x2,y2) {
    return sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}
//Simple distance formula for use in calculation


function makeCirclesAndHands(widthMultiplier, heightMultiplier, colorChange, circleTurtle) {

    //Creates four dashed line circles that, if you put the mouse 
    //inside them, change color depending on the circle and place 
    //spinning clock hands within the circle

    if (distance(mouseX, mouseY, widthMultiplier*width/4+7, heightMultiplier*height/4+7) < 50) {
        circley(circleTurtle, widthMultiplier*width/4, heightMultiplier*height/4 - 50, colorChange);
        hand(t1, 50, 1, widthMultiplier*width/4,heightMultiplier*height/4+7, 0, t);
        hand(t2, 30, 0.5, widthMultiplier*width/4,heightMultiplier*height/4+7, 100, t-1);
    } else {
        circley(circleTurtle, widthMultiplier*width/4, heightMultiplier*height/4 - 50, 0);
    }
}



//Compressed turtle stuff

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;}

mmirho – Project 10 – Inside a Submarine

This is supposed to show what it would be like to look out of a submarine!

Different color and sized fish fly by at different speeds, as you peek through the portholes.

I will admit, however, I was unable to figure out how to use objects effectively without blatantly copying the format given to me. Instead, I used loops and if statements, and I understand I did this project incorrectly. However, I hope it satisfies the requirement for a landscape! 🙂

I plan to schedule some office hours to more fully understand how objects function. Sorry!

sketch

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

//Creates fish x location for each 
//fish to increment with speed
var fishX1 = 0;
var fishX2 = 0;
var fishX3 = 0;

//Assigns speed values for each fish
var speed1 = 0;
var speed2 = 0;
var speed3 = 0;

//Assigns vertical location values for each fish
var up1 = 0;
var up2 = 0;
var up3 = 0;


//Assigns r, g, and b values for each fish
var r1 = 0;
var r2 = 0;
var r3 = 0;
var g1 = 0;
var g2 = 0;
var g3 = 0;
var b1 = 0;
var b2 = 0;
var b3 = 0;

//Assigns size variables to each of the three fish
var big1 = 0;
var big2 = 0;
var big3 = 0;


function draw() {
    background(255);

    //This assigns random variables to each fish
    //so they are a random size, speed, location, and color
    if (fishX1 < 1) {
        speed1 = random(0.1,2);
        up1 = height/2 + random(-50,50);
        r1 = random(0,200);
        g1 = random(0,200);
        b1 = random(0,200);
        big1 = random(10,30);
    } else if (fishX2 < 1) {
        speed2 = random(0.1,2);
        up2 = height/2 + random(-50,50);
        r2 = random(0,200);
        g2 = random(0,200);
        b2 = random(0,200);
        big2 = random(10,30);
    } else if (fishX3 < 1) {
        speed3 = random(0.1,2);
        up3 = height/2 + random(-50,50);
        r3 = random(0,200);
        g3 = random(0,200);
        b3 = random(0,200);
        big3 = random(10,30);
    }

    //Moves the fish at a random speed
    fishX1 += speed1;
    fishX2 += speed2;
    fishX3 += speed3;

    //Makes each fish
    fish(fishX1, up1, big1, r1,g1,b1)
    fish(fishX2, up2, big2, r2,g2,b2)
    fish(fishX3, up3, big3, r3,g3,b3)



    //Makes the submarine inside background
    subBackground();


    porthole(width/4, height/2);
    porthole(3*width/4, height/2);

    //resets the location of the fish at 0 when it 
    //reaches the end

    if (fishX1 > width) {
        fishX1 = 0;
    } else if (fishX2 > width) {
        fishX2 = 0;
    } else if (fishX3 > width) {
        fishX3 = 0;
    }
}

function porthole(x,y) {

    //Makes a porthole, with the inside slightly blue
    //but translucent, so it acts like a window

    fill(0, 0, 200, 80);
    strokeWeight(30);
    stroke(200);
    ellipse(x,y,height/3,height/3);

}

function fish(x,y,big,r,g,b) {

    //Makes a fish with an ellipse and a triangle

    fill(r,g,b);
    noStroke();
    ellipse(x,y,big*2,big)
    triangle(x-big/2,y,   x-big*1.5,y+big/2,   x-big*1.5,y-big/2);
    fill(0);

    //adds a little eye
    ellipse(x+3*big/5, y-big/4.5, 3,3);

}

function subBackground() {

    //Fills in the outside of the portholes with
    //green, indicating the inside of the submarine

    fill(0,70,0);
    rectMode(CENTER);
    rect(width/2, height/2, 100, height);
    rect(width/2 - 237, height/2, 100, height);
    rect(width/2 + 237, height/2, 100, height);
    rect(width/2, height/2-215, width, 300);
    rect(width/2, height/2+215, width, 300);

}

mmirho – Looking Outwards 10 – perfect.city

perfect.city is a project developed by Mary Flanagan. The project is an exploration of the South Korean city of Songdo, a planned international metropolis developed by Gale International. The city is designed to be perfect. Mary modeled it in the program Sims 2, and I personally respect this because it takes the enormous scale project of building a city, and boils it down to a simple generated simulation. If the design is so “Perfect” then let’s see what happens when people are put there. It’s almost a culture test, rather than just a theoretical prediction.

Mary Flanagan is an inventor, artist, writer, and designer that creates games, installations, poetry, and essays. I’m unsure as to where she studied, but she has presented at a wide range of top universities and is very active in general with all of her writing and artistic creation.

Here’s a link to the project on her page:

[perfect.city]

Here’s the video link:

 

mmirho – Looking Outwards 9 – Morphogenic Creations

I enjoyed reading Hamza’s post on Andy Lomas’s Morphogenic Creations.

The project, according to Hamza, was on display at the LACDA on September 29th of this year.

This is Hamza’s original post:

hqq – secE – lookingOutwards05

I think this project is especially interesting, simply because it caught my eye extremely well. The way the form twitches and moves felt like it made sense, that it was natural, or at least based on natural phenomenon. I was listening to music at the time, and I was mesmerized by the movement and unnerved. However, I agree with Hamza that a big part of the allure is the space it creates between the “Cells”. That’s part of what makes it fit in my mind because we don’t tend to interpret shapes as much as we interpret the space between them and the spaces they shape.

mmirho – Project 9 – Portrait – Saturated Pixelation

sketch

var underlyingImage; // The image used

var index; //The variable used to loop through the built in pixels array

var pixelation = 10; //The width of each pixel

var colorDiff = 15; //The variable used to compare the colors, and find if
// one color in the RGB spectrum is significantly larger

var r = 0; //the variable that measures the number of clicks you've done

var clickIndex; // The variable that decides if the number of clicks is
// divisible by 1, 2 or 3

function preload() {
    var myImageURL = "https://i.imgur.com/SMNCOc6.jpg";
    //Image of a portrait of me and my girlfriend at a botanical garden 🙂
    underlyingImage = loadImage(myImageURL);
    //Load the image into the variable underlying image
}

function setup() {
    createCanvas(400, 380);
    background(0);
    underlyingImage.loadPixels();
}

function draw() {
    noStroke();

    for (var y = pixelation/2; y <= 1000; y += pixelation) {
        for (var x = pixelation/2; x <= 1000; x += pixelation) {
            //These nested loops move through each and every pixel in the given image
            //They also move with relation to the pixelation intensity

            index = (x*2 + y*3200)*4 - pixelation*width/2;
            //A balancing act on looping through the colors of the image
            //using the built in pixels

            var redish = underlyingImage.pixels[index+0];
            //The red intensity of the current pixel 
            var greenish = underlyingImage.pixels[index+1];
            //The green intensity of the current pixel 
            var blueish = underlyingImage.pixels[index+2];
            //The blue intensity of the current pixel 

            if ((redish > greenish+colorDiff) & (redish > blueish+colorDiff)) {

                fill(255, greenish , blueish);

                //If the red intensity of the observed cell is significantly
                // greater than the blue and green both, then the cell is
                // made much more red

            } else if ((blueish > greenish+colorDiff) & (blueish > redish+colorDiff)) {

                fill(redish, greenish , 255);

                //Same as above, but for the blue intensity

            } else if ((greenish > redish+colorDiff) & (greenish > blueish+colorDiff)) {

                fill(redish, 255 , blueish);

                //Same as above, but for the green intensity

            } else {

                fill(redish, greenish , blueish);
                //if there isn't a significant difference, then the cell
                //color remains normal

            }

            rectMode(CENTER);
            rect(x, y, pixelation, pixelation);
            //Makes the rectangle at each x and y with relation to the pixel intensity

        }
    }
}

function mousePressed () {

    r += 1;
    //Increment r each time you click

    clickIndex = r%3
    // clickIndex will only ever be 0, 1, or 2 
    //and so we can set conditionals on it

    if (clickIndex == 0) { 
        //if the number of clicks you've done is
        //divisible by three, the difference threshold
        //is much smaller, so more cells are colored
        colorDiff = 15;
    }
    if (clickIndex == 1) {
        //if you've done 3(n) +1 clicks, increase the threshold for less color
        colorDiff = 23;
    }
    if (clickIndex == 2) {
        //if 3(n) +2 clicks, decrease the threshold further for even less color
        colorDiff = 45;
    } //Here, only the most intense colored cells are effected

}

Click it! The “Saturation” decreases and then resets in increments.

This was very interesting, I had trouble balancing the pixels array and looping through it appropriately. But, once I had the pixelation formed correctly, it was easy to affect individual cells, so the setup was important to increase ease of use.

These are the three stages of intensity the image saturates the image of me and my girlfriend.

mmirho – Looking Outwards 8 – BioPhilia

I watched and studied Scott Snibbe, and his 2012 lecture. Scott is an artist/developer that works in augmented reality, interactive interfaces, interactive art, and digital video. He lives in San Fransisco, currently works at Facebook as a project manager, and studied at Brown University in computer science. Scott describes himself as a pioneer in interactivity and augmented reality.

Among his many projects, I appreciated the depth he explored interactivity in an app he helped construct called Biophilia. It’s an interactive album built into an app format, so that you, as the listener, can manipulate the music in a way that makes it never the same, and different depending on the user. I really appreciate how relaxing and sane and normal everything feels in the interaction. Scott describes it as similar to nature and natural interaction, and that’s how it was deliberately designed. It’s simple, satisfying, and obvious as to the purpose.

In his presentation, I observed how Scott stayed simple. He didn’t delve too immensely far into any one theory, or concept, or piece of his work to the point where I and everyone else could easily understand what he was saying and what he meant. There was nothing intimidating about what he did, and even if he put years of his life into a piece he explained it plainly and simply. Hopefully, I can explain some of what I build the same way, to allow everyone to understand.

His Website: https://www.snibbe.com/

His lecture video: