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 :).
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);
}
}
}