Author: Austin Garcia

5th year Architecture Student

Final Project – Austin Garcia – Group C

Click, hold and drag on the white circle to move it, but don’t move it too quickly or it will reset. Move it to the black circle to complete and randomize the box placement again. I intended to have collision on the white rectangles but have so-far been unsuccessful in the implementation of that.

My goal with this project was to make a quick and easy game where you moved the ball through a series of obstacles and, upon reaching the goal, the map re-set and you could do it again. I have tried to tune the boxes so that there is always a path through them to the goal, but RNG is often a difficult thing to work with and a more careful approach of creating different ‘levels’ to cycle through may have been a more effective method.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Assignment or Project
*/

var ballX = 10;
var ballY = 10;
var diameter = 10;
var goalX = 380;
var goalY = 380;
var boxNum = 15;


function drawSquares() {
    noStroke();
    fill(255);
    rect(this.x, this.y, this.w, this.h);
};

function makeSquares() {
    var squares = {
      x: random(0, 200),
      y: random(15, 380),
      w: 10,
      h: random(100),
      draw: drawSquares,

    }
    return squares;
};



function drawBoxes() {
    noStroke();
    fill(255);
    rect(this.x, this.y, this.w, this.h);
};

function makeBoxes() {
    var boxes = {
      x: random(0, 350),
      y: random(15, 380),
      w: random(100, 150),
      h: 10,
      draw: drawBoxes,
    }
    return boxes;
};

var boxes = [];
var squares = [];


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

    for(var i = 0; i < boxNum; i++) {
    var b = makeBoxes();
    var s = makeSquares();
    squares.push(s);
    boxes.push(b);
  }
}

function draw() {
    background(20, 180, 0);

    for(var i = 0; i < boxNum; i++) {
      var b = boxes[i];
      var s = squares[i];
      s.draw();
      b.draw();
   }
// mouse circle
    fill(255);
    if(dist(ballX, ballY, mouseX, mouseY)< diameter & mouseIsPressed)  {
      ballX = mouseX;
      ballY = mouseY;
  }
    //ball
    ellipse(ballX, ballY, diameter,diameter);
    //goal circle
    fill(0);
    ellipse(goalX, goalY, diameter*2, diameter*2);

    //goal circle effect
    if(dist(ballX, ballY, goalX, goalY) < 18)  {
      ballX = 10;
      ballY = 10;
      for (var i = 0; i < boxNum; i++) {
          boxes[i].x = random(0, 350);
          boxes[i].y = random(15, 380);
          boxes[i].w = random(100, 150);
          boxes[i].h = 10;

          squares[i].x = random(0, 200);
          squares[i].y = random(15, 380);
          squares[i].w = 10;
          squares[i].h = random(100);
        }
      }
      //Attempt at getting collision to work
/*    for (var i = 0; i < boxNum; i++) {
      if(dist(mouseX+5, mouseY+5, boxes[i].x, boxes[i].y) > boxes[i].w & boxes[i].h) {
        ballX = 10;
        ballY = 10;
      }
    }
      */

    }
function mouseReleased() {
   ballX = 10;
   ballY = 10;
 };

Austin Garcia – Project 12 – Final Project Proposal – Group C

I am and have always been interested in games, and have found myself understanding concepts in this class most easily though drawing connections to fundamental functions of various games I have played throughout my life. The particular strengths of P5.js that I have learned about clearly can work nicely toward creating a simple browser game, and that is what I intend to make. I would like to make a puzzle game, utilizing a geometry centered on the mouse that the player must move through a shifting maze in order to beat the game. I got the idea from an indie game that came out a while ago called ‘PUSS’. This game is remarkable both in its puzzle mechanics as well as visuals. I would love to explore both puzzle mechanics and visual style as it relates to a puzzle through this project and hopefully make something that is enjoyable to play.

Looking Outwards 12 – Austin Garcia – Group C

In regards to my Final Project, I have found two inspirations for the program I would like to make. I have decided I want to try my hand at creating an “avoid ’em-up videogame similar to the indie game Puss (link) in which a cat avatar follows the mouse as you attempt to avoid colliding into the walls of the mazes you are navigating. Puss also has very psychedelic style and colors, part of which I would also be interested in experimenting with in order to make the game more visually complex.

The second inspiration I have is a throwback to our first assignment with Mondrian. For this project though, I am more interested in something like Mondrian’s “Broadway Boogie-Woogie

