Week 15: Final Project

sketch
``````/*
15-104
FINAL PROJECT
*/

/*
COLLABORATORS:
NICHOLAS WONG
SECTION A
nwong1@andrew.cmu.edu

RACHEL KIM
SECTION C
rachelki@andrew.cmu.edu
*/

//Every function has a comment before it showing who did the majority of the code: Nick, Rachel, or both of us.
//For functions that we did together, specific blocks, statements, and expressions are commented to show who did them.

//Player properties
var gravity = 0.4;
var defaultSpeed = 2;
var jumpForce = 10;
var constantSpeed = 2;
var playerStartPos = 300;
var walkImage = [];

//Stage properties
var stagePos = 0;
var stageSpeed = 2;

//Game state properties
var points = 0;
var gameOver = false;
var startGame = false;

//Game object lists
var platforms = [];
var covids = [];

//Background object lists
var backgroundBuildings = [];
var backgroundObjects = [];
var clouds = [];

//Building images
var housesA;
var housesB;
var supermarket;

//Background images
var cloud;
var sky;
var ground;

//Misc Images
var lampPost;
var streetSign;
var covidImage;

// These URLs are for the individual walk cycle images,
var filenames = [];
filenames[0] = "https://i.imgur.com/URNRJvg.png";
filenames[1] = "https://i.imgur.com/dt8xXHQ.png";
filenames[2] = "https://i.imgur.com/jmhE5QQ.png";
filenames[3] = "https://i.imgur.com/twdsSdv.png";
filenames[4] = "https://i.imgur.com/HWf5XmA.png";
filenames[5] = "https://i.imgur.com/45onU9z.png";
filenames[6] = "https://i.imgur.com/ey2SDeI.png";
filenames[7] = "https://i.imgur.com/cG56PdF.png";
filenames[8] = "https://i.imgur.com/533xGwE.png";

for (var i = 0; i < filenames.length; i++)
{
}

//Background elements

//Further background elements

//Covid obstacles
}

//Setup Function - Both Rachel and Nick
function setup()
{
createCanvas(600, 400);
rectMode(CENTER);
textAlign(CENTER);
translate(width/2,height/2)

pl1 = new createPlayer(50,250,0); //Create a new player at (50,250) - Nick Wong

//Unless otherwise noted, everything within the dashed lines was done by Rachel Kim:
//---------------------------------------------------------------------------------------------------------

//Create buildings
for (let i = 0; i < 60; i++)
{
backgroundBuildings.push(createBuildings(500*i, 120, round(random(0,2))));
}

//Create street items
for (let i = 0; i < 100; i++)
{
backgroundObjects.push(createStreetItems(400*i, 335, round(random(0,1))))
}

//Create clouds
for(let i = 0; i < 50; i++)
{
clouds.push(createClouds(500*i, random(100,0), random(0,1)));
}

//Create platforms
for (let i = 0; i < 100; i++)
{
var colour = color(random(50,150),150,random(50,150));
platforms.push(createPlatform(100*i + 300, random(100,290), random(50,120), random(20,15), colour));
}

//Create covid obstacles
for (let i = 0; i < 100; i++)
{
covids.push(createCovid(random(350,750)*i + 800, random(150,275)));
}

//-----------------------------------------------------------------------------------------------------------
// ***Note***
// The reason why we are not procedurally generating objects on the fly
// as the screen scrolls and instead instantiating everything in setup
// is because it messes with collision detection sometimes.
}

