I combined handdrawn assets from a previous project with walking sprite from Assignment 9 to create a scene of a person walking outside. The sketchy ‘handdrawn’ aesthetic of the assets combined with the layers scrolling at different speeds to create a sense of parallax. Occasionally, another character will pass by between the layer behind the main character.
sketch
var walkImage = []; // an array to store the images
var character;
var fgElem = [];
var mgElem = [];
var bgElem = [];
var pgElem = [];
var fg = [];
var mg = [];
var bg = [];
var pg = [];
function preload(){
// walk cycle
walkImage[0] = loadImage("https://imgur.com/8HlL26L");
walkImage[1] = loadImage("https://imgur.com/VLCqhEO");
walkImage[2] = loadImage("https://imgur.com/6rAVlb8");
walkImage[3] = loadImage("https://imgur.com/2VRJjQ6");
walkImage[4] = loadImage("https://imgur.com/zFCNtnG");
walkImage[5] = loadImage("https://imgur.com/AnyR09P");
walkImage[6] = loadImage("https://imgur.com/PMB0qDG");
walkImage[7] = loadImage("https://imgur.com/CiQWgmP");
//loading foreground
fgElem[0] = loadImage("https://imgur.com/RUYNCQT");
fgElem[1] = loadImage("https://imgur.com/UaNr8wZ");
fgElem[2] = loadImage("https://imgur.com/LsfvMCm");
fgElem[3] = loadImage("https://imgur.com/GRwR31R");
fgElem[4] = loadImage("https://imgur.com/xQtPjEQ");
fgElem[5] = loadImage("https://imgur.com/cTUW62y");
fgElem[6] = loadImage("https://imgur.com/cY58wgx");
//loading midground
mgElem[0] = loadImage("https://imgur.com/lal5lq9");
mgElem[1] = loadImage("https://imgur.com/c5fb0jp");
mgElem[2] = loadImage("https://imgur.com/kKwofLH");
mgElem[3] = loadImage("https://imgur.com/iN2MTZN");
mgElem[4] = loadImage("https://imgur.com/QclBuA8");
mgElem[5] = loadImage("https://imgur.com/IAaQ7Ta");
mgElem[6] = loadImage("https://imgur.com/g3xh1GG");
mgElem[7] = loadImage("https://imgur.com/LWmOUjc");
mgElem[8] = loadImage("https://imgur.com/xSvimmS");
//loading background
bgElem[0]= loadImage("https://imgur.com/8MNPtj6");
bgElem[1]= loadImage("https://imgur.com/4bjqW3c");
bgElem[2]= loadImage("https://imgur.com/q7xaqWr");
bgElem[3]= loadImage("https://imgur.com/gEnWbVW");
bgElem[4]= loadImage("https://imgur.com/0yBIPM8");
bgElem[5]= loadImage("https://imgur.com/6TYtEHn");
//loading clouds
pgElem[0] = loadImage("https://imgur.com/pdXo0gP");
pgElem[1] = loadImage("https://imgur.com/ohLIq5A");
pgElem[2] = loadImage("https://imgur.com/I9uzjJC");
pgElem[3] = loadImage("https://imgur.com/JYXlm2v");
}
function setup() {
createCanvas(400, 400);
background(202, 240, 248);
frameRate(12);
imageMode(CENTER);
character = makeCharacter(width/4, height*0.62, 0, 0);
surpriseChar = makeCharacter(-width*2.5, height*0.62, -5.5, 0);
var rand = 27;
//loading foreground
var x1 = random(1, width/4);
for (var i = 0; i<rand; i++){
var envChar = makeCharacter(x1, height*(0.63), 5.5, 0);
envChar.imageNum = int(random(0, fgElem.length));
x1 += random(width/(rand), (2*width)/rand);
fg.push(envChar);
}
//loading midground
var rand2 = 20;
var x2 = random(1, width);
for (var i = 0; i<rand2; i++){
var envChar = makeCharacter(x2, height*(0.59), 2.5, 0);
envChar.imageNum = int(random(0, mgElem.length));
envChar.size = random(0.1, 0.17);
mg.push(envChar);
x2 += random(width/4, width/2);
}
//loading background
var rand3 = 10;
var x3 = random(1, width);
for (var i = 0; i<rand3; i++){
var envChar = makeCharacter(x3, height*(0.4), 1, 0);
envChar.imageNum = int(random(0, bgElem.length));
x3 += random(width/6, width/3);
bg.push(envChar);
}
//loading clouds
var rand4 = 4;
var x4 = random(1, width*(2/3));
for (var i = 0; i<rand4; i++){
var y = random(height*0.05, height*0.4);
var envChar = makeCharacter(x4, y, 0.2, 0);
envChar.imageNum = int(random(0, pgElem.length));
envChar.size = random(0.1, 0.2);
pg.push(envChar);
x4 += random(width/3, width/2);
}
}
function draw() {
background(190, 225, 230);
push();
noStroke();
ellipseMode(CENTER);
fill(246, 241, 209, 90);
circle(width*0.75, height*0.17, width*0.27);
fill(244, 222, 44, 70);
circle(width*0.75, height*0.17, width*0.22);
fill(244, 222, 44, 120);
circle(width*0.75, height*0.17, width*0.17);
fill(243, 222, 44);
circle(width*0.75, height*0.17, width*0.12);
pop();
updateArray(pg, pgElem);
for (var i = 0; i<pg.length; i++){
pg[i].drawFunction(pgElem);
pg[i].moveFunction(pgElem);
}
updateArray(bg, bgElem);
for (var i = 0; i < bg.length; i++){
bg[i].drawFunction(bgElem);
bg[i].moveFunction(bgElem);
}
surpriseChar.drawFunction(walkImage);
surpriseChar.stepFunction(walkImage);
surpriseChar.moveFunction();
updateArray(mg, mgElem);
for (var i = 0; i < mg.length; i++){
mg[i].drawFunction(mgElem);
mg[i].moveFunction(mgElem);
}
character.drawFunction(walkImage);
character.stepFunction(walkImage);
updateArray(fg, fgElem);
for (var i = 0; i<fg.length; i++){
fg[i].drawFunction(fgElem);
fg[i].moveFunction(fgElem);
}
push();
noStroke();
fill(226, 208, 180);
rect(0, height*0.74, width, height);
pop();
}
// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
var c = {x: cx, y: cy, dx: cdx, dy: cdy,
walkingRight: true,
imageNum: 0,
stepFunction: stepCharacter,
drawFunction: drawCharacter,
moveFunction: moveCharacter
}
return c;
}
function stepCharacter(images){
this.imageNum ++;
this.imageNum = this.imageNum % images.length;
}
function moveCharacter(){
this.x -= this.dx;
if (this == surpriseChar & this.x > 200){
this.x = -width;
}
}
function drawCharacter(images){
if (images == fgElem){
push();
translate(this.x, this.y);
scale(0.1);
image(images[this.imageNum], this.x, this.y);
pop();
} else if (images == bgElem){
push();
translate(this.x, this.y);
scale(0.19);
image(images[this.imageNum], this.x, this.y);
pop();
} else if (images == mgElem){
push();
translate(this.x, this.y);
scale(0.18);
image(images[this.imageNum], this.x, this.y);
pop();
} else if (images == pgElem){
push();
translate(this.x, this.y);
scale(this.size);
image(images[this.imageNum], this.x, this.y);
pop();
} else {
if (this == surpriseChar){
push();
scale(-1, 1);
image(images[this.imageNum], this.x, this.y);
pop();
} else {
image(images[this.imageNum], this.x, this.y);
}
}
}
function updateArray(array, source){
for (var i = 0; i < array.length; i++){
elem = array[i];
if ((source == fgElem & elem.x < -10)||
(source != fgElem && elem.x < -100)){
elem.x = width + random(width/4, width);
elem.imageNum = int(random(0, source.length));
}
}
}