For my project I made an interactive character that responds to 3 prompts. Because my major interest in animation is 2D animation, I really enjoyed the walking assignment we did with the walking frames and getting the character to walk and follow the mouse. I wanted to base my project on that assignment so I drew the image frames and animated them using code. The character is Lance from Voltron: Legendary Defender which is a Netflix only series that I watched over the summer and really enjoyed :).

sketch

var waveFrames = [];
var laughFrames = [];
var complimentFrames = [];
var currentwaveFrame = 0;
var currentlaughFrame = 0;
var currentcomplimentFrame = 0;
var startIMG;
var waveImages;
var laughImages;
var complimentImages;


function preload(){

	startIMG = loadImage("http://i.imgur.com/mALMPDf.jpg");


	waveImages = [];
	waveImages[0] = ('http://i.imgur.com/oQGI281.jpg');
	waveImages[1] = ('http://i.imgur.com/1NBmtWx.jpg');
	waveImages[2] = ('http://i.imgur.com/EZx2syw.jpg');
	waveImages[3] = ('http://i.imgur.com/nA7ZuKG.jpg');

	for(var i = 0; i<4; i++) {
		waveFrames[i] = loadImage(waveImages[i]);
	}			
	

	laughImages = [];
	laughImages[0] = ('http://i.imgur.com/CWnkxF8.jpg');
	laughImages[1] = ('http://i.imgur.com/0i6DQam.jpg');
	laughImages[2] = ('http://i.imgur.com/CWnkxF8.jpg');

	for (var l = 0; l<3; l++){
		laughFrames[l] = loadImage(laughImages[l]);
	}

	complimentImages = [];
	complimentImages[0] = ('http://i.imgur.com/odBxDz4.jpg');
	complimentImages[1] = ('http://i.imgur.com/9zZDtl2.jpg');
	complimentImages[2] = ('http://i.imgur.com/odBxDz4.jpg');

	for (var h = 0; h<3; h++){
		complimentFrames[h] = loadImage(complimentImages[h]);
	}

}

function setup() {
    createCanvas(600, 600);
    frameRate(8);

    
   
}   

function draw() {

	image(startIMG,0,0,600,600);

	currentwaveFrame = currentwaveFrame + 1;
	if (currentwaveFrame > 3) {
		currentwaveFrame = currentwaveFrame - 3;
	}

	if (keyIsPressed) {
		if ((key == 'h') || (key == "H")) {
			
			image(waveFrames[currentwaveFrame],0,0,600,600);
			
			
		}

	}
	
	currentlaughFrame = currentlaughFrame + 1;
	if (currentlaughFrame > 2) {
		currentlaughFrame = currentlaughFrame - 2;
	}

	if (keyIsPressed) {
		if ((key == 'l') || (key == "L")) {
			
			image(laughFrames[currentlaughFrame],0,0,600,600);
			
			
		}
	}

	currentcomplimentFrame = currentcomplimentFrame + 1;
	if (currentcomplimentFrame > 2) {
		currentcomplimentFrame = currentcomplimentFrame - 2;
	}

	if (keyIsPressed) {
		if ((key == 'c') || (key == "C")) {
			
			image(complimentFrames[currentlaughFrame],0,0,600,600);
			
			
		}
	}


}

For my project, I want to create an interactive character (that I’ll draw the frames for), and animate him to respond to certain typed commands (the goal here being at least 3).

I don’t have the character drawn yet, but I quickly did a skeleton with the key of commands to the left just to give a general idea.

If I typed “Hi” , the character would wave, if I typed “Joke” the character would laugh etc. How I plan to do this is by using conditionals that will load and display certain images based on the typed command (or keys pressed). Think of the walking animation assignment, except instead of walking for the animation and mouse clicks for the interaction, it’d be three different actions based on what you type.

The two people I’ve chosen for this week are Angela Washko and Porpentine. Their projects are both interactive video games, The Game: The Game (Angele Washko) and Witch Egg (Porpentine). I’m a fan of interactive games like these, which is why I wanted to make my final project a sort of interactive game/program as well.

The first game, “The Game: The Game” is an interactive dating sim (or dating simulation) where you are given a list of choices for each event, that I assume furthers the date you are on with the character you’ve picked.

Here are some still images from the game.