//Main update function - Both Rachel And Nick
function draw()
{
//Background sky and ground - Rachel Kim
image(sky, 0, 0, width, height)
image(ground, 0 , 240, width, height/2);

//Point calculation and display - Nick Wong
points = round(-stagePos/10);
textSize(14);
text("Points: " + points.toString(), 35,25);

//Unless otherwise noted, everything within the dashed lines was done by Nick Wong:
//------------------------------------------------------------------------------------------------------------
if(!gameOver & startGame)
{
push();
stagePos -= defaultSpeed; //Set scroll speed to default speed
translate(stagePos + playerStartPos,0); //Translate entire canvas by scroll speed

drawBackground(); //Draw background - by Rachel Kim

pl1.update(); //Update player
pl1.display(); //Update player display

//Update canvas display
for(let i = 0; i < platforms.length; i++)
{
platforms[i].display();
}

//Update covid obstacle display
for(let i = 0; i < covids.length; i++)
{
covids[i].display();
}
pop();

//Increase scroll and movement speed if total points is a multiple of 300
if(points % 300 == 0 & points > 0)
{
defaultSpeed += 0.5;
constantSpeed += 0.5;
}
}
//---------------------------------------------------------------------------------------------------------------
//Game over screen - Rachel Kim
else if(gameOver)
{
push();
translate(width/2, height/2);
textSize(32);
fill(0);
text("Game Over!", 10,0);
textSize(18);
text("You scored " + points.toString() + " points!", 10,30);
text("Press [Space] to restart");
pop();
}
//Start game screen (only shows up once) - Nick Wong
else if(!startGame)
{
push();
translate(width/2, height/2);
textSize(32);
fill(0);
text("Press [Space] to Start", 10,0);
pop();
}

}

//Draw background elements - Rachel Kim
function drawBackground()
{
//Loop through and draw clouds
for (let i = 0; i < clouds.length; i++)
{
clouds[i].display();
clouds[i].update();
}
//Loop through and draw buildings
for (let i = 0; i < backgroundBuildings.length; i++)
{
backgroundBuildings[i].display();
}
//Loop through and draw signs and lamps
for (let i = 0; i< backgroundObjects.length; i++)
{
backgroundObjects[i].display();
}

//Draw ground
push();
fill(141,156,141);
noStroke();
rectMode(CORNERS);
rect(-width, height - 100, width*100, height);
pop();
}

//Animate player character - Rachel Kim
function drawPlayer() //Loop through walk images
{
//Loop through at 1/5 speed
if (frameCount % 5 == 0)
{
this.index++
}

//Reset image when it reaches end of list
if(this.index >= 7)
{
this.index = 0;
}

image(walkImage[this.index],this.x,this.y - this.height/2,this.width,this.height)
}

//Update player - Both Rachel and Nick
function updatePlayer()
{
//Game over if player falls off stage - By Rachel Kim
if(this.x <= -stagePos - playerStartPos)
{
gameOver = true;
}

//Game over if player touches a covid particle - By Nick Wong
for(let i = 0; i < covids.length; i++)
{
if(this.x + this.width/2 >= covids[i].x - covids[i].width/2 & this.x - this.width/2 <= covids[i].x + covids[i].width/2 &&
this.y + this.height/2 >= covids[i].y - covids[i].height/2 && this.y - this.height/2 <= covids[i].y + covids[i].height/2)
{
gameOver = true;
}
}

//Unless otherwise noted, everything within the dashed lines was done by Nick Wong:
//-------------------------------------------------------------------------------------------------------------------------------------------

this.y += this.dy; // Add y velocity to y position

//Check if player is on ground (not platforms)
if(this.y > height - 100 - this.height/2)
{
//Set y velocity to 0 and y position to top of ground rect
this.dy = 0;
this.y = height - 100 - this.height/2;
this.grounded = true;
}
else
{
this.grounded = false;
}

//Calculate x speed
let previousLoc = this.x //Store previous x position
let currentLoc = this.x //Store current x position
this.dx = currentLoc - previousLoc; //The difference between previous and current is dx

//Check platform collisions (still a bit buggy)
for(let i = 0; i < platforms.length; i++)
{
//Check boundary of player is colliding with boundary of platform
if(this.x + this.width/2 >= platforms[i].x - platforms[i].w/2 & this.x - this.width/2 <= platforms[i].x + platforms[i].w/2)
{

//Check boundary of player is colliding with boundary of platform
if(this.y + this.height/2 > platforms[i].y - platforms[i].h/2 && this.y - this.height/2 < platforms[i].y + platforms[i].h/2)
{
//Check if colliding with side of platform
if(this.dx > 0 && this.dy == 0)
{
constantSpeed = 0;
}

//Check if below platform
if(this.dy < 0) //If player is traveling up, player touch bottom of platform
{
if(this.y - this.height/2 > platforms[i].y)
{
this.y = platforms[i].y + platforms[i].h/2 + this.height/2 + 2; //Set position to bottom of platform
this.dy = 0 //Y speed to 0
}

}
//Check if on top of platform
if(this.dy > 0) //If player is traveling down, player touch top of platform
{
if(this.y + this.height/2 < platforms[i].y)
{
this.y = platforms[i].y - platforms[i].h/2 - this.height/2 + 2; //Set position to top of platform
this.dy = 0; //Set Y speed to 0
this.onPlatform = true; //On platform is true (can jump)

}

}

}
else
{
this.onPlatform = false //On platform is not true if not colliding
constantSpeed = defaultSpeed; //Set player speed to default
}

}
}
//-------------------------------------------------------------------------------------------------------------------------------------------
}

