Supreme Invasion!

/*
Min Jun Kim & Han Yu
minjunki && hyu1
15104
Final Project 

*/

//This Project is a spaceship fighting game.

var px = 0; //x location of ship
var py = 240; //starting y location of our ship
var psize = 50; //size of ourship
var keys = []; //for controlling sihp
var Selfprojectiles = []; //array of our projectiles 
var projectileCounter = 100; //for controlling flow of projectiles
var SOE = []; //array of enemy ships
var shipSpeed = 3; //our speed for moving ship
var distanceOne = []; //distance between projectile and enemy
var distanceTwo = []; //distance between projectile and enemy
var SOEnumb = 2; //number of enemies
var timer = 0; //for controlling flow of game
var gameStage = 1; //starting stage of the game
var timerIncrement = 1; //another variable for controlling flow of game
var enemyProjectiles = []; //array of enemy bullets
var EPdistance = []; //distance between enemy bullets and our ship
var ourHealth = 10; //how much health we have left
var gameOver = 0; //activated when user dies
var clickStart = 0; //for controlling start of game
var clickCount = 0; //for making sure no double clicks
var stars = []; //array of stars in background
var imageOne; //image
var imageTwo; //image
var imageThree; //image

//making background stars
function makeStars(x, y, size) {
    return {x: x, y: y, size: size, draw: starRender, update: starUpdate}
}

//draws stars as ellipse
function starRender() {
	fill(255);
    ellipse(this.x, this.y, this.size);
}

//scrolling speed of stars
function starUpdate() {
    this.x -= 3;
}

//making our bullets
function makeOurProjectile(x, y, fast, powerful) {
	return {x: x, y: y, speed: fast, power: powerful, 
		drawIt: OPrender, updateIt: OPupdate}
}

//making enemy bullets
function makeEnemyProjectile(x,y, speedo,status) {
	return {x: x, y: y, speed: speedo, boss: status, 
		updir: random(-5,5), drawIt: EPrender, updateIt: EPupdate}
}

//draws bullets, depending on type of enemy
function EPrender() {
	//if boss, have balls instead of lines
	if (this.boss == true) {
		fill(0);
		stroke(250,0,0);
		ellipse(this.x, this.y, 10, 10);
	}
	//standard line bullets from enemy
	else {
		stroke(250, 0, 0);
		strokeWeight(3);
		line(this.x, this.y, this.x-30, this.y);
	}
	
}

//controls the movement of enemy bullets depends on enemy type
function EPupdate() {
	//if boss, then make bullets bounce and have random speed
	if (this.boss == true) {
		this.y += this.updir;
		this.x -= this.speed*random(1,2);
		//bounces bullets
		if (this.y > height || this.y < 0) {
			this.updir = -this.updir;
		}
	}
	//all other enemies have one dimensional attacks
	else {
		this.x -= this.speed;
	}
	
}

//draws our bullets as green lines
function OPrender() {
	stroke(0,200,0);
	strokeWeight(this.power);
	line(this.x, this.y, this.x+30, this.y);
}

//moves the bullet across map
function OPupdate() {
	this.x += this.speed;
}

//the specs of enemy ships
function makeSOEnemy(x, y, fast, sizing) {
	return {x: x, y: y, big: sizing, speed: fast, 
		drawIt: SOErender, update: SOEupdate, DMG: 0}
}

//controls the movement of enemy ships depending on size and location
function SOEupdate() {
	//moves the enemy along the map
	if (gameStage == 1)	 {
		this.y += this.speed;
	}
	if (gameStage == 2)	 {
		this.y += this.speed;
	}
	//if 2nd round 1st enemy, move back as game goes on
	if (gameStage == 2 & this.x < 500) {
		this.x += 0.1;
	}

	if (this.y > height) {
		this.speed = -this.speed;
	}
	if (this.y < 0) {
		this.speed = -this.speed;
	}
	
	//first round enemy with easy projectiles
	if (gameStage == 1) {
		if (random(1) > 0.98 & this.y < 600) {
			enemyProjectiles.push(makeEnemyProjectile(this.x, this.y,5));	
		}

	}
	//2nd round enemy, with more frequent bullets
	if (gameStage == 2 & this.big < 90) {
		if (random(1) > 0.93 && this.y < 600) {
			enemyProjectiles.push(makeEnemyProjectile(this.x, this.y, 5));	
		}

	}
	//pulls our ship closer and make projectiles more frequently
	if (gameStage == 2 & this.big > 90) {
		if (random(1) > 0.95 && this.y < 600) {
			enemyProjectiles.push(makeEnemyProjectile(this.x, this.y, 
				random(4,6,1), true));	
		}
		px+=0.3;

	}
}