The second game, Witch Egg, is also an interactive game where events happen based on the choices you make. This game is focused more on raising an egg, so for the sake of this post I tried playing the game.

This is the description of my egg at the start of the game:

I tried picking some of the options to advance my egg’s level:

After doing some more quests I managed to evolve my egg and got this:

I have no clue what any of this means.

HOWEVER, both of these games are relevant to what I want to do for my final project. Both have a lot to do with user-program interaction, and choices you make affect what happens in the game. My project is more close related to the Witch Egg game, especially since the game gives you the option of talking to your egg, which I did (I’m the Witch):

Since my project is to have an interactive character you can “talk” to, I found this project to be relevant to my final project.

sketch

var spacing;
var turtle;

function setup() {
  createCanvas(600,400);
    background(0);
    var turtle = makeTurtle(width/2,height/2);
    spacing = 2;
    turtle.setColor('Pink'); //Changing colour of hexagons to yellow
        
   for(var i = 0; i <100; i++){
   turtle.right;
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);

   turtle.left(72);
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);

   turtle.left(72);
   turtle.forward(5);
   
   turtle.right(144);
   turtle.forward(5);  

   turtle.left(72);
   turtle.forward(5);
    
   turtle.right(144);
   turtle.forward(5); 

   turtle.left(72);
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);


   turtle.right(60); //Rotating hexagon by the golden angle
    turtle.forward(); // Incrementing the distance
    }
}

function mousePressed(){
var turtle = makeTurtle(width/2,height/2);
turtle.setColor('Pink');
  if (spacing === 2){
    
  for(var i = 0; i <100; i++){
   turtle.right;
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);

   turtle.left(72);
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);

   turtle.left(72);
   turtle.forward(5);
   
   turtle.right(144);
   turtle.forward(5);  

   turtle.left(72);
   turtle.forward(5);
    
   turtle.right(144);
   turtle.forward(5); 

   turtle.left(72);
   turtle.forward(5);

   turtle.right(144);
   turtle.forward(5);


   turtle.right(60); //Rotating hexagon by the golden angle
    turtle.forward(random(i*spacing*10)); // Incrementing the distance
    }
}

  } 


      
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;}

It’s supposed to resemble those constellation diagrams, sort of like connect the dots in a way. Originally I had just planned to use the method from last week’s assignment B, but I decided to do this instead and make it interactive.

This weeks blog post is about a well known (and somewhat infamous) Japanese music synthesizer software known as Vocaloid. It was originally developed in 2000 by Kenmochi Hideki at the Pompeu Fabra University in Barcelona, Spain. The project, which was initially not intended for a widespread commercial release, was backed by the Yamaha Corporation. The software allows users to create songs and synthesize singing by typing in lyrics and a melody. The voices samples were provided by different actors and singers, and there are specific “characters” that have their own unique voice. The software has allowed for the creation of many different songs and projects by both independent and professional artists and composers, like Hachi, DECO27 and sasakure.UK to name a few.

How the software works is that you use the provided voice samples and libraries of sound and run them through the synthesizer. Here is a visual diagram of how the sounds and program work together. 

What this is really is that the voice samples are joined together in a sequence according to the lyrics and melody provided. To avoid clunky, disjointed singing, the vocaloid synthesizer tries to smooth out the sound waves as best it can to recreate a person singing. Vocaloid songs almost always sound robotic in nature however.

The vocaloid characters themselves have built up something of a fanbase on the internet, but for the sake of keeping this blog post short I won’t really go too much into that. Although there are vocaloids for other languages besides Japanese (like Korean, English and Spanish), the Japanese vocaloids tend to be used the most and the most popular.

Here is an example of a Vocaloid singing a song (in Japanese).

Vocaloid has inspired many creators (animators, artists, composers etc.) and a lot of songs usually have their own fanmade animated music videos (again in Japanese, you don’t have to watch the following is just provided as an example)

sketch
 

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project 10
var hills = [];
var clouds = [];
var blocks = [];
var pipes = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of hills
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        hills[i] = makeHill(rx);
    }


    for (var i = 0; i < 5; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 5; i++){
        var rx = random(width);
        blocks[i] = makeBlock(rx);
     }   

    for (var i = 0; i < 1; i++){
        var rx = random(width);
        pipes[i] = makePipe(rx);
     } 

    frameRate(20);
}