//Create player - Nick Wong
function createPlayer(px,py,pdy)
{
var player = {x: px, y: py, dx: 0, dy: pdy, width: 25, height:45, grounded: false, onPlatform: false, index: 0, display: drawPlayer, update: updatePlayer}

return player;
}

//Create platform - Nick Wong
function createPlatform(px,py,pw,ph,colour)
{
var platform = {x: px, y: py, w: pw, h: ph, colour: colour, display: drawPlatform}

return platform;
}

//Draw platform - Nick Wong
function drawPlatform()
{
push();
noStroke();
fill(this.colour);
rectMode(CENTER);
rect(this.x, this.y, this.w, this.h);
pop();
}

//Create Covid obstacle - Nick Wong
function createCovid(cx, cy)
{
var cvd = {x: cx, y: cy, width: 20, height: 20, display: drawCovid}
return cvd;
}

//Create Covid obstacle - Nick Wong
function drawCovid(cx, cy)
{
push();
image(covidImage, this.x, this.y, this.width, this.height);
pop();
}

//Create buildings - Rachel Kim
function createBuildings(bx, by, i)
{
var bdg = {x: bx, y: by, index: i, display: drawBuilding}
return bdg;
}

//Render buildings - Rachel Kim
function drawBuilding()
{
var buildings = [housesA, housesB, supermarket]
image(buildings[this.index], this.x, this.y);
}

//Create lamps and signs - Rachel Kim
function createStreetItems(bx, by, i)
{
var items = {x: bx, y: by, index: i, display: drawStreetItems}
return items;
}

//Render lamps and signs - Rachel Kim
function drawStreetItems()
{
push();
scale(0.5,0.5); //Scale because too big
var streetItems = [streetSign,lampPost]
image(streetItems[this.index], this.x, this.y);
pop();
}

//Create clouds - Rachel Kim
function createClouds(bx, by, s)
{
var cld = {x: bx, y: by, speed: s, display: drawCloud, update: updateCloud}
return cld
}

//Render clouds - Rachel Kim
function drawCloud()
{
image(cloud, this.x, this.y);
}

//Add speed to clouds - Nick Wong
function updateCloud()
{
this.x -= this.speed;
}

//Reset game by setting all values and lists to default - Nick Wong
function resetGame()
{
covids = [];
platforms = [];
clouds = [];
backgroundBuildings = [];
streetItems = [];
stagePos = 0;
defaultSpeed = 2;
constantSpeed = 2;
setup();
startGame = true;
gameOver = false;
}

//Spacebar input - Both Rachel and Nick
function keyPressed()
{
//Spacebar is pressed
if(keyIsDown(32))
{
//Check if not in air - Nick Wong
if(pl1.grounded || pl1.onPlatform)
{
pl1.dy -= jumpForce; //Jump if player is not in the air
}

//Reset game if game over - Rachel Kim
if(gameOver)
{
resetGame();
}

//Start game if first time opening - Rachel Kim
if(!startGame)
{
resetGame();
}

}
}

``````

