sketch

/*Carley Johnson
Section E
cbjohsno@andrew.cmu.edu
Final Project
*/

platform = [];
var x, y, y1, y2, y3;
var startScreen = 0;
var platformNumber = 50;
var platformGap = 70;
var cat;
var r = 0;

function preload() {
    var cloudPic = "https://i.imgur.com/veId7W2.jpg"
    cloudImage = loadImage(cloudPic);
    var catPic = "https://i.imgur.com/ooPSMZU.jpg"
    catImage = loadImage(catPic);
    var titlePic = "https://i.imgur.com/6ehrfne.jpg"
    titleScreen =  loadImage(titlePic);
}

function Cat() {
  this.x = 10;
  this.y = 10;
}

function Platform() {
  this.x = 10;
  this.y = 10;
  this.height = 10;
  this.width = 100;
}

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

  //cloud placements
  x = width / 2;
  y = height;
  y1 = y + 100;
  y2 = y - 75;
  y3 = y - 300;

  //title screen setup
  if (startScreen == 0) {
    image(titleScreen, -30, 0, titleScreen.width/2, titleScreen.height/2);
    noStroke();
    textFont("MV Boli");
    fill(230, 181, 224);
    textSize(48);
    textAlign(CENTER);
    text("Move Cat With Mouse,", width/2, height - 95);
    text("Click To Start!", width/2, height - 50);
  }

  angleMode(DEGREES);
  
  //setup platforms
  for (i = 0; i < platformNumber; i++) {
    platform[i] = new Platform();
    platform[i].x = random(0, 400);
    platform[i].y = 500 + i * platformGap;
  }
  
  //start the platform in the right place
  platform[0].x = mouseX;
  cat = new Cat();
  cat.x = platform[0].x + 50;
  cat.y = platform[0].y - 5;
}

function draw() {
  if (startScreen == 0) {
    }
  else if (startScreen == 1) {
        //background sky
        background(88, 179, 236);
        image(cloudImage, x, y, cloudImage.width * 1.5, cloudImage.height * 1.5);
        image(cloudImage, x - 200, y1, cloudImage.width * 1.5, cloudImage.height * 1.5);
        image(cloudImage, x - 150, y2, cloudImage.width * 1.5, cloudImage.height * 1.5);
        image(cloudImage, x - 300, y3, cloudImage.width * 1.5, cloudImage.height * 1.5);
        y = y - 1;
        y1 = y1 - 1;
        y2 = y2 - 1;
        y3 = y3 - 1;

        //Gameplay
        noStroke();
        drawPlatform();
        drawCat();

        //cloud resets
        if (y < 0) {
            y = height;
        }

        if (y1 < 0) {
            y1 = height;
        }

        if (y2 < 0) {
            y2 = height;
        }

        if (y3 < 0) {
            y3 = height;
        }
    }
    
    //Cat controls
  cat.x = mouseX;
  if (mouseX < platform[r].x || mouseX > platform[r].x + 100) {
    cat.y = cat.y + 5;

    if (cat.y > platform[r].y + 10) {
      r++;
    }
  } else {
    cat.y = platform[r].y - 5;
  }
}

function mousePressed() {
  if (startScreen == 0) {
    startScreen = 1;
  }
}

function drawPlatform() {
 
  fill(147, 100, 15);
  for (i = 0; i < platformNumber; i++) {
    rect(platform[i].x, platform[i].y, platform[i].width, platform[i].height);
    platform[i].y = 500 + i * platformGap - (frameCount / 0.7 % (500 + i * platformGap));

    //Score counter
  textSize(20);
  stroke(147, 100, 15);
  textFont("MV Boli");
  fill(147, 100, 15);
  text('SCORE:', 475, 30);
  var score = parseInt(frameCount / 42) + 1;
  text(score, 565, 30);
  }
}

function drawCat() {
  push();
  translate(cat.x, cat.y);
  image(catImage, -150, -140, catImage.width/5, catImage.height/5)
  pop();

    //Game over
  if (cat.y < 0 || cat.y > 500) {
    stroke(204, 229, 242);
    fill(204, 229, 242);
    rect(130, 200, 350, 60);
    stroke(227, 116, 214);
    textFont("MV Boli");
    fill(230, 181, 224);
    textSize(60);
    textAlign(CENTER);
    text('Game Over!', 300, 250);
    noLoop();
    noFill();
    noStroke();
  }
}

A few things to play:

Click on the start screen quickly – a bug I was unsure how to fix causes the game to start play even while the start screen is up!

Keep your mouse to the left of the screen- this is where the first platform starts!

To play again, reload the page!

Otherwise, I enjoyed working on this project! I like how it looks (I drew the title card, the cat avatar, and the cloud image myself). I wanted it to be cute and slightly doodle-y in style. I picked the colors to go with this feeling. I’m proud of this because I feel like this is the first “experience” I’ve coded. It’s short and sweet, without a ton of major mechanics, but it’s a full experience nonetheless and I’m proud of it. I feel like I was able to tick off more goals of mine they I expected, so overall I’d say it is a personal win. I ended up combining my two possible game play ideas (an upwards platformer or downwards scroller) into a downwards platformer. I picked the cat theme because I was feeling homesick for my own, so I imagined that this was my cat (Soupy) trying to get home!

