Author: dcmu

Project 15 – COVID Shooter Game

For this project, I was inspired by scrolling shooter games. These games were popular in arcades and on older gaming consoles. I used to play games like these a lot as a kid, so I was really looking forward to creating this. As COVID-19 is something that affected us all this year, I used this theme for my project. You move the ship around in this game by using the WASD keys and you shoot by using the spacebar. The goal is to shoot the coronavirus molecules that are coming at the ship. If you shoot enough, you’ll win the game and prevent the world from getting infected. If the ship gets hit too many times, you’ll lose the game. If too many molecules pass the screen, you’ll lose the game and the world will be infected. There is a bit of a randomness factor to this game as the bullets will shoot from either the left or right gun on the ship. If I had more time, I would have wanted to add animations to this game. For example, I was considering having the viruses explode when hit. 

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-14-Project

var stars = []
var bullets = []
var viruses = []
var hearts = []
var hearts2 = []
var x = 170 //ship x position
var y = 320 //ship y position
var dx = 0 //ship x velocity
var dy = 0 //ship y velocity
var health = 3
var worldHealth = 3
var virusesHit = 0
var gameStart = false //checks if game was started

function preload() {
	ship=loadImage("https://i.imgur.com/te1SxyO.png")
	bullet=loadImage("https://i.imgur.com/YHVJAW8.png")
	virus=loadImage("https://i.imgur.com/RrjmBFe.png")
	hearts[0]=loadImage("https://i.imgur.com/eEYu6KF.png")
	hearts[1]=loadImage("https://i.imgur.com/xe4b6B7.png")
	hearts[2]=loadImage("https://i.imgur.com/Jupb3vO.png")
	hearts[3]=loadImage("https://i.imgur.com/ByIC9eQ.png")
	hearts2[0]=loadImage("https://i.imgur.com/GdyaHu7.png")
	hearts2[1]=loadImage("https://i.imgur.com/chdj98I.png")
	hearts2[2]=loadImage("https://i.imgur.com/onnPuBv.png")
	hearts2[3]=loadImage("https://i.imgur.com/6ZwZ3ej.png")
} 

function setup() {
	noLoop() //game does not start at first
    createCanvas(400, 400);
    //stars setup
    for (var i = 0; i < 100; i++) {
    	var rx = random(width)
    	var ry = random(height)
    	var rdy = random(4)
        stars[i] = makeStars(rx, ry, 2, rdy)
    }
    //virus setup
    for (var j = 0; j < 1; j++) {
    	var rx = random(50, 350)
    	var ry = random(-50, 0)
        viruses[j] = makeVirus(rx, ry)
    }
}

function draw() {
	background(0)
	//draws, removes, and adds stars
	starUpdate()
	starsRemove()
	starsAdd()
	//draws, removes, and adds viruses
	virusUpdate()
	virusRemove()
	virusAdd()
	//draws and removes bullets
	bulletUpdate()
	bulletRemove()
	image(ship, x, y, 60, 70) //spaceship
	image(hearts[health], 10, 10, 60, 20) //healthbar
	image(hearts2[worldHealth], 330, 10, 60, 20) //world healthbar

	if (gameStart == false){ //if game has not been started, a start message will show
		start()
	}
	if (collides() == true){ //if bullet hits virus, remove virus
		virusesHit += 1
		viruses.splice(0, 1)
	}
	if (collides2() == true){ //if virus hits the spaceship, remove a heart from the healthbar
		health -= 1
		viruses.splice(0, 1)
	}
	if (viruses[0].y > height){
		worldHealth -= 1
		print(worldHealth)
	}
	if (keyIsDown(87) & y > 0){ //move up
		y-=2
	}
	if (keyIsDown(83) && y < 380){ //move down
		y+=2
	}
	if (keyIsDown(68) && x < 380){ //move right
		x+=2
	}
	if (keyIsDown(65) && x > -40){ //move left
		x-=2
	}
	endings() //different ending screens depending on whether or not the game is won
}

function start(){ //start message
	strokeWeight(3)
	stroke(240, 175, 0)
	textSize(40)
	translate(200, 190)
	textAlign(CENTER, CENTER)
	text("Click to Start", 0, 0)
}