//draws the enemies depending on the size input.
function SOErender() {
		fill(100)
		//draw the boss and health bar
		if (gameStage == 2 & this.big > 90) {
			push();
			fill(250,0,0);
			rectMode(CORNER);
			rect(5,5,width-this.DMG*6.4,20);
			pop();
			
			push();
			translate(this.x-85, this.y-60);
			scale(0.37, 0.37);
			image(imageThree,0, 0);
			pop();

		}
		//the standard enemy 
		else {
			//health bar
			push();
			fill(220, 0, 0);
			rect(this.x, this.y - this.big/1.5, 
				this.big - this.DMG*this.big/20, 10);
			pop();
			
			//standard enemy
			push();
			translate(this.x-this.big*1.4, this.y-this.big*0.5);
			scale(0.0035*this.big, 0.0035*this.big);
			image(imageTwo, 0, 0);
			pop();
		}
}


//==============================================================

//sets up the keys and the initial stars
function setup() {
   createCanvas(640,480)
   keys = [false, false, false, false, false]
   for (i = 0; i < 200; i++) {
        stars[i]=makeStars(random(width), random(height), random(5));
    }
   imageOne = loadImage("https://i.imgur.com/GHtg2vU.png");
   imageTwo = loadImage("https://i.imgur.com/svK8OkI.png");
   imageThree = loadImage("https://i.ibb.co/n0G0yGC/eae.png");
}