Currently, the idea for my project is a platform-based game. To create a comparison, it would be something like the IOS game Doodle Jump. There are things this game MUST have and things that, if time permits me, I’d LIKE it to have. For me the game must have randomly generating platforms, a vertically scrolling screen, keypad controls for an icon, good bounce physics for the icon, and the ability to detect when the player falls off the screen to restart the game. What I might like to add to the game eventually is some sort of extra obstacle- an enemy to avoid that flies in the air, or an object that can be collected. I might I also like to add a “you lose” type screen that displays the number of platforms jumped on, and the ability to start a new game when the keyboard is pressed. The second drawing (the “or”) is the possibility, if I find this too difficult, to instead do a vertical scrolling game wherein you must roll an icon down the screen and avoid being squished. A goal of mine for this project is also for the game to just be aesthetically pleasing. I’m not a designer, but I want this game to LOOK very sweet because I think design is really important when it comes to art, or specifically interactive art. Obviously, a prior project to look at is the original game Doodle Jump, as well as many, many knock off games (fast follows). There is another indie point-and-click story based game, however, whose aesthetic is more that of the game I want to create. Night in the Woods is quirky and beautiful, with great, great color palettes, and also very nice physics when it comes to characters running and jumping. This is the look I’m going for.

The group I came across, iii, is “an artist-run platform supporting radical interdisciplinary practices engaging with image, sound, space and the body.” They do residencies, and support artists, but the specific project I’ll be looking at is a totally immersive installation called “The Intimate Earthquake Archive”. The art piece uses almost every sense through vests and compositions derived from seismic recordings, interactive radio broadcasts, and sandstone earth core samples and wooden scaffolding set up around the people inside.

In this photo you can see the scaffolding and the vests worn by participants.

This project is really interesting because it plays with sound in so many ways. There are radio broadcasts as well as recordings of an Earthquake in Groningen, but the vest are the most interesting. Based on movement and position in the space, they omit sounds and rumbles that affect different parts of the body. I like how their website describes these tactile vests: “allows the wearer to explore the subtle rumbles of the earthquakes on the body.”

The truth about sound is we love it- we love music- and there is no doubt that what we listen to affects the state of our body. But often, this is not an idea explored in relation to art or so firmly attached to what we feel. I would love to wear one of these vests. Feeling and hearing the soft rumble of an earthquake in my stomach as well as all around me sounds at once terrifying and calming.

I have to suppose that the algorithms used employ motion capture graphics, so as to track the wearers progress through the Earthquake, and possibly some complex math in the transducer speakers inside the vest to know when and wear to trigger a rumble.

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/

 
var stripes = [];
var offset = 0;
 
function newStripe(px, py, ph) {
    color: setColor();
    return {x: px, y: py, h: ph};
}

function setColor(){
    return color(random(1, 255), random(1, 255), 70);
}
 
 
function setup() {
    createCanvas(480, 300);
      stripes.push(newStripe(600, 200, 200));
}

function stripeRight(p) {
    return p.x + p.h;
}

function stripeLast() {
    return stripes[stripes.length - 1];
}
 
function draw() {
    background("lightblue");
    
    stroke(0);
    for (var i = 0; i < stripes.length; i++) {
        var p = stripes[i];
        fill((random(0, 255)),(random(0, 255)), (random(0, 255)));
        rect(p.x - offset, 0, 50, p.h + 100);
    }
 

    if (stripes.length > 0 & stripeRight(stripes[0]) < offset) {
        stripes.shift();
    }
 
    if (stripeRight(stripeLast()) - offset < width) {
        var p = newStripe(stripeRight(stripeLast()),
                            random(50, 225), 
                            200); 
        stripes.push(p); 
    }
 
    offset += 1;
}
 

Lol seizure warning honestly.

The idea was to have moving stripes in a pattern, creating a sort of ever-changing wallpaper. I got the moving landscape working alright, but missed how to assign one color to one stipe, so now it’s a psychadellic wallpaper I guess

Precarious was created for the National Portrait Gallery exhibition Black Out: Silhouettes Then and Now, which opened in May, 2018.

This is a screen shot of the project, which tracks and visualizes silhouettes of people as they move through the museum. What’s different about this, though, is that the camera looks down on figures and tracks them from above. ( you can see in this screen shot, someone has figured this out and spread their arms wide.) The project is meant to show boundaries and how people push them and track over them. Camille Utterback works in installation art, meant to be interacitve and create dialogue about physicality. Utterback combines various sensing and display technologies with the custom software she writes. I like her work and this project specifically because bodies and patterns are really interesting, but other projects I’ve seen based on movement are sometimes really cluttered and not visually appealing, because movement is so unpredictable and abundant. This project however, is both visually pleasing and looks super fun.

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/