function mousePressed(){ //starts game when mouse clicked
	loop()
	gameStart = true
}

//if spacebar pressed, shoot bullet
function keyPressed(){
	if (key === ' '){
		x2 = random([x+5, x+45]) //bullet shoots from either left or right gun
		var bullet = makeBullets(x2, y, 2)
		bullets.push(bullet)
	}
}

//star functions
function starUpdate(){
	for (var i = 0; i < stars.length; i++){
        stars[i].stepFunction()
        stars[i].drawFunction()
	}
}

//removes stars when off screen
function starsRemove(){
	starsToKeep = []
	for (var i = 0; i < stars.length; i++){
        if (stars[i].y + stars[i].size > 0){
        	starsToKeep.push(stars[i])
        }
	}
	stars = starsToKeep
}

//adds new stars
function starsAdd(){
	var starProb = 0.5
	if (random(1) < starProb){
		stars.push(makeStars(random(width), random(-5, 0), 2, random(4)))
	}
}

//moves stars down
function starStep() {
    this.y += this.dy
}

function starDraw() {
	stroke(this.c)
	strokeWeight(this.size)
	point(this.x, this.y)
}

function makeStars(px, py, pdy, ps) {
	var s = {x: px, y: py, dy: pdy, 
		size: ps, c: color(random(200, 255),random(150, 230),random(100, 145)),
		drawFunction: starDraw, stepFunction: starStep
	}
	return s
}

//bullet functions
function bulletUpdate(){
	for (var i = 0; i < bullets.length; i++){
	    bullets[i].stepFunction()
	    bullets[i].drawFunction()
	}
}

//moves bullet up
function bulletStep() {
    this.y -= this.dy
}

function bulletDraw() {
	image(bullet, this.x, this.y, 10, 20)
}

//removes bullet when off screen
function bulletRemove(){
	bulletsToKeep = []
	for (var i = 0; i < bullets.length; i++) {
        if (bullets[i].y > 0){
        	bulletsToKeep.push(bullets[i])
        }
	}
	bullets = bulletsToKeep
}

function makeBullets(px, py, pdy) {
	var b = {x: px, y: py, dy: pdy, 
		drawFunction: bulletDraw, stepFunction: bulletStep
	}
	return b
}

//virus functions
function virusUpdate(){
	for (var i = 0; i < 1; i++){
        viruses[i].stepFunction()
        viruses[i].drawFunction()
	}
}

//adds virus when there are none on the screen
function virusAdd(){
	var virusProb = 0.7
	if (random(1) < virusProb){
		viruses.push(makeVirus(random(50, 350), random(-100, -20)))
	}
}

//removes virus when off screen
function virusRemove(){
	virusToKeep = []
	for (var i = 0; i < viruses.length; i++) {
        if (viruses[i].y < height+2){
        	virusToKeep.push(viruses[i])
        }
	}
	viruses = virusToKeep
}

//moves virus down
function virusStep() {
    this.y += this.dy
}

function virusDraw() {
	image(virus, this.x, this.y, this.size, this.size)
}

function makeVirus(px, py) {
	var v = {x: px, y: py, dy: 2, 
		size: random(40,50),
		drawFunction: virusDraw, stepFunction: virusStep
	}
	return v
}

//checks to see if any bullet hits the virus
function collides() {
	for (var i = 0; i < bullets.length; i++){
		var d = dist(bullets[i].x, bullets[i].y, viruses[0].x, viruses[0].y)
		if (d < viruses[0].size-10){
			return true
		}
	}	
}

//checks to see if any virus hits the spaceship
function collides2() {
	var d = dist(x, y, viruses[0].x, viruses[0].y)
		if (d < viruses[0].size){
			return true
		}
	}