function draw() {
	//basic initial specs
    background(17,21,61);
    rectMode(CENTER);
    noStroke();
    fill(100);
    
    //projectile counter increases by 1
	projectileCounter += 1;
	
	//increase timer by timer increment
	timer += timerIncrement;

	//makes first round of enemies when timer is 1
	if (timer == 1 & gameStage == 1) {
		for (i = 0; i < SOEnumb; i ++) {
    		SOE[i] = makeSOEnemy(500,random(height), random(5), random(40,60));
    	}
    	timer += 1;

	}

	//states the first round
	if (timer > 1 & timer < 40) {
		textAlign(CENTER);
		push();
		stroke(255);
		fill(255);
		textSize(20);
		text("Round One!", width/2, height/2-100);
		pop();
		
	}

	//pauses the increase in timer
	if (timer > 41) {
		timerIncrement = 0;
	}

	//resumes timer once 1st round is finished
	if (gameStage == 2) {
		timerIncrement = 1;
	}

	//once timer has started moving again, write text stating the stage
	if (timer > 50 & timer < 150) {
		push();
		noStroke();
		fill(255);
		textSize(20);
		text("Final Stage!", width/2, height/2-100);
		pop();
	}

	//makes 2 more enemies once timer reaches 60
	if (timer == 60 & gameStage == 2) {
    	SOE[0] = makeSOEnemy(400,random(height), 6.5, 30);
    	SOE[1] = makeSOEnemy(550, height/2, 3, 100);
    	timer += 1;

	}

	//move right if rightarrow is pressed
    if (keys[0] == true) {
    	px += shipSpeed;	
    }

    //move left if leftarrow is pressed
    if (keys[1] == true) {
    	px -= shipSpeed;
    }

    //move up if uparrow is pressed
    if (keys[2] == true) {
    	py -= shipSpeed;
    }

    //move down if downarrow is pressed
    if (keys[3] == true) {
    	py += shipSpeed;
    }

    //add projectiles once shift is pressed and reset counter
    if (keys[4] == true & projectileCounter > 5) { //8
    	Selfprojectiles.push(makeOurProjectile(px+50, py, 10, 3))
    	projectileCounter = 0;
    }
    
    //for teleporting up and down once limit is reached
    if (py > height) {
    	py = 0;
    }
    if (py < 0) {
    	py = height;
    }
    //prevents user from going behind map by pushing back
    if (px < -5) {
    	px += 3;
    }
    //prevents user from moving too forward by pushing back
    if (px > width/2) {
    	px -= 3.3;
    }

    //makes random star objects, and initializes the functions
    noStroke()
    for (i = 0; i < 1; i++) {
        stars.push(makeStars(width, random(height), random(5)));
    }
    for (i = 0; i < stars.length; i++) {
        stars[i].draw();
        stars[i].update();

        //if stars if too far behind map, shift the array
        if (stars[i].x < -500) {
            stars.shift();
        }

    }
    

    //initializes the enemoies
    for (i = 0; i < SOEnumb; i ++) {
    	SOE[i].drawIt();
    	SOE[i].update();
    	
    }
    
    //initializes the enemy projectiles
    for (i = 0; i < enemyProjectiles.length; i++) {
    	enemyProjectiles[i].drawIt();
    	enemyProjectiles[i].updateIt();
    }

    //initializes our projectiles
    for (i = 0; i < Selfprojectiles.length; i++) {
    	Selfprojectiles[i].drawIt();
    	Selfprojectiles[i].updateIt();
    		//calculates distance if the array is nonzero and projectiles
    		//are still on map
			if (Selfprojectiles.length > 0 & Selfprojectiles[i].x < 700) {
				//calculate the distance between enemy 1 and projectile
				distanceOne[i] = dist(Selfprojectiles[i].x, 
				Selfprojectiles[i].y, SOE[0].x, SOE[0].y);
				//calculate distance between enemy 2 and projectiles
				distanceTwo[i] = dist(Selfprojectiles[i].x, 
				Selfprojectiles[i].y, SOE[1].x, SOE[1].y);

				//if off map shift distances and projectiles
				if (Selfprojectiles[i].x > width) {
					Selfprojectiles.shift();
					distanceOne.shift();
					distanceTwo.shift();
				}
				//if distance is smaller than the size of enemy 1 shift
				if (distanceOne[i] < SOE[0].big) {
					Selfprojectiles.shift();
					distanceOne.shift();
					distanceTwo.shift();
					SOE[0].DMG ++;
				}
				//if distance is smaller than the size of enemy 2 shift
				if (distanceTwo[i] < SOE[1].big) {
					Selfprojectiles.shift();
					distanceOne.shift();
					distanceTwo.shift();
					SOE[1].DMG ++;
				}
				//if enemy 1 reach damage cap, move off map prevent shooting
				if (SOE[0].DMG > 20) {
					SOE[0].y = 700;
					SOE[0].x = 700;
					SOE[0].speed = 0;
				}
				//if enemy 2 reach damage cap, move off map prevent shooting
				if (SOE[1].DMG > 20 & gameStage == 1) {
					SOE[1].y = 700;
					SOE[1].x = 700;
					SOE[1].speed = 0;
				}
				//if boss reach damage cap move off stage
				if (SOE[1].DMG > 100 & gameStage == 2) {
					SOE[1].y = 700;
					SOE[1].x = 700;
					SOE[1].speed = 0;
				}
				//if both enemies are killed during 2nd stage, end game
				if (SOE[0].y == 700 & SOE[1].y == 700 && SOE[1].DMG > 99) {
					gameStage = 3;
				}
				//if both enemnies killed during 1st stage, move up stage
				if (SOE[0].y == 700 & SOE[1].y == 700 && gameStage == 1) {
					gameStage =2;
				}

				stroke(255);
		}    
	}

    
    for (z = 0; z < enemyProjectiles.length; z++) {
    		//if enemy projectile array is nonzero, calculate distance
			if (enemyProjectiles.length > 0) {
				EPdistance[z] = dist(enemyProjectiles[z].x, enemyProjectiles[z].y,
					px, py);
				//if bullet goes off map, shift distance and bullet
				if (enemyProjectiles[z].x < 0) {
					enemyProjectiles.shift();
					EPdistance.shift();
				}
				
				//if projectile too close to ourship, shift arrays and do damage
				if (EPdistance[z] < 20 & timer != 0) {
					enemyProjectiles.shift();
					EPdistance.shift();
					ourHealth -= 1;
				}
				//if health is zero, end game
				if (ourHealth === 0) {
					gameOver = 1;
				}

			}
		}

	//draw the health bar
	push();
    rectMode(CENTER);
    noStroke();
    fill(0,200,0);
    rect(px+psize/2, py-psize/2, ourHealth*5,5);
    pop();

    //draw our ship
    push();
    noStroke();
    fill(100);
    translate(px-37,py-25);
    scale(0.15,0.15);
    image(imageOne, 0, 0);
    pop();


    //initial stage specs. Gives instructions
	if (clickStart == 0) {
		timer = 0;
		timerIncrement = 0;
		//black background
		push();
		fill(0);
		rect(width/2, height/2, 1000, 1000);
		pop();

		//design and title
		push();
		fill(255, 253, 83, 140);
		noStroke();
		triangle(150, 100, 280, 600, 550, 500);
		triangle(110, 100, 20, 500, 130, 500);
		triangle(170, 105, 700, 50, 700, 300);
		textFont("futura");
		textStyle(ITALIC);
		fill(0);
		textSize(50);
		text("Supreme", 500-85, 130-3);
		text("Invasion", 541-85, 180-3);
		pop();

		//decoration
		push();
		translate(-150,90);
		scale(0.6, 0.6);
		rotate(-0.5);
		image(imageOne, 0, 100);
		pop();

		//instructions
		push();
		noStroke();
		fill(0,0,200);
		fill(255);
		textSize(30);
		text("click to begin!", width/2+25, 440);
		fill(0);
		textSize(20);
		text("Arrow Keys to move", width/2+5, 390);
		text("Or WASD to move", width/2+5, 410);
		text("Shift to shoot", width/2-35, 370);
		pop();
	}

	//once clicked, the opening screen is changed
	if (mouseIsPressed & clickCount == 0) {
		clickCount += 1;
		timerIncrement = 1;
		clickStart = 1;	
	}
	//if game over is active, then cover screen with message
	if (gameOver > 0) {
		fill(0);
		rect(0,0, width*2, height*2);
		fill(255);
		noStroke();
		textSize(50);
		text("Game Over!", width/2, height/2);
		textSize(30);
		text("Press 'r' to restart", width/2, height/2+50);
		push();
		translate(350, 10);
		scale(0.5, 0.5);
		image(imageTwo, 0, 0);
		pop();
	}
	//if end game is activated then cover screen and say end message
	if (gameStage == 3) {
		fill(0);
		rect(width/2, height/2, 1000,1000);
		push();
		translate(460, 200);
		rotate(0.3);
		scale(0.8, 0.8);
		image(imageThree, 0, 0);
		pop();
		push();
		noStroke();
		fill(255);
		textSize(50);
		text("You Win! :)", width/2, height/2);
		textSize(20);
		text("Press 'r' to play again", width/2, height/2+50);
		pop();
	}	
}