For the final project, we wanted to create a side-scrolling game that related to Covid-19. In order to start the game, the only thing that the user needs to do is press the space bar in order for the player to jump. This type of game presents a screen that continuously scrolls while the player jumps to avoid obstacles. Two obstacles that the player faces are Covid-19 particles and platforms. The more obstacles the player overcomes, the speed of the game also increases as well. Once the player fails to avoid the Covid-19 particles or overcome the platforms, the player loses the game, and the “Game Over” screen would show up. In order to restart the game, the user would have to press the space bar. Overall, we both thought it would be fun to create a side-scrolling game for the final project of this course.

Throughout the process of this project, we faced a few challenges such as dynamic collision detection and graphical elements. Therefore, with time constraints, we were not able to play-test the game as much as we wanted to. Although there are a couple of flaws to the game, we had fun being able to create a side-scrolling game with colorful visuals. If we had more time, we would have refined the dynamic collision detection system, added in a more specific algorithm for creating obstacles and platforms, and fix the colors of the graphical elements. Additionally, we would also think about incorporating power-ups (masks, hand sanitizer, etc.) and sound as well.

Project 11: Landscape Story

sketch – Copy
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 11

//global variables
var fish = [];

//background variables
var mountainShapeA= 0.035;
var mountainSpeedA = 0.0009;

var mountainShapeB = 0.0175;
var mountainSpeedB = 0.0005;

var waterShape = 0.003;
var waterSpeed = 0.00005;

function setup() {

createCanvas(480, 480);
frameRate(10);

//number of fish
for (var j = 0; j < 30; j++) {

fishX = random(width);
fishY = random(350, 450);
fish[j] = makeFish(fishX, fishY);

}

}

function draw(){

background(255, 225, 225);
sun();
mountainB();
mountainA();
boatPeople();
water();
drawFishies();

}

//LANDSCAPE BKGD ---MOUNTAINS, SUN, WATER
function mountainA(){
noStroke();
fill(255, 241, 224);
beginShape();

for (var i = 0; i < width; i ++){
var x = (i * mountainShapeA) + (millis() * mountainSpeedA);
var y = map(noise(x), 0, 1.2, 150, 250);
vertex(i, y);
}

vertex(width, height);
vertex(0, height);
endShape();
}

function mountainB(){
noStroke();
fill(255, 251, 240);
beginShape();

for (var i = 0; i < width; i ++){
var x = (i * mountainShapeB) + (millis() * mountainSpeedB);
var y = map(noise(x), 0, 1.5, 50, 300);
vertex(i, y);
}

vertex(width, height);
vertex(0, height);
endShape();
}

function sun(){

noStroke();
fill(255, 210, 210);
ellipse(240, 180, 450, 450);
fill(255, 195, 195);
ellipse(240, 180, 400, 400);
fill(255, 187.5, 187.5);
ellipse(240, 180, 350, 350);
fill(255, 183, 183);
ellipse(240, 180, 300, 300);
fill(255, 175, 175);
ellipse(240, 180, 250, 250);
fill(255, 157, 157);
ellipse(240, 180, 200, 200);
fill(255, 135, 135);
ellipse(240, 180, 150, 150);
fill(255, 123, 123);
ellipse(240, 180, 100, 100);

}

function water(){

noStroke();
fill(255, 218, 203);
beginShape();

for (var i = 0; i < width; i ++){
var x = (i * waterShape) + (millis() * waterSpeed);
var y = map(noise(x), 0, 1.5, 320, 240);
vertex(i, y);
}

vertex(width, height);
vertex(0, height);
endShape();

noStroke();
fill(255, 228, 213);
beginShape();

for (var i = 0; i < width; i ++){
var x = (i * waterShape) + (millis() * waterSpeed);
var y = map(noise(x), 0, 1.5, 320, 250);
vertex(i, y);
}

vertex(width, height);
vertex(0, height);
endShape();
}