function draw() {
    background(112,166,255); 
    
    displayHorizon();

    updateAndDisplayHills();
    removeHillsThatHaveSlippedOutOfView();
    addNewHillsWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBlocks();
    removeBlocksThatHaveSlippedOutOfView();
    addNewBlocksWithSomeRandomProbability();

    updateAndDisplayPipes();
    removePipesThatHaveSlippedOutOfView();
    addNewPipesWithSomeRandomProbability();

    backgroundDesign();
}


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

function updateAndDisplayClouds(){
 
    for (var i = 0; i <clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}

function updateAndDisplayBlocks(){
 
    for (var i = 0; i < blocks.length; i++){
        blocks[i].move();
        blocks[i].display();
    }
}
function updateAndDisplayPipes(){
 
    for (var i = 0; i < pipes.length; i++){
        pipes[i].move();
        pipes[i].display();
    }
}

function removeHillsThatHaveSlippedOutOfView(){
    var hillsToKeep = [];
    for (var i = 0; i < hills.length; i++){
        if (hills[i].x + hills[i].breadth > 0) {
            hillsToKeep.push(hills[i]);
        }
    }
    hills = hillsToKeep; // remember the surviving buildings
}

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if(clouds[i].x + clouds[i].breadth > 0){
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function removeBlocksThatHaveSlippedOutOfView(){
    var blocksToKeep = [];
    for (var i = 0; i < blocks.length; i++){
        if(blocks[i].x + blocks[i].breadth > 0){
            blocksToKeep.push(blocks[i]);
        }
    }
    blocks = blocksToKeep;
}

function removePipesThatHaveSlippedOutOfView(){
    var pipesToKeep = [];
    for (var i = 0; i < pipes.length; i++){
        if(pipes[i].x + pipes[i].breadth > 0){
            pipesToKeep.push(pipes[i]);
        }
    }
    pipes = pipesToKeep;
}

function addNewHillsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newHillLikelihood = 0.007; 
    if (random(0,1) < newHillLikelihood) {
        hills.push(makeHill(width));
    }
}

function addNewCloudsWithSomeRandomProbability(){
    var newCloudLikelihood = 0.007;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


function addNewBlocksWithSomeRandomProbability(){
    var newBlockLikelihood = 0.007;
    if (random(0,1) < newBlockLikelihood) {
        blocks.push(makeBlock(width));
    }
}

function addNewPipesWithSomeRandomProbability(){
    var newPipeLikelihood = 0.002;
    if (random(0,1) < newPipeLikelihood) {
        pipes.push(makePipe(width));
    }
}


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

function cloudMove(){
    this.x += this.speed;
}

function blockMove(){
    this.x += this.speed;
}

function pipeMove(){
    this.x += this.speed;
}


// draw the building and some windows
function hillDisplay() {
    var floorHeight = 30;
    var hHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(255,213,48);
    stroke(255,175,48);
    ellipse(0, -hHeight, this.breadth+50, hHeight+100);
    
    pop();
}

function cloudDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(10,bHeight,this.breadth+100,bHeight/2);
    pop();

    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(30,-bHeight-200,this.breadth+100,bHeight/2);
    pop();



}

function blockDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(140,78,47);
    rect(30,-bHeight-100,30,30);
    pop();



}

function pipeDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(77,175,28);
    rect(30,-bHeight-50,50,70);
    rect(20,-bHeight-50,70,10);
    pop();



}


function backgroundDesign(){
    fill(120,224,60);
    noStroke();
    rect(0,350,600,50);


    fill(255,212,71);
    rect(0,370,600,50);

   }

function makeHill(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: hillMove,
                display: hillDisplay}
    return bldg;
}

function makeCloud(birthLocationX){

    var cloudV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(1,10)),
        move: cloudMove,
        display: cloudDisplay}
    return cloudV;
}

function makeBlock(birthLocationX){

    var blockV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(5,5)),
        move: blockMove,
        display: blockDisplay}
    return blockV;
}

function makePipe(birthLocationX) {
    var pipeV = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: pipeMove,
                display: pipeDisplay}
    return pipeV;
}


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

My project is just a remake of the first world in Super Mario. There are pipes, the basic hills in the background, clouds and item blocks.