function endings(){
	if (health == 0 ){ //bad ending
		image(hearts[0], 10, 10, 60, 20) //makes sure that the heart bar shows zero hearts
		strokeWeight(3)
		stroke(240, 175, 0)
		textSize(40)
		translate(200, 190)
		textAlign(CENTER, CENTER)
		text("GAME OVER", 0, 0)
		stroke(0)
		fill(240, 175, 0)
		textSize(12)
		translate(0, 40)
		text("You were unable to prevent the spread of the virus.\nBetter luck next time!", 0, 0)
		noLoop()
	}
	if (worldHealth == 0){ //second bad ending
		strokeWeight(3)
		stroke(240, 175, 0)
		textSize(40)
		translate(200, 190)
		textAlign(CENTER, CENTER)
		text("GAME OVER", 0, 0)
		stroke(0)
		fill(240, 175, 0)
		textSize(12)
		translate(0, 40)
		text("You let too many viruses pass and the world has been infected.\nBetter luck next time!", 0, 0)
		noLoop()
	}
	if (virusesHit == 10){ //good ending
		strokeWeight(3)
		stroke(240, 175, 0)
		textSize(40)
		translate(200, 190)
		textAlign(CENTER, CENTER)
		text("YOU WIN", 0, 0)
		stroke(0)
		fill(240, 175, 0)
		textSize(12)
		translate(0, 40)
		text("You have successfully destroyed all the viruses.\nRefresh to play again!", 0, 0)
		noLoop()
	}
}

Looking Outwards – 11

02

For this Looking Outwards, I decided to write about the piece Assembly and one of the women involved in its creation. This piece features 5,500 white polymer blocks hanging from the ceiling. Through projectors, each block is illuminated with digital light. What I admire about this project is the use of both physical and digital instruments. I’m especially attracted to the way that light is implemented in this piece, creating a wave like animation. Mimi Son is the co-founder of the Seoul based art studio responsible for this artwork. She studied Interaction Design in Copenhagen, Denmark and got her MA in London, England. Along with working as an art director, she also teaches Interactive Storytelling in Korea.

Project – 11 – Landscape

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-11-Project

var stars = []
var planets = []
var moon = []
var noiseParam = 0
var noiseStep = 0.1
var sky
var astronaut
var planet
var meteor 
var mx = 300
var my = 0
var mdx
var mdy
var ax = 0
var ay = 100
var ady = 1
var frameCount = 0

function preload() { 
	sky=loadImage("https://i.imgur.com/zfE0rbY.jpg")
	astronaut=loadImage("https://i.imgur.com/0GaKn9k.png")
	planet=loadImage("https://i.imgur.com/UCrpkmB.png")
	meteor=loadImage("https://i.imgur.com/gcfvaqR.png")
} 

function setup() {
    createCanvas(400, 300)
    //meteor velocity
	mdx = random(-10,-15)
	mdy = random(10,15)
    //stars setup
    for (var i = 0; i < 100; i++) {
    	var rx = random(width)
    	var ry = random(height)
    	var rdx = random(4)
        stars[i] = makeStars(rx, ry, 2, rdx)
    }
    //planets setup
    for (var j = 0; j < 2; j++) {
    	var rx = random(width)
    	var ry = random(150)
        planets[j] = makePlanets(rx, ry)
    }
    //moon surface setup
    for (var k = 0; k < width; k++){
		var n = noise(noiseParam)
		var value = map(n, 0, 1, 10, 50)
		moon.push(value)
		noiseParam += noiseStep
	}
    frameRate(10)
}

function draw() {
	image(sky, 0, 0, 400, 400)

	//draws stars
	starUpdate()
	starsRemove()
	starsAdd()

	//draws planets
	planetUpdate()
	planetsRemove()
	planetsAdd()
	
	//draws moving meteor
	drawMeteor(mx, my, mdx, mdy)

	//draws moon surface
	drawMoon()

	//draws astronaut
	drawAstronaut(ax, ay)

	//moves meteors across screen
	mx+=mdx
	my+=mdy

	//moves astronaut up and down
	ay+=ady
	if (ay > 110){
		ady*=-1
	}
	if (ay < 90){
		ady*=-1
	}
	frameCount++
}

function drawAstronaut(x, y){
	image(astronaut, x, y, 55, 60)
}

function drawMoon(){
	stroke(200, 180, 200)
	strokeWeight(200)
	moon.shift()
	var n = noise(noiseParam)
	var value = map(n, 0, 1, 10, 50)
	moon.push(value)
	noiseParam += noiseStep
	for (var i=0; i < width; i++){
		line(i*15, 300+moon[i], (i+1)*15, 300+moon[i+1])
	}
}