//Controls======================================================
//==============================================================

//if key is pressed changes the array for controls
function keyPressed() {
	if (key == "ArrowRight" || key == "d" || key == "D") {
		keys[0] = true;
	}
	if (key == "ArrowLeft" || key == "a" || key == "A") {
		keys[1] = true;
	}
	if (key == "ArrowUp" || key == "w" || key == "W") {
		keys[2] = true;
	}
	if (key == "ArrowDown" || key == "s" || key == "S") {
		keys[3] = true;
	}
	if (key == "Shift") {
		keys[4] = true;
	}
	//resets game if press r
	if (key == "r" || key == "R") {
		gameOver = 0;
		gameStage = 1;
		timer = 0;
		timerIncrement = 1;
		clickCount = 0;
		clickStart = 0;
		ourHealth = 10;
		px = 0;
		py = 240;
	}
}

//releases the keys
function keyReleased() {
	if (key == "ArrowRight" || key == "d" || key == "D") {
		keys[0] = false;
	}
	if (key == "ArrowLeft" || key == "a" || key == "A") {
		keys[1] = false;
	}
	if (key == "ArrowUp" || key == "w" || key == "W") {
		keys[2] = false;
	}
	if (key == "ArrowDown" || key == "s" || key == "S") {
		keys[3] = false;
	}
	if (key == "Shift") {
		keys[4] = false;
	}
}

Instructions:
To play the game, click the initial screen to start the game. You can use either the arrow keys or “w” to move up, “a” to move left, “s” to move down, and “d” to move right (WASD). To shoot projectiles press SHIFT. The point of the game is to defeat all enemies. If you hit the enemy with your projectiles their health will go down, and once the enemy’s health hits zero, the enemy is considered defeated. On the second stage, the boss will pull the user towards the right side of the map, so be mindful. Lastly, the user cannot go horizontally beyond certain limits, and once the user reaches the top of the map the user will be teleported to the bottom of the map.

Statements:
For this final project, I focused a lot on the structure and gameplay (the backbone of the game), while my partner focused on the design aspect and some functionality of the game. My partner personally drew all the characters, which made the game look more unique. The code spans around 600 lines, and in my perspective, it was certainly difficult because of the number of objects (4) and their interaction with each other. I made sure to limit the number in arrays to make the gameplay run more smoothly and cleanly.

The gameplay is slightly different from the initial proposal, but for good reason. We initially planned to have three stages in the game, however that either made the game extremely long or difficult. We also didn’t implement a sound source for this game, because we wanted the users to be able to play the game directly in the browser. Despite these minute changes, the main concept and paradigms are true to the original.