Broadway Boogie-Woogie | by Piet Mondrian

I like the implied movement and chaos created by the roadways of yellow and the larger interrupting squares. I feel like this aesthetic and sensibility for design could work well for the creation of a visually interesting and distorted puzzle game.

Austin Garcia – Project 11 – Generative Landscape


sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project 11
*/

var mushrooms = [];
var capColor
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

    capColor = color(random(100, 180),random(100, 180),random(100, 180))
    stemColor = color(random(20, 80),random(20, 80),random(20, 80))
    // create an initial collection of mushrooms
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        mushrooms[i] = makeMushroom(rx);
    }
    frameRate(10);
}


function draw() {
    background(200);

    updateAndDisplaymushrooms();
    removemushroomsThatHaveSlippedOutOfView();
    addNewmushroomsWithSomeRandomProbability();

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

    rect(0, 0, width - 1, height - 1);
    displayStatusString();
    displayHorizon();




}


function updateAndDisplaymushrooms(){
    // Update the Mushroom's positions, and display them.
    for (var i = 0; i < mushrooms.length; i++){
        mushrooms[i].move();
        mushrooms[i].display();
    }
}


function removemushroomsThatHaveSlippedOutOfView(){
    // If a Mushroom 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 mushrooms
    // 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 mushrooms
    // we want to keep into a new array.
    var mushroomsToKeep = [];
    for (var i = 0; i < mushrooms.length; i++){
        if (mushrooms[i].x + mushrooms[i].breadth > 0) {
            mushroomsToKeep.push(mushrooms[i]);
        }
    }
    mushrooms = mushroomsToKeep; // remember the surviving mushrooms
}


function addNewmushroomsWithSomeRandomProbability() {
    // With a very tiny probability, add a new Mushroom to the end.
    var newMushroomLikelihood = 0.007;
    if (random(0,1) < newMushroomLikelihood) {
        mushrooms.push(makeMushroom(width));
    }
}


// method to update position of Mushroom every frame
function MushroomMove() {
    this.x += this.speed;
}


// draw the Mushroom and some windows
function MushroomDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;
    fill(255);
    strokeWeight(0);
    push();
    translate(this.x, height - 40);
    fill(stemColor);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(capColor);
    arc(5, -bHeight, this.breadth + 100, bHeight / 2, 3.1, 6.2)

    /*for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    } */
    pop();
}


function makeMushroom(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(10, 20),
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: MushroomMove,
                display: MushroomDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50);
}

/*
function displayStatusString(){
    noStroke();
    fill(0);
    var statusString = "# mushrooms = " + mushrooms.length;
    text(statusString, 5,20);
}
*/

Austin Garcia – Looking Outwards – 11 – Group C

Chloe Varelidi’s Minicade

I have always been interested in games so I was drawn to Chloe Varelidi’s repertoire when looking through the list provided. This particular project is interesting experiment in shared learning and game design. Games are an excellent way to get people interested in art, coding, and design principals. This collaborative method of making and sharing mini-games is an excellent way for people to begin their exploration of games, art, and code.

Collaboration is another well done element of this project. There is a focus on working and learning together so that a greater thing can be made. Each mini game may only be a couple minutes long, but in total, this project could create hours and hours of entertaining content for people to make and share.

Austin Garcia – Looking Outwards 10 – Section C

While still not entirely sure what sound art could be defined as, I was looking around online and found this piece by Jana Winderen called “Out of Range”. This piece was created by using a variety of different, specialized microphones and hydrophones to capture sounds of various animals that are out of the range of human hearing. From the echolocation of bats to the communications of whales and dolphins, this audio ensemble combines all these inaudible noises and brings them to our ears. The result is a suite of natural sounds that seem familiar but are truly unique.

I am still not 100% sure what could be considered sound art and what could not. However, I do certainly believe that this piece ought to be classified as sound art due to the grace in its composition but also its reason for existing. To bring these sounds to human ears in such a way is truly an artistic feat.

Link

Austin Garcia – Project 10 – Group C

sketch

/*  Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project 10
*/
//I decided to take some old code from a lab that I bugged out on accident
// and use it as a visually interesting way to generate random y VALS
// PLEASE CLICK ON CANVAS AND DRAG mouseX

