click around to learn about me and my art, and thank you for stopping by!
Using p5.js, I created a simple dress-up game in which you can mix and match different outfits and expressions with the blank doll. Before clicking, center your cursor to your desired placement of the image. Press "x" to clear your selection and press "p" to save a copy of your masterpiece! Have fun, and here are the keyboard keys to get started:
b: black sneakers | w: white sneakers
1: dark high-waisted pants | 2: light pants | 3: shorts
4: black crop tee | 5: purple crop tee | 6: yellow crop tee
7: denim jacket | 8: yellow polka dot sweater | 9: ice blue puffy jacket
s: smile expression | j: judging expression | t: tongue out expression
Here is the code for the dress-up game:
var img;
var bg;
var initials ='dsj'; // your initials
var choice = '1'; // starting choice, so it is not empty
var screenbg = 250; // off white background
var lastscreenshot=61; // last screenshot never taken1
var canvaswidth=600;
var canvasheight=600;
function preload() {
// preload() runs once, it may make you wait
// img = loadImage('cat.jpg'); // cat.jpg needs to be next to this .js file
// you can link to an image on your github account
bg = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/bg.png');
img_bg = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/bg.png');
img_darkpants = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/darkpants.png');
img_lightpants = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/lightpants.png');
img_shorts = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/shorts.png');
img_blackshirt = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/blackshirt.png');
img_purpleshirt = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/purpleshirt.png');
img_yellowshirt = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/yellowshirt.png');
img_denimjacket = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/denimjacket.png');
img_yellowjacket = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/yellowjacket.png');
img_puffyjacket = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/puffyjacket.png');
img_blackshoes = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/blackshoes.png');
img_whiteshoes = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/whiteshoes.png');
img_smile = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/smile.png');
img_girrl = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/girrl.png');
img_tongueout = loadImage('https://danielle-jalotjot.github.io/DSJ.Portfolio/tongueout.png');
}
function setup() {
createCanvas(canvaswidth, canvasheight); // canvas size
background(screenbg); // use our background screen color
background(bg);
}
function draw() {
// background(bg);
if (keyIsPressed) {
choice = key; // set choice to the key that was pressed
clear_print(); // check to see if it is clear screen or save image
}
if (mouseIsPressed){
newkeyChoice(choice); // if the mouse is pressed call newkeyChoice
}
}
function newkeyChoice(toolChoice) { //toolchoice is the key that was pressed
// the key mapping if statements that you can change to do anything you want.
// just make sure each key option has the a stroke or fill and then what type of
// graphic function
if (toolChoice == '1' ) { // first tool
image(img_darkpants,mouseX-300, mouseY-300, 600, 600);
} else if (toolChoice == '2') { // second tool
image(img_lightpants, mouseX-300, mouseY-300, 600, 600);
} else if (toolChoice == '3') { // third tool
image(img_shorts, mouseX-300, mouseY-300, 600, 600);
} else if (toolChoice == '4') {
image(img_blackshirt, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == '5') {
image(img_purpleshirt, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == '6') {
image(img_yellowshirt, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == '7') {
image(img_denimjacket, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == '8') {
image(img_yellowjacket, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == '9') {
image(img_puffyjacket, mouseX-300, mouseY-180, 600, 600);
} else if (toolChoice == 'b') {
image(img_blackshoes, mouseX-300, mouseY-510, 600, 600);
} else if (toolChoice == 'w') {
image(img_whiteshoes, mouseX-300, mouseY-510, 600, 600);
} else if (toolChoice == 's') {
image(img_smile, mouseX-295, mouseY-75, 600, 600);
} else if (toolChoice == 'j') {
image(img_girrl, mouseX-295, mouseY-75, 600, 600);
} else if (toolChoice == 't') {
image(img_tongueout, mouseX-295, mouseY-75, 600, 600);
} else if (toolChoice == 'w') {
fill(300, 100, 0, 80);
rect(mouseX, mouseY, 40, 40);
} else if (toolChoice == '0') {
stroke(0, 0);
fill(random(255), random(255), random(255), random(255));
rect(mouseX, mouseY, 200, 150);
}
}
function clear_print() {
// this will do one of two things, x clears the screen by resetting the background
// p calls the routine saveme, which saves a copy of the screen
if (key == 'x' || key == 'X') {
background(screenbg); // set the screen back to the background color
background(bg);
} else if (key == 'p' || key == 'P') {
saveme(); // call saveme which saves an image of the screen
}
}
function saveme(){
//this will save the name as the intials, date, time and a millis counting number.
// it will always be larger in value then the last one.
filename=initials+day() + hour() + minute() +second();
if (second()!=lastscreenshot) { // don't take a screenshot if you just took one
saveCanvas(filename, 'jpg');
}
lastscreenshot=second(); // set this to the current second so no more than one per second
}