All in all, this project was extremely fun to program. It certainly did take hours and hours to get it right, but in the end it all paid off because of the aesthetics and fun gameplay.

I am using my first grace day for this post.
For this semester’s project proposal, I’ve decided to work together with Han Yu from the same class on a simple generative video game. We decided to work on a spaceship game inspired by Gradius, where numerous spaceship enemies appear to attack the main protagonist. For our version of this project, we are going to be incorporating three rounds of fighting. The first two will have various enemies that appear in random but also planned times, and the last round will consist of a boss character which will be a black hole. In the last round, the character will constantly be gravitationally pulled toward the enemy while being attacked by missiles and laser shots. The stages will be determined by how many enemy spaceships the user destroys, and the boss will have a health-bar to show how far the user is from winning the game. In the end, the user’s spaceship will do a simple celebratory dance, and a caption that says, “You saved the Universe!” I think that this project will be difficult in that there will be at least 4 objects used- Stage1 Enemies, Stage2 Enemies, and Boss, and projectiles. I think figuring out the logistics of dealing damage will be the most difficult part of this project.

For this week’s looking outwards, I wanted to compare two projects that are generative in nature. One is called Wall Explorer A by an artist named Moka. I was very drawn to the bold and impactful drawing. And in a lot of sense, it reminded me of Pittsburgh. The premise of the artwork is that the artist drew certain items using software, then drew them again in real life using artist tape. I admire the fact that this project is very multifaceted, and uses creative resources to complete. Usually a lot of art is done on one medium, but by incorporating multiple sources, one can create what normally and usually can’t be done with extreme precision. I think creator could have improved upon this were he to use varying thickness of the tapes.

The other project that I admire a lot would be David Bollinger’s D20160112B. The project is a graphic illusion type of art that gives the impression of a 3d gaming background/map. I thought that this project was very interesting because it is able to portray such complex 3d structure in a simple and non-invasive way. Also it is very detailed and have no parts that defy the 3d space. I think the artist could have improved on this if he were to add other interesting elements such as trees and other landscapes like stones.

Link to Wall Expolorer A by Moka produced in 2011: http://mariuswatz.com/2011/03/11/wall-exploder-a/
Link to D20160112B not as easy by David Bollinger produced in 2016: https://www.flickr.com/photos/davebollinger/24252153771/

Video on how they made the song.

For this week’s looking outwards, I decided to write about computer music since last time I wrote about sound art. I was particularly interested in the combining computer generated sounds with vocal music, and an artist that I like had a video on how their music was made. What I admire about this project is only computer instruments used to produce the song. Even though they used samples from a vocal artist, the sample was included to the program instead of keeping them separate. I also admire that with the usage of computer software, one can alter the qualities of the voice, so that one doesn’t need to find a perfect vocal artist, but rather alter the sample to meet the feel of and standards of the song. From an interview, Odesza stated that, “As far as software, we use lots of Native instruments plug-ins, SoundToys, Logic, Ableton, Maschine, and Ozone 5.” So for the algorithms used for the work, they definitely must have used looping algorithms, with algorithms re-organizes parts to match the beat perfectly. This would be achieved probably by using if functions and millies(). Of course, these elements would already be installed in the software that is used, but in a way, computer music production is like programming with already made functions. I think that artist’s artistic sensibilities came into play when all the parts of the music are harmonic and work to add to the song.

Link to work: https://www.youtube.com/watch?v=xqoLCvsy8_c
Creator: Odesza, Naomi Wild
Title: Higher Ground
Year of creation:2018

Move the mouse!

/*
Min Jun Kim
minjubki
15104
Project 11

Makes a turtle composition
*/

var t1, t2; //initialize turtles
var turtles = []
var inc = 0.05 //used to control pace of sin
var v = 0.5 //value for sin
var ang; //angle
var xind = []; //index for x
var yind = []; // index for y
var sumx=0; //sum of x
var sumy =0 ; //sum of y
var topdistx = 0; //distance from a certain point 
var topdisty = 0; // y distance from a certain point 

function setup() {
     createCanvas(480, 480); 
    //sets up two turtles

    t1 = makeTurtle(width/2, height/2);
    t1.setWeight(2);
    t1.setColor(255);
    t1.penDown();

    t2 = makeTurtle(0, 0);
    t2.setWeight(1);
    t2.setColor(0);
    t2.penDown();
    frameRate(500);



}