function drawMeteor(x, y, dx, dy){
	image(meteor, x, y, 50, 45)
}

//star functions
function starUpdate(){
	for (var i = 0; i < stars.length; i++){
        stars[i].stepFunction()
        stars[i].drawFunction()
	}
}

function starsRemove(){
	starsToKeep = []
	for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].size > 0){
        	starsToKeep.push(stars[i])
        }
	}
	stars = starsToKeep
}

function starsAdd(){
	var starProb = 0.5
	if (random(1) < starProb){
		stars.push(makeStars(random(width, 410), random(200), 2, random(4)))
	}
}

function starStep() {
    this.x -= this.dx
}

function starDraw() {
	stroke(this.c)
	strokeWeight(this.size)
	point(this.x, this.y)
}

function makeStars(px, py, pdx, ps) {
	var s = {x: px, y: py, dx: pdx, 
		size: ps, c: color(random(150, 230),random(100, 140),random(200, 255)),
		drawFunction: starDraw, stepFunction: starStep
	}
	return s
}

//planet functions
function planetUpdate(){
	for (var i = 0; i < 2; i++){
        planets[i].stepFunction()
        planets[i].drawFunction()
	}
}

function planetsRemove(){
	planetsToKeep = []
	for (var i = 0; i < planets.length; i++){
        if (planets[i].x + planets[i].size > 0){
        	planetsToKeep.push(planets[i])
        }
	}
	planets = planetsToKeep
}

function planetsAdd(){
	var planetsProb = 0.3
	if (random(0, 1) < planetsProb){
		planets.push(makePlanets(random(width, 450), random(150)))
	}
}

function planetStep() {
    this.x -= this.dx
}

function planetDraw() {
	image(planet, this.x, this.y, this.size, this.size)
}

function makePlanets(px, py) {
	var p = {x: px, y: py, dx: 2, 
		size: random(10,60), c: color(random(200,200),random(140,170),random(140,170)),
		drawFunction: planetDraw, stepFunction: planetStep
	}
	return p
}

For this project, I wanted to create a landscape capturing space. I used clip art for a few of the objects here. The meteor moves past the screen at the beginning of the animation. The objects that move with the camera are the stars, the planets, and the moon surface. The stars are created by randomly placing points with different sizes and slightly different colors. The planets have random sizes and locations as well. For the moon surface, I referred to the stock market example that we did in lab previously. I had originally planned to add craters to the moon, but decided not to for the sake of time. Here is my sketch for this project:

Looking Outward – 10

The Great Animal Orchestra | Fondation Cartier pour l'art contemporain | Artsy

The project I chose to write about for this assignment is called the Great Animal Orchestra. As I discussed music in LO-04, this focuses more on sound art. The Great Animal Orchestra makes use of recorded soundscapes with lit up spectrograms of these sounds displayed across walls of a dark room. The sounds came from the many recordings of terrestrial and marine species documented by ecologist Bernie Krause. He has collected over 5,000 hours of recordings from over 15,000 species. I find this project interesting because it combines nature and technology by creating a digital environment representing a variety of ecosystems. 

Project 10 – Sonic Story

sketch

For this project, I created a short story with underwater animals. I used clip art found online in my code. The fish swim across the canvas, creating a swimming sound. The crab is walking around the bottom of the ocean, which makes the walking sound. As the blue fish swims, bubbles appear and create a bubbling sound. Once the red fish is close to the end of the canvas, it starts to eat the seaweed and a eating sound plays. After eating, the red fish disappears and the animation stops.

Looking Outwards – 09

One Looking Outwards that I found to be pretty interesting was Francis Park’s LO-5 on virtual fashion shows. This assignment wanted us to discuss 3D computational art. With the global pandemic, it’s been difficult holding events as one usually would. A fashion label, called Hanifa, worked around this by holding a virtual fashion show. This fashion show used technology in order to stream animated 3D outfits through Instagram Live. I thought this method was very effective with the current circumstances. I’m also amazed with how well these models were rendered, as the outfits and material look so realistic. Because of this digital fashion show, I decided to do more research on how fashion companies are handling the pandemic. Though not done in the same manner of Hanifa, many fashion shows used 360 videos and VR technology to create a realistic experience. Here is an example of one: 

