![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
Project Description & Instructions Below!!
// Name: Rachel Park
// Andrew ID: rjpark
// 15-104 Section C
var i;
var currentkey = 'c';
var choreography = [];
var contemporary = [];
var groovy = [];
var footwork = [];
var isolation = [];
var pretty = [];
var swaggySassy = [];
var tutting = [];
var wavesWacking = [];
function preload() {
// database of dance moves
// loading the videos
contemporary = ['C1.MOV', 'C2.MOV', 'C3.MOV', 'C4.MOV', 'C5.MOV',
'C6.MOV', 'C7.MOV', 'C8.MOV', 'C9.MOV', 'C10.MOV', 'C11.MOV', 'C12.MOV',
'C13.MOV', 'C14.MOV', 'C15.MOV', 'C16.MOV', 'C17.MOV', 'C18.MOV',
'C19.MOV', 'C20.MOV', 'C21.MOV', 'C22.MOV', 'C23.MOV', 'C24.MOV',
'C25.MOV', 'C26.MOV', 'C27.MOV', 'C28.MOV', 'C29.MOV', 'C30.MOV',
'C31.MOV', 'C32.MOV', 'C33.MOV', 'C34.MOV', 'C35.MOV', 'C36.MOV',
'C37.MOV', 'C38.MOV',];
for (var j = 0; j < contemporary.length; j ++) {
contemporary[j] = './Moves/C/' + contemporary[j];
}
groovy = ['G1.MOV', 'G2.MOV', 'G3.MOV', 'G4.MOV', 'G5.MOV', 'G6.MOV',
'G7.MOV', 'G8.MOV', 'G9.MOV', 'G10.MOV', 'G11.MOV', 'G12.MOV',
'G13.MOV', 'G14.MOV'];
for (var j = 0; j < groovy.length; j ++) {
groovy[j] = './Moves/G/' + groovy[j];
}
footwork = ['F1.MOV', 'F2.MOV', 'F3.MOV', 'F4.MOV', 'F5.MOV', 'F6.MOV',
'F7.MOV', 'F8.MOV', 'F9.MOV', 'F10.MOV', 'F11.MOV', 'F12.MOV',
'F13.MOV', 'F14.MOV', 'F15.MOV', 'F16.MOV', 'F17.MOV', 'F18.MOV',
'F19.MOV', 'F20.MOV', 'F21.MOV'];
for (var j = 0; j < footwork.length; j ++) {
footwork[j] = './Moves/F/' + footwork[j];
}
isolation = ['I1.MOV', 'I2.MOV', 'I3.MOV','I4.MOV', 'I5.MOV', 'I6.MOV',
'I7.MOV', 'I8.MOV', 'I9.MOV', 'I10.MOV', 'I11.MOV', 'I12.MOV',
'I13.MOV', 'I14.MOV', 'I15.MOV', 'I16.MOV', 'I17.MOV', 'I18.MOV',
'I19.MOV', 'I20.MOV', 'I21.MOV', 'I22.MOV', 'I23.MOV', 'I24.MOV',
'I25.MOV', 'I26.MOV', 'I27.MOV', 'I28.MOV', 'I29.MOV', 'I30.MOV',
'I31.MOV', 'I32.MOV', 'I33.MOV', 'I34.MOV', 'I35.MOV'];
for (var j = 0; j < isolation.length; j ++) {
isolation[j] = './Moves/I/' + isolation[j];
}
pretty = ['P1.MOV', 'P2.MOV', 'P3.MOV', 'P4.MOV', 'P5.MOV', 'P6.MOV',
'P7.MOV', 'P8.MOV', 'P9.MOV', 'P10.MOV', 'P11.MOV', 'P12.MOV',
'P13.MOV', 'P14.MOV', 'P15.MOV', 'P16.MOV', 'P17.MOV', 'P18.MOV',
'P19.MOV', 'P20.MOV', 'P21.MOV', 'P22.MOV', 'P23.MOV', 'P24.MOV',
'P25.MOV', 'P26.MOV', 'P27.MOV', 'P28.MOV', 'P29.MOV'];
for (var j = 0; j < pretty.length; j ++) {
pretty[j] = './Moves/P/' + pretty[j];
}
swaggySassy = ['S1.MOV', 'S2.MOV', 'S3.MOV', 'S4.MOV', 'S5.MOV', 'S6.MOV',
'S7.MOV', 'S8.MOV', 'S9.MOV', 'S10.MOV', 'S11.MOV','S12.MOV', 'S13.MOV',
'S14.MOV', 'S15.MOV', 'S16.MOV', 'S17.MOV', 'S18.MOV', 'S19.MOV',
'S20.MOV', 'S21.MOV', 'S22.MOV', 'S23.MOV', 'S24.MOV', 'S25.MOV',
'S26.MOV', 'S27.MOV', 'S28.MOV', 'S29.MOV', 'S30.MOV', 'S31.MOV',
'S32.MOV'];
for (var j = 0; j < swaggySassy.length; j ++) {
swaggySassy[j] = './Moves/S/' + swaggySassy[j];
}
tutting = ['T1.MOV', 'T2.MOV', 'T3.MOV', 'T4.MOV', 'T5.MOV', 'T6.MOV',
'T7.MOV', 'T8.MOV', 'T9.MOV', 'T10.MOV', 'T11.MOV', 'T12.MOV',
'T13.MOV', 'T14.MOV', 'T15.MOV', 'T16.MOV', 'T17.MOV', 'T18.MOV',
'T19.MOV', 'T20.MOV', 'T21.MOV', 'T22.MOV', 'T23.MOV', 'T24.MOV',
'T25.MOV', 'T26.MOV', 'T27.MOV', 'T28.MOV', 'T29.MOV', 'T30.MOV',
'T31.MOV', 'T32.MOV', 'T33.MOV', 'T34.MOV', 'T35.MOV', 'T36.MOV',
'T37.MOV', 'T38.MOV'];
for (var j = 0; j < tutting.length; j ++) {
tutting[j] = './Moves/T/' + tutting[j];
}
wavesWacking = ['W1.MOV', 'W2.MOV', 'W3.MOV', 'W4.MOV', 'W5.MOV', 'W6.MOV',
'W7.MOV', 'W8.MOV', 'W9.MOV', 'W10.MOV', 'W11.MOV', 'W12.MOV',
'W13.MOV'];
for (var j = 0; j < wavesWacking.length; j ++) {
wavesWacking[j] = './Moves/W/' + wavesWacking[j];
}
}
function setup() {
createCanvas(700, 355);
background(0);
fill(255);
noStroke();
rect(600, 0, 100, 355);
}
function draw() {
// title
fill("pink");
stroke(0);
strokeWeight(3);
textAlign(CENTER);
textSize(30);
text("Make Your Own Choreography!!", 300, 45);
// box for reference
fill(255);
stroke("pink");
strokeWeight(3);
rectMode(CENTER);
rect(85, 170, 120, 140);
// text in reference box
fill(0);
noStroke();
textAlign(CENTER);
textSize(12);
text("c = contemporary", 85, 117);
text("f = footwork", 85, 133);
text("g = groovy", 85, 149);
text("i = isolation", 85, 165);
text("p = pretty/feminine", 85, 181);
text("s = swaggy/sassy", 85, 197);
text("t = tutting", 85, 213);
text("w = wavy/wacking", 85, 229);
fill(255);
stroke(0);
strokeWeight(1);
text("Letter Key Chart", 85, 90);
// box for which letter key is pressed
fill(255);
stroke("pink");
strokeWeight(3);
rectMode(CENTER);
rect(205, 127, 55, 55);
// display the letter key that's pressed
fill(0);
noStroke();
textAlign(CENTER);
textSize(40);
text(currentkey, 205, 140);
fill(255);
stroke(0);
strokeWeight(1);
textSize(12);
text("Last Key Pressed", 205, 90);
// box for play button
fill(255);
stroke("pink");
strokeWeight(3);
rectMode(CENTER);
rect(205, 213, 55, 55);
// display the play sign
fill(0);
noStroke();
triangle(195, 200, 195, 230, 220, 215);
fill(255);
stroke(0);
strokeWeight(1);
textSize(12);
text("Play Button", 205, 175);
// box for instructions
fill(255);
stroke("pink");
strokeWeight(3);
rectMode(CENTER);
rect(400, 170, 260, 140);
// text in instructions box
fill(0);
noStroke();
textAlign(LEFT);
textSize(10);
text("1. Look at the letter key chart & choose a letter to press",
280, 115);
text("2. Press the letter key (displayed in the box to the right)",
280, 134);
text("3. Keep pressing desired letter keys", 280, 153);
text("4. When finished pressing letter keys, click the play", 280, 172);
text("button to watch your choreography", 280, 191);
text("5. Repeat steps 1-4 to keep adding to choreography", 280, 210);
text("6. Refresh page to start over", 280, 229)
fill(255);
stroke(0);
strokeWeight(1);
textAlign(CENTER);
textSize(12);
text("Instructions", 400, 90);
// side note & credit/shoutout to dancers
fill(255);
stroke(0);
strokeWeight(1);
textAlign(LEFT);
textSize(10);
text("** The objective of this project is to help you create a sequence" +
"of dance moves (choreography) that can be adjusted", 30, 280);
text("and modified to match a song you choose when actually" +
"choreographing.", 30, 295);
text("** Also, shoutout to the featured dancers (by letter key chart);" +
"Léann Bahi, Elizabeth Kuo, Jackie Jiang, Chris Shon,", 30, 320);
text("Maggie Lyu, Emily Wu, Newton Xie, and Yuyan Sun.", 30, 335);
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
function keyTyped() {
document.getElementById("danceVideo").muted = true;
// assigning pressed keys to a dance move video
// playing that dance move video
// adding each dance move video into a new array called choreography
if (key === 'c') {
currentkey = key;
i = getRandomInt(0, contemporary.length);
choreography.push(contemporary[i]);
document.getElementById("video").src = str(contemporary[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 'g') {
currentkey = key;
i = getRandomInt(0, groovy.length);
choreography.push(groovy[i]);
document.getElementById("video").src = str(groovy[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 'f') {
currentkey = key;
i = getRandomInt(0, footwork.length);
choreography.push(footwork[i]);
document.getElementById("video").src = str(footwork[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 'i') {
currentkey = key;
i = getRandomInt(0, isolation.length);
choreography.push(isolation[i]);
document.getElementById("video").src = str(isolation[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 'p') {
currentkey = key;
i = getRandomInt(0, pretty.length);
choreography.push(pretty[i]);
document.getElementById("video").src = str(pretty[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 's') {
currentkey = key;
i = getRandomInt(0, swaggySassy.length);
choreography.push(swaggySassy[i]);
document.getElementById("video").src = str(swaggySassy[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 't') {
currentkey = key;
i = getRandomInt(0, tutting.length);
choreography.push(tutting[i]);
document.getElementById("video").src = str(tutting[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
if (key === 'w') {
currentkey = key;
i = getRandomInt(0, wavesWacking.length);
choreography.push(wavesWacking[i]);
document.getElementById("video").src = str(wavesWacking[i]);
document.getElementById("danceVideo").load();
document.getElementById("danceVideo").play();
}
}
function mouseClicked() {
// plays through all videos in choreography array
var nextVideos = function(i) {
document.getElementById('video').src = choreography[i];
var videoElement = document.getElementById('danceVideo');
videoElement.load();
videoElement.play();
// checks to see if there are videos left to play (i < array length)
// checks to see if current video has ended to play next video in array
if (i < choreography.length) {
videoElement.onended = function() {
nextVideos(i + 1);
}
}
}
// clicking the play button will play back entire choreography
if (mouseX > 205 - (55 / 2) & mouseX < 205 + (55 / 2)) {
if (mouseY > 213 - (55 / 2) && mouseY < 213 + (55 / 2)) {
nextVideos(0);
}
}
}Statement
As stated in my final project proposal, I wanted to create something that was going to be personally interesting to me. So, I decided to create a visual and interactive computer keyboard dance generator. The objective of my project was to allow the user to compile a bunch of dance moves that are generated based off of the letter key that they pressed. This would help the user create their own choreography that can be adjusted and modified to fit a song they choose when they actually choreograph.
In order to create this, I had to collect a database of dance moves. So, I recorded various dancers on campus dancing in a specific dance style, and, from this, I gathered videos of 220 unique dance moves. Once I collected my videos, I loaded them into code and assigned specific dancers/dance style to different arrays. Next, I essentially paired certain letter keys to arrays so that, when the user presses a letter key, a random dance video (dance move) from the paired array would play. In addition, as the user presses a letter key, the corresponding dance videos are added to a “choreography” array which contains the entire choreography that the user makes and can be played by pressing the play button at the end.
My greatest struggle with this project was getting all the videos in the “choreography” array to play in succession. I had to do a lot of outside research to figure out how to see if one video has ended in the array for another one to start. I used document.getElementById().src, load, play, and onended to make this happen.
Below is a screenshot of what the project looks like as well as instructions on how to install and run it.
Screenshots
** can’t show the interactiveness of the project through screenshots; click the link below and follow instructions to use it!
Instructions
- Press the link below (you will only get access with CMU Andrew email).
- Download the file (it is safe to download & it will take a while).
- Open the folder Final Project.
- Open the index.html file.
- Read the instructions on the web page to play!