function draw() {
    background(0);
    noFill();

    //draws the grid in the background
    while(t2.y < height+10) {
        t2.forward(width);
        t2.right(90);
        t2.forward(3);
        t2.right(90);
        t2.forward(width);
        t2.left(90);
        t2.forward(3);
        t2.left(90);
        
    }
    //repeat once it finishes
    if (t2.y > height) {
        t2.goto(0,0);
    }

    //have a repeating colorshift
    t2.setColor(sin(v)*200);

    //only have the drwaing if mouse is in canvas
    if (mouseX> width || mouseY > height) {
        t1.penUp();
    }
    else {t1.penDown()};
    
    //t1.setWeight(random(5))
    strokeWeight(1);
    //find angle to mouse
    ang = int(t1.angleto(mouseX,mouseY));
    distanco = dist(mouseX,mouseY, t1.x, t1.y);
    
    rect(0,0, width-1, height-1);
    t1.forward(10+distanco/ang);
    //make drawing shift if mouse is moving
    t1.turnToward(mouseX,mouseY,ang);
    t1.goto(width/2, height/2);
    
    //make sure it is in bounds
    if(t1.x > width || t1.x < 0) {
        t1.goto(random(width),random(height));
    }
    //draw the pattern in middle
    for (var i = 0; i < 200; i++) {
        t1.forward(mouseY/5);
        t1.right(mouseX/9+90); 
        t1.forward(sin(v)*mouseY/100);
        //index values
        xind[i] = t1.x;
        yind[i] = t1.y;
        //draw exoanding points
        if (i % 2 === 0) {
            t1.forward(distanco*cos(v));
            t1.left(2);
        }
        //inverse expanding points
        if (i % 5 === 0) {
            t1.forward(50*sin(v));
            t1.right(2);
        }
        
        //make sure it stays in center
        t1.goto(width/2, height/2);
    }
    //find sum of all points
    for (i = 0; i < xind.length; i++) {

        sumx += xind[i];
        sumy += yind[i];
        
        
    }
    //make the list not too big
    if (xind.length > 100) {
        xind.pop();
        yind.pop();
    }
    //find distance to cneter
    topdistx = dist(sumx/xind.length, 0, 240, 0);
    topdistx = dist(0, sumy/xind.length, 0, 240);
    //go to cneter of drawing
    t1.goto(sumx/xind.length,sumy/yind.length);
    fill(0);
    //reset
    sumx=0;
    sumy=0;

    //controls the value for the sin and return to 0 if too high
    v += inc;
    if (v > 100) { v= 0};

}



function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

This week I wanted to draw something that could be used a music video in relation to this week’s looking outwards. I first drew patterns in the middle that changed according to the position of the mouse, then added elements that were based on time. I decided to use sin and cos and increased it with a certain value. The value could be changed to make it beat faster, but it was too overwhelming that way. Then I drew a simple grid in the background, and added color elements to it. I think that this project turned out well, and I was shocked that turtle graphics can produce such detailed programs.

Progress pics:

The female artist that I would like to discuss in Looking Outwards this week is Eva Mattes. She is a prantivist and net artist based in New York City. She operates under a pseudonym of 0100101110101101.org which I thought was interesting and works with a partner named Franco Mattes. Her work focuses on the issues- both political and ethical- that arose since the inception of the internet.

The artwork by Eva Mattes that I would like to discuss is her BEFNOED project. The concept of the artwork is rather straight-forward, but the meaning that stands behind it is very deep. The project involves having a monitor facing the floor or a wall that is very close, and puts the audience in compromised and bizarre positions- which in a sense puts them into a role as a performer.

One thing that I admire much about this art is how it tells a message in a very creative and experiential way. I think that a lot of art can be rather blunt yells out a message, but I think that this way of telling the story is actually very fun and impactful. I think that the message that she tells regarding the issues from technology is very relevant to society today, as people being born currently will have no concept about life before the computer.

Source: http://0100101110101101.org/befnoed/
Title: BEFNOED
Artist: Eva Mattes
Year: 2014

Look for a while to see all the details!

/*
Min Jun Kim
15104
Project 10
This program draws a highway setting with randomly made objects
*/

var terrainSpeed = 0.0001;
var terrainDetail = 0.0005;
var terrainmapx = [];
var terrainmapy = [];
var dec = 0; //counter for time
var cars = []; //array of cars

function setup() {
	//sets up canvas and initial 3 cars 
    createCanvas(640, 400);
    for (var i = 0; i < 3; i++) {
    	var rx = random(width);
    	cars[i] = makeCar(rx);
    }

    
}
 