var balls = [200]
var ball = {
  x: balls,
  y: 0,
  speed: 0,
  display: function() {
  fill(255); ellipse(this.x, this.y, 20, 20);
},
  move: function() {
    this.y = this.y + this.speed;
    this.speed = this.speed + gravity;
},
  bounce: function() {
    if (this.y > height - 11) {
      this.speed = this.speed * -1;
    }
  }
};

var xarray = []
var yarray = []
var size = 0;


var gravity = 0.1;



function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 700);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.TriOsc();
    osc.freq(500);
    osc.amp(.1);
    osc.start();

    osc1 = new p5.TriOsc();
    osc1.freq(200);
    osc1.amp(.1);
    osc1.start();

    frameRate(10)
}


function draw() {
    // you can replace any of this with your own code:
    background(200);
    fill("yellow");
    size = 1

    //draw circle
    for (var i = 0; i < xarray.length; i += 1) {
        ellipse(xarray[i], yarray[i], size, size)
        size += 1
        if (size > 20) {
          size = 1
        }
        yarray.push(random(10, height - 10));
        osc1.freq(yarray[i])


    }

    if (xarray.length > 5 || yarray.length > 5) {
        xarray.shift();
        yarray.shift();
    }
    //draw line
    stroke("orange");
    strokeWeight(4);
    for (var i = 0; i <= xarray.length; i += 1) {
        //for (var n = 0; n <= yarray.length; n += 1){}     ADD THIS IN FOR A COOL EFFECT (DONT FORGET TO CHANGE Y VALS)
            line (xarray[i], yarray[i], xarray[i+1], yarray[i+1]);

        }

    ball.display();
    ball.move();
    ball.bounce();

    osc.freq(-ball.y);
    osc.amp();


}




function mouseDragged() {
    xarray.push(mouseX);
    yarray.push(mouseY);

}

function mousePressed() {
    xarray = []
    yarray = []


}

I lowered the frame rate to give the randomness less of an oppressive sound. I kept the gradual rise and fall of the sphere in the center as a constant element amidst the randomness.

Austin Garcia – Looking Outwards 09 – Section C

I decided to look at Claire Yoon’s Looking Outwards 03. As someone who knows very little about fashion, I was interested in looking into this article on how 3d printing and computer generated forms could become clothing. Personally, high fashion has seemed like a far off community that I had very few intersecting interests with. This project though, and this idea that a piece of clothing could be created by someone in CAD software or even by an algorithm and printed by a computer presents incredibly interesting possibilities for the future of clothing and fashion.

In regards to this particular piece, I find the forms to be neat. They have a geometric yet also organic sense to them, and a complexity that I imagine would be facilitated by the computer design process.

Austin Garcia – Project 09 – Section C

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Assignment or Project
*/

var originalImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    originalImage.loadPixels();
    frameRate(1000);
}

function draw() {
    var px = random(width); //x coordinate
    var py = random(height); //y coordinate
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var locationColor = originalImage.get(ix, iy); //get pixel color


    var rectSizeX = random(10, 50)
    var rectSizeY = 2

    noStroke();
    fill(locationColor);
    rect(px, py, rectSizeX, rectSizeY);

    var theColorAtTheMouse = originalImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 1, 2*height + mouseY);
}

I wanted to explore vertical and horizontal lines converging to create this image my girlfriend took of me over the summer. I had the code generate short horizontal bars while having the mouse draw long vertical bars.

Austin Garcia – Project 07 – Section C


sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project 07
*/
var pointsN = 100;

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

function draw() {
    background(0);
    stroke(mouseX / 2, mouseY / 2, 0);
    noFill();

    //map to mouse
    strokeWeight(.5);
    push();
    var xMouse = mouseX;
    var yMouse = mouseY;
    translate(xMouse, yMouse);
    drawHypocycloid();
    pop();

  }

function drawHypocycloid() {
  //set variables
  var x;
  var y;
  var mX = map(mouseX, 0, width, 0, width / 2);
  var mY = map(mouseY, 0, height, 0, height / 2);

  //draw lines
  beginShape();
  for (var i = 0; i < pointsN; i++) {
      var m = map(i, 0, pointsN, 0 ,PI / 2);
      vx = (mX - mY) * cos(m) - mX * cos((mX - mY) * m);
      vy = (mX - mY) * sin(m) - mX * sin((mX - mY) * m);
      vertex(vx, vy);
  }
  endShape();
}