//TRAVELLERS
function boatPeople(){

noStroke();
fill(217, 154, 144);
ellipse(330,280, 5, 20);
ellipse(330, 270, 5, 5);
ellipse(300,280, 5, 20);
ellipse(300, 270, 5, 5);
ellipse(270,280, 5, 20);
ellipse(270, 270, 5, 5);
ellipse(250,280, 5, 20);
ellipse(250, 270, 5, 5);
ellipse(220,280, 5, 20);
ellipse(220, 270, 5, 5);
ellipse(200,280, 5, 20);
ellipse(200, 270, 5, 5);
ellipse(175,280, 5, 20);
ellipse(175, 270, 5, 5);

noStroke();
fill(239, 168, 158);
triangle(258, 250, 140, 250, 258, 100);
triangle(262, 250, 375, 250, 262, 100);

strokeWeight(1.5);
stroke(239, 168, 158);
line(260, 100, 260, 300);//flag pole

noStroke();
fill(239, 168, 158);//color of boat
arc(255,280, 200, 150, 0, PI); //boat
}

//FISH DETAILS
function drawFish() {
var tailLength = 7;

noStroke();
fill(this.fishColor);
ellipse(this.fx, this.fy, 12, 6);
triangle(this.fx + (tailLength / 2.5), this.fy, this.fx + tailLength, this.fy - 2, this.fx + tailLength, this.fy + 2);
}

function makeFish(fishX, fishY) {//fish as object

var fish = {
fishColor: color(random(150,200), 100, 110),
fishSpeed: random(-1, -10),
fishAction: fishMotion,
fx: fishX,
fy: fishY,
fishMaker: drawFish
}

return fish;
}

function fishMotion() { //movement of fish
this.fx += this.fishSpeed;
if (this.fx <= -20) {
this.fx += width;
}
}

function drawFishies() { //show onto canvas
for (i = 0; i < fish.length; i++) {
fish[i].fishAction();
fish[i].fishMaker();
}

}

``````

For this project, I wanted to focus on different aspects that are within a landscape. It was fun to see how many factors make up an environment. With the usage of different topics/functions we learn in labs, I was able to create mountains and water as well as a sea of fish. Lastly, a boat full of people were added to the landscape to show that it is a continuous journey.

Looking Outwards 11 : A Focus on Women Practitioners

Janet Echelman is an artist who creates sculptures at an architectural scale. Her work consists of Architecture, Urban Design, Sculpture, Material Science, Structural & Aeronautical Engineering, and Computer Science. Echelman’s work has also been presented or permanently showcased all around the world. Janet Echelman uses materials such as atomized water particles and engineered fibers. With those materials, she utilizes computational design software and “ancient” craft. The Bending Arc is a monumental sculpture located on St. Petersburg in Florida. It consists of 1,662,528 knots and 180 miles of twine. The sculpture is also 424 feet wide and 72 feet tall. This piece finds its form through the choreography of the wind. The top of the Bending Arc actually looks like a landscape design that has a pentagonal pattern. Echelman was inspired by historical postcards, hence the blue and white colors. Depending on the wind, the form of the sculpture constantly changes. This art piece certainly goes along with her statement of how her art transforms with wind and light, from being “an object you look at, into an experience you can get lost in.”

Project 10: Sonic Story

For this project, I reintroduce three characters from a cartoon TV show called We Bare Bears. With images I used online, I created a story of the three bears enjoying the company of each other. In the first scene, the Panda is alone and on his phone. Once Grizzly comes into the second scene, the music begins to play with birds chirping in the background. Then for the rest of the story, Ice (polar bear) also joins and has fun with the two other bears by taking selfies.

sketch – Copy
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 10

//NOTE
//when submitting to autolab use ideate links
//to test sounds on your own computer put in local server

//images
var grizzlyBearWave;
var grizzlyX1 = 600;
var grizzlyY1 = 200;

var polarBear;
var iceX1 = 600;
var iceY1 = 200;

var pandaBear;
var phonePanda;
var selfiePanda;

var tree;
var cloud;
var cloudX = 3.0;
var cloudX1 = 230;
var cloudY1 = 50;
var cloudX2 = 420;
var cloudY2 = 90;
var cloudX3 = 20;
var cloudY3 = 3;