function draw() {
    background(0);    
    fill(0); 
    stroke(0);
    
    beginShape(); 
    for (var x = -30; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height)+100;
        
        //draws the wavey terrain background 
        vertex(0,height);
        vertex(width/2, height);
        vertex(width, height);
        vertex(x, y); 

        //index the values for access
        terrainmapx[x]=x; 
        terrainmapy[x]= y;

    }
    endShape();
    //specifications of drawing future items
    stroke(100);
    rectMode(CENTER);
    //when the array gets too full erase the old values
    for (i = 0; i < terrainmapx.length; i+=1) {
    	if(terrainmapx.length > 700) {
        	terrainmapx.pop();
        	terrainmapy.pop();
        }
       	
       	//draws the highway
        stroke(50);
        fill(50);
        rect(i, terrainmapy[i]-65,30,110); 
        fill(100);
        stroke(100);
        rect(i, terrainmapy[i],30,20);
        rect(i, terrainmapy[i]-130,20,20);



    }
    //draws the while center line of the highway
    for (i = 0; i < width+55; i += 50) {
    	fill(240);
    	rect(i+20, terrainmapy[i]-60, 30, 7);
    }
    //calls functions for the car
    DisplaynUpdateCars();
    addCarWithSomeRandomProbability();
    
    //draw the car going right that stays on the canvas
    push();
    translate(150, terrainmapy[150]-30);
    rotate(degrees((atan2(terrainmapy[640]-terrainmapy[150]-30,640-150))+360%360))
    fill(250,240,95,80);
    noStroke();
    triangle(15,0,100,40,100,-40);
    fill(0);
    rect(0,0, 60, 30);
    fill(240,0,0);
    rect(0,0, 30, 30);
    pop()
    

    //draws the moon
    fill(250,240,95);
    ellipse(50, terrainmapy[50]-300, 50,50);
    fill(0);
    ellipse(62, terrainmapy[50]-300, 30,30);

    //draws the raindrops
    for (var y = 5; y <= 480; y+=20) {
		for (var x = 5; x <= 640; x += 10) {
			stroke(0,40,50,80);
			line(x,y,x,y+random(0,20));
		}
	}
    
}

function carMove() {
	//updates the speed and location of the car
	if (oldspeed > this.speed) {
		this.speed = this.speed+ 10;
	}
	var oldspeed = this.speed;
	this.x += this.speed;


}

function DisplaynUpdateCars() {
	//calls the display and update function
	for (var i = 0; i < cars.length; i++) {
		cars[i].display();
		cars[i].move();
	}
}

function carsDisplay() {
	//draws the car itself
	noStroke();
	var heighty= terrainmapy[round(this.x)];
	
	push();

	for (i=0; i<10; i++) {
		fill(250,240,95,10);
		triangle(this.x, heighty-85, this.x-this.sizeX, heighty-85-40,this.x-this.sizeX,heighty-85+40);
		fill(this.colory,100,100);
		rect(this.x, heighty-85, this.sizeX, this.sizeX/2);
		push();
		fill(200);
		rect(this.x, heighty-85, this.sizeX/2, this.sizeX/2);
		pop()
	}
	
	pop();
	
}




function addCarWithSomeRandomProbability() {
	//probability of a car increases over time, which guarentees 
	//that there won't be too long of a gap between cars
    dec += 1;
    if (random(0,1) < dec/500) {
        cars.push(makeCar(width));
        dec = 0;
    }
}

function makeCar(birthLocationX) {
	//specifications of the car
	var car = {x: birthLocationX,
		sizeX: random(60,120),
		colory: random(250),
		speed: random(-20,-15),
		move: carMove,
		display: carsDisplay


	}
	return car;
}

I wanted to make a program that draws on uniquely created terrain, so I studied the way of using noise to create new terrain. Then I made it such that the terrain appears to be smooth and wavy. I indexed the values for later use, and made it such that it disappears when reaching a certain limit- This helped improve the speed of the animation and reduced the need for indexing the x value. I then made it such that random cars appear on both sides, but it looked unrealistic (physics wise) so I made one car stay in the same spot. To make things more moody, I changed it to a night-setting with transparent headlights, a moon and the rain. One problem that I had was that sometimes, the car would overlap when initially starting out, and I tried to go around this problem by changing the range of the speed and adding a counter to the probability of making a new car. I really liked how this project turned out and it taught me well about object programming.

Multiverse by fuse*