var img;

function preload() {
    img = loadImage("https://i.imgur.com/evcbg0y.jpg");
}

function setup() {
  createCanvas(400, 580);
  imageMode(CENTER);
  noStroke();
  background(18, 121, 80);
  img.loadPixels();
 
}

function draw() {
  //change angle of the stroke
  var angle = random(360);
  var x = floor(random(img.width));
  var y = floor(random(img.height));
  var pix = img.get(x, y);
  
  //make "paint stroke"
  //push();
  //rotate(radians(angle));
  fill(pix, 128);
  rect(x, y, 30, 10, 10, 10, 0, 10);
  //pop();



}

This is my mother. I chose this picture for the smile, which is so fun and genuine. I actually really like this project, I missed them from last week. I feel like I learn more from the projects because I have more room to experiment and mess around with code from scratch, as opposed to the set, set of ways I can solve an assignment. I suppose that’s a very artist thing of me to say, though.

This is the original photo, isn’t she cute?!

https://www.tokyoweekender.com/2018/06/a-world-first-mori-building-digital-art-museum-team-lab-borderless-opens-in-tokyo/

The Mori Building Digital Art Museum. Tokyo, Japan. Opened on June 21st, 2018. Mori Building in collaboration with digital art collective teamLab.

Katherine wrote her very first Looking Outward post about this museum, which claims to be the new era of museums. One that is digital, technical, and immersive. Truly, one large installation of art as opposed to what you might call a normal gallery.

The colors and light displays in particular are truly magical. Even the photos of the exhibit feel completely immersive and sensual. It makes me want to go and interact with it. The original Looking Outward post featured mostly quotes from the article about this piece, which stated that the piece is more an “experience” than it is a “medium”. This whole exhibit raises an interesting question- is this a museum? An installation? An experience? Some sort of playground? When the line gets blurred between passive exhibits and interaction, what does the art become? And is this a new wave of curating art into museums, so that they are more attractive to a public audience? Or is this a new segment of art altogether? I’m unsure, but I’d state definitely that this piece hangs closer to an interactive installation art piece than anything else.

These are the women whose art I got inspired by this week. They are Mouna and Melissa, the founders of Daily Tous Les Jours, which works in connection, physicality and pushing people to act past social boundaries (ie, dancing in the streets). They are both from Montreal but do work all over the United States and Canada, both indoors and outdoors. My favorite project of there’s is called Choreographie pour humans et les etoiles (Choreography for humans and stars) wherein the goal was to get people to dance and become celestial bodies. A camera gave them instructions (hold hands and lean out while spinning in a circle as fast as you can) and then captured the motion and translated it into a beautiful universe graphic on the screen. It was cool to see strangers getting together and laugh at themselves being silly. I feel like the world needs more of that. Their presentation was alright. The footage of their projects and them projects themselves were really interesting, but they weren’t that engaging. They tried to inject a few jokes in there that were really dry, and even though there were two of them, they didn’t play off of each other very well. Really fun and sweet projects though!

Website link:

http://www.dailytouslesjours.com/

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 07
*/

let x = 0;
let y = 0;
let ang = 90;
let col = 0;
let moveC = 1;

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

function draw() {
  background(random(100, 255), random(200, 50), random(0, 255), 5);
  stroke(100, 100, 40);

  //moving the color value
  col += moveC;
  fill(col + 50, 20, 20);
    if (col >= 100 || col < 0) {
      moveC = moveC * -1;
  }

  //rotate around the center
  translate(width/2, height/2);
  //rotation increments
  rotate(x);
  x+=1;
  //draws ellipse
  for (i = 0; i < 360; i += 13) {
  ellipse(-mouseX + cos(i++) * width / (400 / 72), width / 20 + sin(i++) * width / (400 / 72), width / 20 + mouseX, width / 20 -mouseY);
  }



}

I was not a fan of this project, the curves were all so daunting and cos/sin is really something that confuses me. I’m satisfied with the spiral the circles rotate around according to your mouse, but this was not a great project for me. Hopefully next week I can produce something more aesthetically pleasing.

A project called “Amsterdam SMS” developed for MIT Senseable City Lab and Salzburg University.

This project was created by Aaron Koblin, and is an interactive tool that traced texts sent through Amsterdam. The data was provided by KPN mobile, and built with Processing and OpenGL. It’s a visualization of data, and it changes over time (IE more texts sent as the day goes on, the data changes). Aaron believes that data processing is the future of art and story, not just for business and computational related work. He has worked on everything from music videos to VR games and has work showcased around the globe. I like this project because it mixes an artistic sensibility (found in the colors, dimension, and interactivity of the tool) with a sense of use. I could look at this piece of data processing and see how this could could be extremely valuable to a company, as well as to a consumer. As for the created software, the piece was built with Processing and OpenGL.