var bird;
var birdX = 3.0;
var birdX1 = 200;
var birdY1 = 80;

//sounds
var morningTune;

//extra
var frameCount = 0;
var grizzlyWalking = true;
var iceGliding = true;

//images of characters

//images of extras

//sounds in story for submission

//sounds in story for self testing --- localserver
}

function setup() {
createCanvas(600, 420);
useSound();
frameRate(10);
}

function soundSetup() {
morningTune.setVolume(0.5);

}

function draw() {

frameCount++;

switch (frameCount) {
case 61: morningTune.play(); break; //to start playing song when panda is no longer alone
}

//story frames
//partA
if (frameCount >= 0 & frameCount < 60) {
pandaOnPhone();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

}

//partB
if (frameCount >= 60 & frameCount < 130) {
grizzlySaysHi();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

//grizzly says hi
if (grizzlyWalking) {
grizzlyX1 -= 5;
} else if (grizzlyX1 <= width/2 + 50) {
grizzlyWalking = false;
}

}

//partC
if (frameCount >= 130 & frameCount < 180) {
selfieTimeA();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

//movement of bird
if (birdX > width) {
birdX = 0;
}
}

//partD
if (frameCount >= 180 & frameCount < 240) {
iceBearStares();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

//movement of bird
if (birdX > width) {
birdX = 0;
}

}

//partE
if (frameCount >= 240 & frameCount < 410) {
iceBearJoins();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

//movement of bird
if (birdX > width) {
birdX = 0;
}

//ice bear joins by gliding
if (iceGliding) {
iceX1 -= 5;
} else if (iceX1 <= 200) {
iceGliding = false;
}

}

//partF
if (frameCount >= 410 & frameCount < 460) {
selfieTimeB();

//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}

//movement of bird
if (birdX > width) {
birdX = 0;
}

}

if (frameCount >= 460) {
background("black");
fill(255);
textSize(50);
textFont('Georgia');
text('The End', 300, 300);
}

}

//separate functions for each scene
//PART A
function pandaOnPhone() {
background(175, 206, 255);
sun();
grass();

clouds();

image(tree, 5, 5, 350, 350);

image(phonePanda, 150, 240, 150, 150);
}

//PART B
function grizzlySaysHi() {
background(175, 206, 255);
sun();
grass();

clouds();

image(tree, 5, 5, 350, 350);

image(pandaBear, 150, 200, 150, 230);
image(grizzlyBearWave, grizzlyX1, grizzlyY1, 150, 200);
}

//PART C
function selfieTimeA() {
background(175, 206, 255);
sun();
grass();

clouds();
birdie();

image(tree, 5, 5, 350, 350);

image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}

//PART D
function iceBearStares() {
background(175, 206, 255);
sun();
grass();

clouds();
birdie();

image(tree, 5, 5, 350, 350);

image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
image(iceBear, 550, 200, 85, 130);

}

//PART E
function iceBearJoins() {
background(175, 206, 255);
sun();
grass();

clouds();
birdie();

image(tree, 5, 5, 350, 350);

image(glidingIce, iceX1, iceY1, 170, 150);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}

//PART F
function selfieTimeB() {
background(175, 206, 255);
sun();
grass();

clouds();
birdie();

image(tree, 5, 5, 350, 350);

image(posingIce, 50, 200, 150, 200);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}

//EXTRA --- "background"
function sun() { //yellow circle in partA
strokeWeight(1);
stroke(0);
fill(255, 242, 147);
circle(500, 70, 80);
}

function grass() { //green rectangle in partA
strokeWeight(1);
stroke(0);
fill(133, 182, 57);
rect(0, 250, 600, 170);
}

function clouds() { //clouds in partA
image(cloud, cloudX1, cloudY1, 150, 80);
image(cloud, cloudX2, cloudY2, 150, 80);
image(cloud, cloudX3, cloudY3, 150, 80);
cloudX1 += cloudX; //speed of clouds
cloudX2 += cloudX;
cloudX3 += cloudX;
}

function birdie() { //bird in partA
image(bird, birdX1, birdY1, 150, 150);
birdX1 += birdX; //speed of bird
}