This week I’ve decided to do a peer review of a Han Yu’s looking outward’s post. I found a post that is very interesting and it contains a project that immediately drew my attention. It is a art installation that has heavy usage of both visuals and sounds by a company called fuse*. The project is representative of the vastness of the multiverse that is infinite and always going through the cycle of life- that is, the birthing and the dying of the universe. Personally, I thought that the project was very engaging as an artform that encourages the audience to fall into deep thought. It really showed the immenseness of the universe with huge displays with patterns that never repeats itself. I thought that the experience of the project could have been improved had the screen been wider horizontally (like a room) and had different noises that blend with the visual display- or had other features such as user interation. Otherwise the I would have to agree with the poster about the influence that it has on the viewer- it really does give a sense of the infinite possibility of life. Overall, it was a super unique project with very good execution.

Link to Original Work: https://courses.ideate.cmu.edu/15-104/f2018/2018/09/18/han-yu-looking-outwards-04/
Creator’s name: fuse*
Created in 2018 in Italy

Image gets clearer over time!

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 9
*/

var img; //sets the variable for the image to go into

//loads the image into the program
function preload() {
    img = loadImage("https://i.imgur.com/kt8Qs81.jpg");
    
}

function setup() {
    createCanvas(365, 480);
    background(250);
    //loads the pixels and sets the frame rate
    img.loadPixels();
    frameRate(10000000)
    
}

var dec = 0 //variable in which the decrease the size
var increment = 0.01 // the rate of decreasing
var scaley = 0.2 //scales the image

function draw() {
	//variable that moves the pixels
	var randaddx= random(200)
	var randaddy= random(200)
	//variable that determiens the size of pixels
	var randsize = random(30-dec)
	
	//scales the image down
    scale(scaley,scaley)
    noStroke()
    //draws starting points on canvas
    for (i = 0; i < height*1/scaley; i += 100) {
    	for (x = 0; x < width*1/scaley; x += 100) {
    		//finds the color
    		var c = img.get(x+randaddx, i+randaddy);
    		//sets pixel = to color
    		fill(c);	
    		//draws the pixels
    		rect(x+randaddx,i+randaddy,randsize,randsize)
    	}
    } 
    //makes it so that image gets more clear over time
    dec += increment
    if (dec > 25) {
    	increment =0 
    }
    
}

I wanted my pixel portrait to load fast and be rather accurate, so I used for loops to draws initial starting points of the canvas then used random values to move the points in order to draw the canvas. Initially, I increased the for loop variables by a low number of 20, which resulted in the picture loading too fast and too accurately, which defeated the point of the pixel art. So I set up a parameter where the size of the pixels decreased over time. This way there are less gap points (because the starting size is big) and adds an interesting layer to the whole piece.

Process:

Eyeo 2014 – Lauren McCarthy from Eyeo Festival on Vimeo.

Speech from Lauren McCarthy

The speaker that I would like to discuss about today is Lauren McCarthy. She from New York city (currently based in Los Angelos) and is an artist and programmer. She is esteemed in the sense of programming because she was the person that developed P5js, which is the website that we use in class to learn various part of javascript. Her motto is “I make art that confuses me.” The statement makes me wonder a lot, because it kind of dives into the idea of what the purpose of art is. Is art merely there to look pleasing? Is it to make us think? Is it to invoke feelings?
She considers herself a more of a hacker than a people’s person, meaning that she has more of a ease at dealing with computers than fitting in to the norm, so to speak. Therefore she focuses a lot on in relationship between people and machines/devices in her body of work. A lot of the projects that she makes are related to how can technology make a person, more human?
Some of her artwork include: Happiness hat, anti-daydreaming device, body-contact training suit, and conversacube. These all focus on different aspects of what it mean to be human and sees to how it can help improve a person’s aptitude in that. I admire the happiness hat the most out of her artwork, because it makes one think, what does it really mean to be more human? Does simply emulating the behaviors of a refined human make someone more human? In a way, I differ in view from what the projects are trying to portray, because I think that the purpose/place it’s coming from is way more important than action itself. Meaning, just because I smile for the sake of smiling doesn’t make me more human. The smile should come from the desire to make someone else happier or to display how someone else is making me feel.
She presents her artwork by tying different stories and thoughts together with the project, instead of simply presenting them in an orderly manner. I think that this helps illustrate her main purpose and the purpose of the devices she creates. I think that by tying stories to how I present, I can more deeply engage the audience and such.

Website of artist: http://lauren-mccarthy.com/
Video of happiness hat is included in the embedded video.