/* Chelsea Fan and Katrina Hu
Section 1B and Section 1C
chelseaf@andrew.cmu.edu and kfh@andrew.cmu.edu
Project-15
*/
//important variables
var killCount = 0;
var score = 0;
var yCoord = 0;
var snow = [];
var bear = [];
var c1;
var c2;
function setup() {
createCanvas(600, 480);
frameRate(60);
//initial collection of bears
for (i = 0; i < 1; i++) {
var bearY = -40;
bear[i] = makeBear(bearY);
}
//setting color of background
c1 = color(106, 197, 252);
c2 = color(126, 127, 207);
//initial collection of snows
for (i = 0; i < 60; i++) {
var snowx = random(width);
var snowy = random(0, height);
snow[i] = makeSnow(snowx, snowy);
}
}
function draw() {
setGradient(c1, c2);
///////// BY CHELSEA
//draw Sun
noStroke();
fill(255, 252, 227, 120);
ellipse(80, 250, 85, 85);
fill(255, 246, 179, 140);
ellipse(80, 250, 70, 70);
fill(255, 238, 112, 200);
ellipse(80, 250, 50, 50);
//draw background
drawMountains2();
drawMountains();
//bears
updateBear();
removeBearFromView();
addBear();
drawKill();
//more scenery things
drawWater();
drawIce();
snows();
//end of game
endGame();
}
///////// BY KATRINA
function drawKill() {
//printing score and number of bears killed
fill(255);
textSize(20);
textAlign(RIGHT);
noStroke();
text("Kill Count = " + killCount, width - 70, 50);
text("Score = " + score, width - 70, 75);
}
///////// BY CHELSEA
function endGame() {
//end screen if five bears killed
//and restart game button
if(killCount == 5) {
textSize(50);
fill(255);
textAlign(CENTER);
text("GAME OVER", width/2, height/2-100);
for (var i = 0; i < bear.length; i++) {
bear[i].speed = 0;
}
textSize(25);
fill(255, 150);
noStroke();
rect(width/2 - 80, height/2 - 40, 160, 60);
fill(50);
text("RESTART", width/2, height/2);
}
}
///////// BY KATRINA
function mouseClicked() {
//if restart button clicked, reset game
if(killCount == 5) {
if (mouseX > 220 & mouseX < 380 && mouseY > 200 && mouseY < 260) {
bear = [];
killCount = 0;
score = 0;
for (var i = 0; i < bear.length; i++) {
bear[i].speed = 2;
}
}
}
}
///////// BY KATRINA
function setGradient(c1, c2) {
//gradient color sky background
noFill();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}
///////// BY CHELSEA
function drawWater() {
//water color and transparency
fill(0, 107, 214, 100);
noStroke();
//water level
rect(0, height - (96 * killCount) - 20, width, height + 30)
}
///////// BY KATRINA
function drawIce() {
fill(245, 68, 59);
rect(mouseX + 8, height - (96 * killCount) - 100, 55, 30); //sign
textSize(10);
textFont('Georgia');
fill(255);
rect(mouseX + 8, height - (96 * killCount) - 100, 8, 75); //pole
text('NORTH', mouseX + 55, height - (96 * killCount) - 90); //words
text('POLE', mouseX + 50, height - (96 * killCount) - 75);
fill(162, 232, 250)
rect(mouseX, height - (96 * killCount) - 15, 100, 4); //ice
fill(255);
rect(mouseX, height - (96 * killCount) - 25, 100, 10); //ice
fill(245, 68, 59);
for(lines = 0; lines < 4; lines++) { //stripes
rect(mouseX + 8, height - (96 * killCount) - lines * 20 - 33, 8, 7);
}
fill(255, 242, 145);
ellipse(mouseX + 12, height - (96 * killCount) - 106, 15, 15) //top of pole
}
///////// BY CHELSEA
function drawSnow() {
noStroke();
fill(255, 255, 255, 170); ///snow color and transparency
push();
translate(this.x2, this.y2); //draw snow at x2, y2
ellipse(10, 10, 5, 5); //snow shape
pop();
}
///////// BY CHELSEA
function makeSnow(xlocation, ylocation) {
//snow object
var makeS = {x2: xlocation,
y2: ylocation,
snowx: random(0, width),
snowy: 0,
speed: random(1, 2),
move: moveSnow,
draw: drawSnow}
return makeS;
}
///////// BY CHELSEA
function moveSnow() {
this.y2 += this.speed; //speed of snow moving
if (this.y2 >= height - (96 * killCount) - 30) { //restart snow on top
this.y2 -= height;
}
}
///////// BY CHELSEA
function snows() {
//move and draw all individual snows
for(i = 0; i < snow.length; i++) {
snow[i].move();
snow[i].draw();
}
}
///////// BY CHELSEA
function drawMountains(){
noStroke();
fill(192, 200, 207); //mountain color
beginShape();
for (i = 0; i < width; i++) {
var mountainSpeed = .0005; //speed of mountains moving
var mountainDetail = 0.009; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 1.2, height/2, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
///////// BY CHELSEA
function drawMountains2(){
noStroke();
fill(245); //mountain color
beginShape();
for (i = 0; i < width; i++) {
var mountainSpeed = .0003; //speed of mountains moving
var mountainDetail = 0.007; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 2, height/2, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
///////// BY KATRINA
function updateBear() {
//move and draw all individual bears
for (var i = 0; i < bear.length; i++) {
bear[i].move();
bear[i].display();
}
}
///////// BY KATRINA
function removeBearFromView() {
//if bear lands on ice, delete bear
for(var i = 0; i < bear.length; i++) {
if (bear[i].x > mouseX & bear[i].x < mouseX + 100 && (bear[i].y > height - (96 * killCount) - 50 && bear[i].y < height - (96 * killCount) - 40)) {
bear.splice(i, 1);
score += 1;
}
//if bear leaves screen, remove from array
else if (bear[i].y > height + 40) {
bear.splice(i, 1);
killCount += 1;
}
}
}
///////// BY KATRINA
function makeBear(startY) {
//bear object
var myBear = {x: random(30, 570),
y: startY,
speed: 2,
move: bearMove,
display: bearDisplay}
return myBear;
}
///////// BY KATRINA
function bearMove() {
//to move bear
this.y += this.speed;
}
///////// BY KATRINA
function bearDisplay() {
//drawing bear shape
noStroke();
fill(255);
ellipse(this.x, this.y, 43, 60); //body
ellipse(this.x + 14, this.y + 25, 12, 20); //right leg
ellipse(this.x - 14, this.y + 25, 12, 20); //left leg
ellipse(this.x, this.y - 30, 27, 32); //head
ellipse(this.x + 9, this.y - 42, 8, 8); //right ear
ellipse(this.x - 9, this.y - 42, 8, 8); //left ear
fill(240);
ellipse(this.x, this.y, 30, 36); //body
fill(210);
ellipse(this.x + 9, this.y - 42, 5, 5); //right inner ear
ellipse(this.x - 9, this.y - 42, 5, 5); //left inner ear
ellipse(this.x, this.y - 31, 9, 9); //snout
fill(0);
ellipse(this.x + 5, this.y - 37, 4, 4); //right eye
ellipse(this.x - 5, this.y - 37, 4, 4); //left eye
ellipse(this.x, this.y - 32, 6, 3); //nose
fill(255);
ellipse(this.x + 5.5, this.y - 35.5, 2, 2); //right inner eye
ellipse(this.x - 5.5, this.y - 35.5, 2, 2); //left inner eye
stroke(0);
line(this.x, this.y - 32, this.x1, this.y - 29) //line from nose
}
///////// BY KATRINA
function addBear() {
//add new bears to array with small probability
var newBearProb = 0.005;
if(random(0,1) < newBearProb) {
bear.push(makeBear(-40));
}
}
Instructions: Move the ice block with mouse to catch the falling bears. If you miss the bears, they will drown and the water level rises. If you miss 5 bears, the game ends. Press Restart to play again!
This was a fun project to make. Collaborating together was very helpful as we could learn from each other’s mistakes. However, it is difficult to code on two computers. We really enjoyed this experience and hope you enjoy the game!
]]>I will be collaborating with Katrina Hu. Together, we will create and interactive game with polar bears falling from the sky. The user will have to catch the polar bears on a slide-able block of ice at the bottom of the screen. If the user catches the polar bears with the ice block, a positive tone will ring. If they miss the polar bear, the bear will fall into the water below and “drown”. From there, the program will play a negative sound and the death count in the corner will increase.
There will be two types of polar bears – A big polar bear and a small polar bear. The small polar bear will fall slightly faster than the big polar bear, thus meaning they will be harder to catch.
As the death number increases, the background color will turn more dreary – meant to signify the number of polar bear deaths due to the climate crisis. And the dreary background is meant to show in increasing climate crisis.
Polli is an environmental artist who focuses on the intersection of art, science and technology. She has done work in public artworks, media installations, community projects, performances, broadcasts, mobile and geolocative media, publications, and through the curation and organization of public exhibitions and events. Currently, She creates artworks designed to raise awareness of environmental issues. I admire that she focuses on work that is beautiful, yet also has a purpose. Similar to my idea for the Final Project, I would also like to use my project to raise awareness to climate crisis environmental issues.
Link to Andrea Polli’s Projects: https://sites.google.com/andreapolli.com/main/projects?authuser=0
Washko on the other hand, is a game artist and designer. She is actually a professor at CMU School of Art. I admire her artwork because it seems edgy and new. Some of her video games explore difficult topics. For example, the feminist game The Game: The Game explores the topics of consent and politics. Similar to my idea for the Final Project, I would like to create an interactive game.
Link to Angela Washko’s Projects: https://angelawashko.com/section/138507.html
Molmol documents stories through media, moving images, robotics, kinetics and interactive sculptures. Molmol received an M.P.S at the Interactive Telecommunications Program, NYU and a B.A. at Communication Arts in Taiwan. She also spent a year interviewing an isolated leprosy community in Taiwan. She recently has been focusing on producing media work to create social impacts. For example, she create a film on homelessness, youth, and social justice called Treasure Hill.
Looking at her Treasure Hill film, I really admire that she is creating interesting films not just for art, but for a cause. I really admire this because her films touch important topics that are difficult for people to talk about. Because of this, it can bring more awareness to these issues.
Molmol’s projects do not involve the creation of a custom software.
/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-11
*/
//important variables
var fish = [];
var star = [];
function setup() {
createCanvas(480, 480);
frameRate(20);
//initial collection of fish
for (i = 0; i < 30; i++) {
var fishx = random(width);
var fishy = random(300, height);
fish[i] = makeFish(fishx, fishy);
}
//initial collection of stars
for (i = 0; i < 10; i++) {
var starx = random(width);
var stary = random(0, 100);
star[i] = makeStar(starx, stary);
}
}
function draw() {
//black background
background(0);
//draw mountains, water, bed, fish, stars, and moon
drawMountains();
drawWater();
drawBed();
fishies();
stars();
drawMoon();
}
function drawBed() {
stroke(0); //black outline
fill(255, 254, 242); //bed color
rect((width/2)-30, (height/2)-10, 150, 40); //bed shape
fill(255); //pillow color
ellipse(width/2+105, height/2-14, 30, 10); //pillow shape
fill(255, 243, 222); //head color
ellipse(width/2+100, height/2-25, 20, 20); //head shape
noStroke(); //no outline for neck
ellipse(width/2+83, height/2-20, 20, 5); //neck shape
stroke(0); //black outline
fill(203, 202, 204); //blanket color
ellipse(width/2+30, height/2-10, 120, 40); //blanket shape
}
function drawWater() {
fill(66, 112, 128); //blue water color
rect(0, height/2, width, height); //fill bottom half of canvas
}
function drawFish() {
noStroke(); //no outline
fill(255, 160, 122); //orange fish color
push();
translate(this.x1, this.y1); //locate fish at x1, y1
ellipse(10, 10, 10, 5); //fish body
triangle(10, 10, 5, 5, 5, 15); //fish tail
pop();
}
function makeFish(xlocation, ylocation) {
var makeF = {x1: xlocation,
y1: ylocation,
fishx: random(0, width),
fishy: random(300, height),
speed: -3.0,
move: moveFish,
draw: drawFish}
return makeF;
}
function moveFish() {
this.x1 += this.speed; //speed of fish moving
if (this.x1<=-10) { //restart fish at width after it disappears on left
this.x1 += width;
}
}
function fishies() {
for(i=0; i<fish.length; i++) {
fish[i].move();
fish[i].draw();
}
}
function drawStar() {
noStroke();
fill(255, 251, 0); //yellow color
push();
translate(this.x2, this.y2); //draw stars at x2, y2
ellipse(10, 10, 5, 5); //star shape
pop();
}
function makeStar(xlocation, ylocation) {
var makeS = {x2: xlocation,
y2: ylocation,
starx: random(0, width),
stary: random(0, 100),
speed: -3.0,
move: moveStar,
draw: drawStar}
return makeS;
}
function moveStar() {
this.x2 += this.speed; //speed of stars moving
if (this.x2<=-10) { //restart stars on right if it leaves canvas
this.x2 += width;
}
}
function stars() {
for(i=0; i<star.length; i++) {
star[i].move();
star[i].draw();
}
}
function drawMoon(){
fill(255, 253, 184); //yellow moon color
ellipse(400, 50, 50, 50); //moon shape
}
function drawMountains(){
noStroke();
fill(43, 43, 36); //dark gray mountain color
beginShape();
for (i=0; i<width; i++) {
var mountainSpeed = .0007; //speed of mountains moving
var mountainDetail = 0.02; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 1.8, height/8, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
This process took me a long time. I spent a while thinking about what I wanted to draw and I decided on a Parent Trap theme with a bed floating in the ocean. The stars, moon, mountains, and fish are meant to resemble an ocean view at night. I had some difficulty making my own object, but once I got the hang of it, it was pretty fun.
/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-10
*/
//important variables
var myWind;
var myOcean;
var myBirds;
var mySands;
function preload() {
//load ocean image
var myImage = "https://i.imgur.com/cvlqecN.png"
currentImage = loadImage(myImage);
currentImage.loadPixels();
//loading sounds
//sound of wind
myWind = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/winds.wav");
myWind.setVolume(0.1);
//sound of ocean
myOcean = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/oceans.wav");
myOcean.setVolume(0.1);
//sound of birds
myBirds = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/birds.wav");
myBirds.setVolume(0.1);
//sound of sand
mySand = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sand.wav");
mySand.setVolume(0.1);
//birds https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/birds.wav
//oceans https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/oceans.wav
//sands https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sand.wav
//winds https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/winds.wav
}
function soundSetup() { // setup for audio generation
}
function setup() {
createCanvas(480, 480);
}
function sandDraw() {
noStroke();
//sand background color
fill(255, 204, 153);
rect(0, height-height/4, width, height/4);
//sand movement
for (i=0; i<1000; i++) {
var sandX = random(0, width);
var sandY = random(height-height/4, height);
fill(255, 191, 128);
ellipse(sandX, sandY, 5, 5);
}
}
var x = 0;
var cloudmove = 1;
function skyDraw() {
noStroke();
//sky color
fill(179, 236, 255);
rect(0, 0, width, height/2);
//cloud color
fill(255);
//cloud move
x = x + cloudmove;
if(x>=width+100){
x = 0;
}
//cloud parts and drawing multiple clouds in sky section
for (i=0; i<=4; i++) {
push();
translate(-200*i, 0);
ellipse(x + 10, height / 6, 50, 50);
ellipse(x + 50, height / 6 + 5, 50, 50);
ellipse(x + 90, height / 6, 50, 40);
ellipse(x + 30, height / 6 - 20, 40, 40);
ellipse(x + 70, height / 6 - 20, 40, 35);
pop();
}
}
function birdDraw() {
noFill();
stroke(0);
strokeWeight(3);
//Birds and their random coordinates (not randomized
//because I chose coordinates for aesthetic reasons)
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
push();
translate(-110, 0);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(-100, 80);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(-30, 40);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(70, 50);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(100, 100);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(150, 25);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(200, 75);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
push();
translate(250, 13);
curve(100, 150, 120, 120, 140, 120, 160, 140);
curve(120, 140, 140, 120, 160, 120, 180, 150);
pop();
}
function draw() {
//draw sand
sandDraw();
//draw ocean
image(currentImage, 0, height/2);
//draw sky
skyDraw();
//draw birds
birdDraw();
//implement sound when mouse is pressed
mousePressed();
}
function mousePressed() {
//if mouse is in section of canvas where clouds are
if (mouseIsPressed & mouseY>=0 && mouseY<=height/4) {
//sound of wind
myWind.play();
}
//if mouse is in section of canvas where birds are
if (mouseIsPressed & mouseY>height/4 && mouseY<=height/2) {
//sound of birds
myBirds.play();
}
//if mouse is in section of canvas where ocean is
if (mouseIsPressed & mouseY>height/2 && mouseY<=3*height/4) {
//sound of waves
myOcean.play();
}
//if mouse is in section of canvas where sand is
if (mouseIsPressed & mouseY>3*height/4 && mouseY<=height) {
//sound of sand
mySand.play();
}
}
My code has four different sounds (sounds of wind, birds, waves, and sand). Each is enabled by clicking on the respective quarter of the canvas. For example, the wind sound is enabled by clicking the top layer where the clouds are located.
This took me a very long time because I couldn’t get the sounds to work. But, the idea of having an ocean landscape with different sounds came quickly to me.
]]>Kraftwerk, an electronic band, created a The Robots electronic music performance in 2009. Kraftwerk was established by classical musicians who wanted to mix sound, feedback and rhythm to create music.
The video depicts electronic music with robots on stage moving along in set patterns to the music. I admire that it has a “concert” feel despite not having a singer. The performance includes music, lights, a stage, and people. Although I do wish that the robots moved to the beat of the music or maybe at a faster pace. The slow movements of the robots don’t match the upbeat fast-paced music.
I don’t know anything about the algorithms about how the work was generated. I also don’t want to suppose anything because I really have no clue and it would be wrong to generalize and guess based on no knowledge.
I chose a portrait of my friend Katrina. I spent a long time deciding how to create the portrait and I eventually decided on drawing squares in a continuous and slightly randomized line.
/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-09
*/
//important variables
var hiddenImage;
var xCoord = 200;
var yCoord = 200;
//Speed variables
var xOff = 5;
var yOff = 5;
function preload() {
//preload image
var myImage = "https://i.imgur.com/mBLofJe.png"
hiddenImage = loadImage(myImage);
}
function setup() {
createCanvas(319, 360); //set canvas to image size
pixelDensity(1);
background(0); //black background
hiddenImage.loadPixels(); //load image
frameRate(50);
}
function draw() {
//get image coloring
var ix = constrain(floor(xCoord), 0, width);
var iy = constrain(floor(yCoord), 0, height);
var imageColor = hiddenImage.get(ix, iy);
//Bounce off right side
if (xCoord>=width || xCoord<=0){
xOff = -xOff;
yOff = random(-5, 5);
}
//Bounce off top and bottom
if (yCoord>=height || yCoord<=0){
yOff = -yOff;
xOff = random(-5, 5);
}
//Rectangle move
xCoord = xCoord + xOff;
yCoord = yCoord + yOff;
//Rectangle color
noStroke(); //no outline of rectangles
fill(imageColor); //fill based on hiddenImage coloring
rect(xCoord, yCoord, 5, 5); //draw rectangles
}
I looked at Claire Lee’s Looking Outward 07. It covers Stamen Design’s Cell Phone Coverage in the bay area. I agree with Claire in a lot of aspects of the work. The design is extremely interesting to look at and agree that the piece takes a mundane idea and turns it into something unique and artistic. I do wish that there was more explanation on how the piece is interactive. The post discusses that the piece covers 4 major cellular networks in the bay area, but it doesn’t mention which 4. I think this would also be good information to know. In addition, I wish there was some way to see what sections of the design correspond to which cellular network and maybe an image of all the carriers together on one map.
Although the original work is not linked, here is the link to Claire’s Looking Outward 07 Post: https://courses.ideate.cmu.edu/15-104/f2019/author/seoyounlandrew-cmu-edu/
Leah Buechley is a designer, engineer and educator. She is the developer of LilyPad Arduino Toolkit, smart textiles, and other soft circuit solutions. From 2009 to 2013, she was an associate professor at MIT Media Lab. There, she directed the High-Low Tech research group. Currently, she runs a design firm exploring the intersection of technology and design.
Buechley’s body of work embodies a new trend of “making.” I admire that she relates her work to “making,” a bigger idea of how building and”making” relates to the world. She discusses how “making” things defines who and what humans are. In addition, Buechley’s work is different from the normal artists we talk about. This talk doesn’t discuss her own gallery of art pieces. Instead, it discusses how she writes papers, gives talks, and seeks to educate others about everything she has done and learned. This talk is a great example of how she is using her knowledge to share her understanding of “making” and the world and the new trends we see through the connection of the two. In her talk, she discusses “who” is a maker and how they’re not representative of the actual population.
Buechley speaks comfortably and casually. Which helps makes the audience feel at ease. Rather than a monotone, she speaks with passion and emphasis on certain words, which helps engage the audience. She also uses hand gestures to show her involvement and enthusiasm in her talk. These are all good strategies that I can use to make my presentations less boring and un-engaging.