Project – 09 – Portrait

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-09-Project

var img

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

function setup() {
  var w = img.width/5 //new width
  var h = img.height/5 //new height
  createCanvas(w, h)
  background(255)
  imageMode(CENTER)
  img.resize(w, h)
  img.loadPixels()
}

function draw() {
  var m = minute() 
	var x = floor(random(img.width)) //random x value
	var y = floor(random(img.height)) //random y value
	var pixel = img.get(x, y)
	fill(pixel, 128)
  noStroke()
  drawheart(x, y, m) //draws hearts
}

function drawheart(x, y, m){
    strokeWeight(0)
    push()
    translate(x, y) //random x and y pos
    beginShape();
    scale(random(0.1, 1)) //random size
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
        var mx = constrain(m/40, 0.7, 1.5) //x multiplier based on minute
        var my = constrain(m/40, 0.7, 1.5) //y multiplier based on minute
        var x = mx*16*pow(sin(i),3)
        var y = my*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y) 
    }
    endShape(CLOSE)
    pop()
}

For this project, I wanted to make use of the hearts I created in the curves project. I used a picture of me as a child for the program. The size of the hearts are random, but the shape slightly changes depending on the time.

Hearts at 1:59 | Hearts at 2:00 | Image after some time has passed
Original image

Looking Outwards – 08

BUFU (which stands for By Us, For Us) is a group from NYC that works to facilitate conversations surrounding the cultural and political relationship between black and Asian diasporas. The four members, Jazmin Jones, Tsige Tafesse, Katherine Tom, and Sonia Choi, choose to explore this through a documentary and community events. In June 2016, the group transformed a warehouse into a space in which they held events for a “month for black and Asian futurity.” In this venue, they gave workshops, had dinners, and discussed important topics regarding social issues. With their work, the group hopes to promote POC solidarity, finding ways for both communities to come together. As someone from a mixed black-Asian household, I was really interested in learning more about this project and their use of art to explore solidity.

Here is their presentation below. They make use of images, videos, and quotes to deliver their presentation and explain ideas important to them.

Looking Outwards – 07

The project I chose is called Facebook Flowers by Stamen Design. Their work shows the activity of a Facebook post going viral. It takes on the form of a flower that blooms as the post gets reshared from person to person. Every new share creates a branch and reshares of that share show as an extension of the branch. I admire this piece because of the way it shows data while still creating an art piece in a way. I also really like how motion is used in this data visualization, which is not always included in other works. It is fascinating to watch how the data grows through this plant-like visualization.

Project-07 – Curves

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-05-Project

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

function draw() {
	background(250, 190, 200) //pink background
	//calls column with 5 hearts
    for (var x = 40; x <= width; x += 200) {
        for (var y = 40;y <= height; y+= 100) {
        	push()
            translate(x, y)
            drawheart2()
            drawheart()
            pop()
        }
    }
    //cals collumn with 4 hearts
    for (var x = 140; x <= width; x += 200) {
        for (var y = 100;y <= height; y+= 100) {
        	push()
            translate(x, y)
            drawheart2()
            drawheart()
            pop()
        }
    }
}

//draws pink hearts
function drawheart(){
	fill(230, 80, 120)
	strokeWeight(0)
	push()
    beginShape();
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
    	var mx = constrain(mouseX/300, 0.7, 1.2) //multiplier based on mouseX
    	var my = constrain(mouseY/300, 0.7, 1.2) //multiplier based on mouseY
        var x = mx*16*pow(sin(i),3)
        var y = my*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y); 
    }
    endShape(CLOSE);
    pop()
}

//draws white hearts
function drawheart2(){
	var t = constrain(mouseX/3, 50, 80) //transparency based on mouseX
	fill(255, 255, 255, t)
	strokeWeight(0)
	push()
    beginShape()
    scale(2)
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
        var x = 1.2*16*pow(sin(i),3)
        var y = 1.2*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y); 
    }
    endShape(CLOSE);
    pop()
}

For this project, I wanted to create a wallpaper again, but this time with curves. I decided to use hearts for this, in which the size changes with the mouse coordinates. The white hearts in the background also change in transparency depending on the coordinate of the mouse.

Screenshot of my wallpaper