``````

Looking Outwards 10 : Computer Music

Charlie XCX, also known as Charlotte Emma Aitchison, is a professional singer, songwriter, music video director, and record producer. She was born in Cambridge and her music focuses on the musical styles of gothic pop, synth-pop, dance-pop, electropop, pop-punk, and alternative pop. During her early career, her music possessed a mix of darkness and witch-house styles. Most of her songs contain a technical or computational aspect to it and her work remains very consistent. I admire how consistent Charlie XCX has been with her musical styles. Her work presents a clear idea of how passionate and interested she is in computational music. Even in the music industry, technology seems to have a very powerful role. I am curious about what is to come in the future as technology continues to advance, and how that advancement would impact its role in many fields.

Looking Outwards 09

During week 8, the Looking Outwards assignment focused on the creative practice of an individual. As an architecture student, I am constantly interested in the different explorations that other people connect with the study of architecture. I came across the individual that my peer, Aadya Bhartia, wrote about in that week’s blog.

Meejin Yoon is the Dean of Architecture at Cornell University. She is also an architect and designer that focuses on the relationships between space, technology, and materiality. After watching her presentation from the Eyeo Festival, I really enjoyed the aspect of interaction within public spaces through responsive and interactive technology. Throughout her presentation, I appreciated the process of her design for her projects and also the connection she makes with technology as well. Overall, I do not have any disagreement with my classmate’s overview of the work of this individual. The relationship between design and technology is constantly evolving, and there is so much more to be explored and discovered.

Project 09 – Portrait

projectsketch
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 09

var friendJer; //variable name for original image
var sentence; //variable name for array of words

sentence = ["This", "is", "my", "friend", "Jeremy", "!!!"] //sentence explaining who the person is in the picture
}

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

noStroke();
background(0); //black background

friendJer.resize(480, 300); //image to fit canvas
imageMode(CENTER); //placing image @ center

frameRate(50); //speed of rendering

}

function draw() {

var sentX = random(friendJer.width); //random x-coordinates for words
var sentY = random(friendJer.height); //random y-coordinates for words

var ix = constrain(floor(sentX), 0, width);
var iy = constrain(floor(sentY), 0, height);

var xyColorLocation = friendJer.get(ix, iy); //color of original image @ xy location

textSize(12); //size of words
textFont('Georgia'); //type of font

if (sentY < 100) {
if (sentX < 150) {
fill(xyColorLocation);
text(sentence[0], sentX, sentY); //randomly placed "This"

} else if(sentX >= 150 & sentX < 200) {
fill(xyColorLocation);
text(sentence[1], sentX, sentY); //randomly placed "is"

} else {
fill(xyColorLocation);
text(sentence[2], sentX, sentY); //randomly placed "my"
}

} else if(sentY >= 100 & sentY < 350) {
if(sentX < 200) {
fill(xyColorLocation);
text(sentence[3], sentX, sentY); //randomly placed "friend"

} else if(sentX >= 200 & sentX < 480) {
fill(xyColorLocation);
text(sentence[4], sentX, sentY); //randomly placed "Jeremy"

} else {
fill(xyColorLocation);
text(sentence[5], sentX, sentY); //randomly placed "!!!"
}

}

}

``````

For this project, I wanted to use a portrait of my friend’s side profile. Because the code renders the original image into an abstract image, I used words to load the image. The words are a sentence that states, “This is my friend Jeremy”. That way, the viewer knows who the person is. Below, is the rendering process of the portrait.

Looking Outwards 08

The Eyeo Festival is an event that gathers the most creative technology community. This community includes artists, data designers, creative coders, AI & XR explorers, storytellers, researchers, technology, and platform developers. The Eyeo Festival allows this intersection of people to share their passion and inspirations. After browsing through each year, I was very interested in a particular speaker from the Eyeo Festival in 2019.