This week’s post is about Mimi Son, co-founder of Kimchi and Chips, which is a Seoul based art studio. The project I chose is NICA, CARRY YOUR DREAMS, which was a launch of new handbags for the brand Nica in London in 2009. Kimchi and Chips designed and created an interactive wall to display the handbags. How it works is that visitors would remove bags from the wall, and the wall would display designs that looked and were influenced by the designs on the bag. The project uses light sensors, Arduino and VVVV.

Here is a video with more information on the project.

Mimi Son was born in Seoul, Korea. Her inspiration for creating came from watching her dad, who was both an artist and a musician. She was also fascinated with geometry and Buddhist philosophy. She completed a masters degree in Digital Media Art and Design at Middlesex University, and Interaction Design at CIID. She is now a professor at Ewha Womans University in Seoul.

Here is a link to her website.

Here is a photo of her and the co-founder, Elliot Woods.

sketch

var img;
var pixelSize = 5;
var pixelX;
var pixelY;
function preload(){
	img = loadImage("http://i.imgur.com/oTBE2k6.jpg");
	img.width = 600;
	img.height = 600;
	frameRate(200);

}

function setup() {
    createCanvas(600, 600);
    background(0);
    imageMode(CENTER);
    img.resize(600,600);
    img.loadPixels();

}

function draw() {

	noStroke();
	pixelX = floor(random(width));
	pixelY = floor(random(height));
	var pixelGET = img.get(pixelX,pixelY);

	fill(pixelGET,100);
	rect(pixelX,pixelY,5,5);


}

I used a photo of me, my twin sister and my younger brother from when we were younger. Here are some progress images:

Here is the final thing (or close to the final, there are still some gaps here and there):

This week, I decided to look at this post for my Looking Outward’s entry. There’s nothing I particularly disagree about in her post, as it relates to the Google Tilt Brush. Personally I think the Tilt Brush is impressive, and I like that there are multiplayer options so that you can use it with friends. I’ve noticed an increase in the amount of virtual reality software, and I guess it comes as no surprise that Google would hop on board with the trend. I myself am not too interested in virtual reality, but the idea itself is pretty creative and I admire the artistic capabilities. It was created in 2014, and is available on Steam and HTC Vive.

Here is a video with visuals of how the Tilt Brush works.

Here is a link to the website.

For this weeks Looking Outwards post, I’m going to write about Deray Mckesson and Samuel Sinyangwe. What’s funny is that I just randomly stumbled upon the video of this talk, but this isn’t actually the first time I’ve heard about Deray Mckesson. In fact, back when the Black Lives Matter movement was being stirred up on twitter because of Mike Brown, I happened to see some of Deray’s tweets and even followed him for a bit. I didn’t even recognise him at first until he posted the image of his tweets in the talk, and then I thought “oh wait I know this guy”.

Deray Mckesson is a civil rights activist, an active protester, and a member of the Black Lives Matter movement (of which I also actively support of course). He studied government and legal studies at Bowdoin College. Samuel Sinyanwe is also a civil rights and racial justice activist, graduating from Stanford where he studied race and how it intersects with politics, society and class. Samuel is also a member of the Black Lives Matter movement. Together they founded the project, “Mapping Police Violence”. For a more extensive biography on the two, you can go here.

Here is a link to the website.

What I admire the most about their work, is because it pertains to human rights. I’m actually very big on social justice and issues like these, was a member of my high school’s social justice and activism club and I helped to put on events that would spread awareness of issues like these. I think what these two are doing is admirable because a lot of the time people sweep issues like these under the rug because they have the privilege of it not affecting them. Mapping Police Violence is admirable because it raises awareness of the current issue of racially charged police violence in America. Looking at the figures and statistics kind of shoves in your face that there is an immediate problem, and denying the existence of these issues can’t work when the facts are right there.

How they present their work is by getting right to the heart of the matter and present the facts. Personally I think this is very effective. If I get into an argument with someone about the Black Lives Matter movement, for example (and this happens a lot more than I would like), I have somewhere to go where I can immediately just pull facts. People always ask for the facts, you can’t argue with someone or present a point without backing it up factually.

Here are some images from the Mapping Police Violence project website:

Here the eyeof video:

Some of their other projects besides Mapping Police Violence include:

Check The Police

Protesters Progress