Refik Anadol is a media artist and director, who was originally from Istanbul, Turkey. In addition to what he does, Anadol is also a spatial thinker and he is fascinated by the ways of transformation within contemporary culture that require one to think of new aesthetic techniques and change within the perception of space. In other words, the media artist combines media arts and architecture. In his lecture, Refik Anadol also presents some of this own work, as well as work from his studio. The work that is produced begins to rethink the possibility of post-digital architecture future by redefining the functionalities of interior and exterior architectural formations. Refik Anadol’s work begins to suggest the possibility that all spaces and their facades have the ability to be used as an artists’ canvas. He asks, “What will happen if the surfaces have this kind of narrative quality, like jumping between different parts of Mars by letting the machine hallucinate. And to create a new meaning. It might not be purposeful but it can be impactful in a way.”

Overall, this lecture has been a very exciting and interesting experience that also makes me think about the possibilities that Refik Anadol suggests within spaces and the function of exterior and interior walls. The relationship between technology and art is constantly transforming and improving. This talk has actually been a reminder of the possibilities that occur within our society and environment through this particular relationship. It also makes me curious about what our world will be like later in time. What will architecture be with the new innovative technology in the next 10 years?

Project 07 : Curves

petal
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 07

//global variables
var numPoints = 800;

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

function draw() {

background(200); //dusty pink bkgrd color

for (var x = 40; x <= 480; x += 80) {	//number of "modules" (grid)
for (var y = 40; y <= 480; y += 80) {
push();
translate(x, y);
EpicycloidPedal();
pop();
}
}

for (var x = 80; x <= 460; x += 80) {	//number of "modules" (grid)
for (var y = 80; y <= 460; y += 80) {
push();
translate(x, y);
HypocycloidPedal();
pop();
}
}
}

function HypocycloidPedal() {

var a = map(mouseX, 0, 480, 0, 120);
var b = map(mouseX, 0, 480, 0, 60);

strokeWeight(mouseY/100, mouseX/350); //change in stroke thickness
stroke(158, 188, 254); //blue color
noFill();

//moduleShape
beginShape();
for (var i=0; i<numPoints; i++) {
var angle = map(i, 0, 180, 0, TWO_PI);
var n = 8; //number of pedals

//equations from mathworld
x = a * (((n-1) * cos(angle)) + (cos((n-1) * angle)) / n);
y = a * (((n-1) * sin(angle)) - (sin((n-1) * angle)) / n);

vertex(x, y);
}
endShape();
}

function EpicycloidPedal() {

var a = map(mouseX, 0, 480, 0, 160);
var b = map(mouseX, 0, 480, 0, 80);

strokeWeight(mouseX/80, mouseY/200); //change in stroke thickness
stroke(255, 242, 147); //yellow color
noFill();

//module shape
beginShape();
for (var i=0; i<numPoints; i++) {
var angle = map(i, 0, 100, 0, TWO_PI);

//equations from mathworld
x = ((1/2) * (a+(2*b))) * (cos(angle) - cos(((a+b)*angle) / b));
y = ((1/2) * (a+(2*b))) * (sin(angle) - sin(((a+b)*angle) / b));

vertex(x, y);
}
endShape();

}``````

After browsing through the Mathworld curves site, I wanted to explore the possibilities of the Hypocycloid pedal curve and the Epicycloid pedal curve under the roulettes category. Using different functions, I tried showing the different shapes each curve had the ability to make, through the manipulation of its radius and x and y coordinates. Above, there are screenshots of the different visuals depending on where the mouse is placed on the screen. I did not want to manipulate any change in the colors, because I want the user to focus on the different geometries.

Looking Outwards 07 : Computational Information Visualization

Rachel Binx is an American designer, data visualizer, and developer. She graduated from Santa Clara University and is currently the co-founder of Meshu and Gifpop. Meshu and Gifpop are companies that focus on creating visualizations from social data. One of her projects includes Healthy Los Angeles. This project’s purpose was to provide the residents of Los Angeles with a more interesting way to view information about neighborhoods. Combining creativity/art with data/numbers is a great way to grab the attention of the audience. It can also have the possibility of making information much easier to read and understand. The website itself is able to collect 100 health indicators while featuring two different views: a city-level view and a neighborhood view.