|
var main_canvas; |
|
var width_slider; |
|
var height_slider; |
|
var alpha_slider; |
|
|
|
var sel_mode; |
|
|
|
var canvasWidth = 960; |
|
var canvasHeight = 500; |
|
|
|
var savedValues = null; |
|
|
|
var initialDrawMode = "exhibition"; |
|
var curDrawMode; |
|
|
|
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; |
|
|
|
var soloCurLetter = "1"; |
|
var soloPrevObj = null; |
|
var soloIsAnimating = false; |
|
var soloNumAnimationFrames = 10; |
|
var soloCurAnimationFrame = 0; |
|
|
|
var chosenLetters = ["P", "A", "P", "E", "R"]; |
|
var chosenPrevObjs = ["P", "A", "P", "E", "R"]; |
|
var chosenIsAnimating = [false, false, false, false, false]; |
|
var chosenNumAnimationFrames = 10; |
|
var chosenCurAnimationFrame = [0, 0, 0, 0, 0]; |
|
var curChosenLetter = 0; |
|
|
|
var lastKeyPressedTime; |
|
var secondsUntilSwapMode = 5; |
|
var lastWordSwappedTime; |
|
var isSwappingWords = true; |
|
var secondsPerWord = 8; |
|
var curSwapWord = 0; |
|
|
|
var swapWords = [ |
|
"PAPER", |
|
"TWIST", |
|
"FAIRY", |
|
"SHARD", |
|
"DONUT", |
|
"CREPE", |
|
"SKUNK", |
|
"JUDGE", |
|
"DRAIN", |
|
"EXILE", |
|
"AMAZE", |
|
"ASTRO", |
|
"HEART", |
|
"QUEST", |
|
"RIVER", |
|
"BRAIN", |
|
"PLUCK" |
|
] |
|
|
|
function preload () { |
|
if (savedValues == null) { |
|
savedValues = loadJSON('alphabet.json'); |
|
} |
|
} |
|
|
|
function setup () { |
|
main_canvas = createCanvas(canvasWidth, canvasHeight); |
|
|
|
angleMode(DEGREES); |
|
|
|
var now = millis(); |
|
lastKeyPressedTime = now; |
|
lastWordSwappedTime = now - 1000 * (secondsPerWord - 1); |
|
|
|
width_slider = createSlider(1, 100, 23); |
|
height_slider = createSlider(-30, 30, 7); |
|
alpha_slider = createSlider(0, 400, 400); |
|
|
|
sel_mode = createSelect(); |
|
sel_mode.option("alphabet"); |
|
sel_mode.option("solo"); |
|
sel_mode.option("exhibition") |
|
sel_mode.changed(modeChangedEvent); |
|
sel_mode.value(initialDrawMode); |
|
curDrawMode = initialDrawMode; |
|
|
|
button = createButton('show data'); |
|
button.mousePressed(buttonPressedEvent); |
|
|
|
main_canvas.parent('canvasContainer'); |
|
width_slider.parent('slider15Container'); |
|
height_slider.parent('slider16Container'); |
|
alpha_slider.parent('slider23Container'); |
|
|
|
sel_mode.parent('modeContainer'); |
|
button.parent('buttonContainer'); |
|
} |
|
|
|
function buttonPressedEvent() { |
|
var obj = sliderToDataObject(); |
|
json = JSON.stringify(obj, null, 2); |
|
console.log(json); |
|
} |
|
|
|
function modeChangedEvent() { |
|
curDrawMode = sel_mode.value(); |
|
} |
|
|
|
var colorFront = [220, 187, 255]; |
|
var colorBack = [87, 82, 97]; |
|
var rotY = 0.0; |
|
var wd = 10; |
|
var xOffset = 16; |
|
var yOffset = 3; |
|
var a = 400; |
|
|
|
function draw () { |
|
background(colorBack); |
|
a = alpha_slider.value(); |
|
xOffset = width_slider.value(); |
|
yOffset = height_slider.value(); |
|
|
|
var o = 40 |
|
var w2 = width - 2 * o |
|
var h2 = height - 2 * o |
|
var cur_index = 0; |
|
var hw = (w2 / 9.0) / 2.0; |
|
var hh = (h2 / 4.0) / 2.0; |
|
|
|
if (curDrawMode == "exhibition") { |
|
now = millis(); |
|
if(!isSwappingWords && lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) { |
|
isSwappingWords = true; |
|
} |
|
|
|
if(isSwappingWords) { |
|
if(lastWordSwappedTime + 1000 * secondsPerWord < now) { |
|
lastWordSwappedTime = now; |
|
curSwapWord = (curSwapWord + 1) % swapWords.length; |
|
for(var i=0; i<5; i++) { |
|
var c = swapWords[curSwapWord][i]; |
|
swapExhibitLetter(i, c, i*15); |
|
} |
|
} |
|
} |
|
} |
|
|
|
if (curDrawMode == "alphabet") { |
|
for(var j=0; j<4; j++) { |
|
for(var i=0; i<9; i++) { |
|
var cur_letter = letters[cur_index]; |
|
var obj = savedValues[cur_letter]; |
|
drawFromObject(o + hw + i * w2/9.0, o - 50 + hh + j * h2/4.0, 0.40, obj) |
|
cur_index = cur_index + 1; |
|
} |
|
} |
|
} |
|
else if (curDrawMode == "solo") { |
|
|
|
if(soloIsAnimating && soloCurAnimationFrame >= (soloNumAnimationFrames*7)) { |
|
soloIsAnimating = false; |
|
} |
|
|
|
if(soloIsAnimating) { |
|
soloCurAnimationFrame = soloCurAnimationFrame + 1; |
|
} |
|
var obj = savedValues[soloCurLetter]; |
|
if (soloCurAnimationFrame <= 10) { |
|
obj = computeCurrentSoloChar(7, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 10) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame <= 20 && soloCurAnimationFrame > 10) { |
|
obj = computeCurrentSoloChar(6, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 20) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame <= 30 && soloCurAnimationFrame > 20) { |
|
obj = computeCurrentSoloChar(5, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 30) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame <= 40 && soloCurAnimationFrame > 30) { |
|
obj = computeCurrentSoloChar(4, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 40) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame <= 50 && soloCurAnimationFrame > 40) { |
|
obj = computeCurrentSoloChar(3, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 50) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame <= 60 && soloCurAnimationFrame > 50) { |
|
obj = computeCurrentSoloChar(2, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
if (soloCurAnimationFrame <= 60) { |
|
soloPrevObj = obj; |
|
} |
|
} |
|
if (soloCurAnimationFrame < 70 && soloCurAnimationFrame > 60) { |
|
obj = computeCurrentSoloChar(1, soloCurAnimationFrame%10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
} |
|
if (soloCurAnimationFrame >= 69) { |
|
obj = computeCurrentSoloChar(1, 10); |
|
drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj); |
|
} |
|
} |
|
else if (curDrawMode == "exhibition") { |
|
for(var i=0; i<5; i++) { |
|
|
|
if(chosenIsAnimating[i] && chosenCurAnimationFrame[i] >= (chosenNumAnimationFrames*7)) { |
|
chosenIsAnimating[i] = false; |
|
} |
|
|
|
if(chosenIsAnimating[i]) { |
|
chosenCurAnimationFrame[i] = chosenCurAnimationFrame[i] + 1; |
|
} |
|
|
|
var obj = savedValues[curChosenLetter]; |
|
if (chosenCurAnimationFrame[i] <= 10) { |
|
obj = computeCurrentChosenChar(7, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] <= 20 && chosenCurAnimationFrame[i] > 10) { |
|
obj = computeCurrentChosenChar(6, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] <= 30 && chosenCurAnimationFrame[i] > 20) { |
|
obj = computeCurrentChosenChar(5, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] <= 40 && chosenCurAnimationFrame[i] > 30) { |
|
obj = computeCurrentChosenChar(4, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] <= 50 && chosenCurAnimationFrame[i] > 40) { |
|
obj = computeCurrentChosenChar(3, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] <= 60 && chosenCurAnimationFrame[i] > 50) { |
|
obj = computeCurrentChosenChar(2, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
chosenPrevObjs[i] = obj; |
|
} |
|
if (chosenCurAnimationFrame[i] < 70 && chosenCurAnimationFrame[i] > 60) { |
|
obj = computeCurrentChosenChar(1, chosenCurAnimationFrame[i]%10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
} |
|
if (chosenCurAnimationFrame[i] >= 69) { |
|
obj = computeCurrentChosenChar(1, 10, i); |
|
drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj); |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
function drawFromObject (xPosition, yPosition, sz, obj) { |
|
push(); |
|
translate(xPosition, yPosition); |
|
scale(sz, sz); |
|
|
|
var highlight = color(255,200,200,a); |
|
var shadow = color(220, 120, 120, a); |
|
stroke(red(shadow)-30, green(shadow)-30, blue(shadow)-30); |
|
col1 = lerpColor(highlight, shadow, obj["box1"]["color"]); |
|
col2 = lerpColor(highlight, shadow, obj["box2"]["color"]); |
|
col3 = lerpColor(highlight, shadow, obj["box3"]["color"]); |
|
col4 = lerpColor(highlight, shadow, obj["box4"]["color"]); |
|
col5 = lerpColor(highlight, shadow, obj["box5"]["color"]); |
|
col6 = lerpColor(highlight, shadow, obj["box6"]["color"]); |
|
|
|
drawPart(obj["box1"]["xpos"], obj["box1"]["ypos"], obj["box2"]["xpos"], obj["box2"]["ypos"], col1, xOffset, yOffset); |
|
drawPart(obj["box2"]["xpos"], obj["box2"]["ypos"], obj["box3"]["xpos"], obj["box3"]["ypos"], col2, xOffset, yOffset); |
|
drawPart(obj["box3"]["xpos"], obj["box3"]["ypos"], obj["box4"]["xpos"], obj["box4"]["ypos"], col3, xOffset, yOffset); |
|
drawPart(obj["box4"]["xpos"], obj["box4"]["ypos"], obj["box5"]["xpos"], obj["box5"]["ypos"], col4, xOffset, yOffset); |
|
drawPart(obj["box5"]["xpos"], obj["box5"]["ypos"], obj["box6"]["xpos"], obj["box6"]["ypos"], col5, xOffset, yOffset); |
|
drawPart(obj["box6"]["xpos"], obj["box6"]["ypos"], obj["box7"]["xpos"], obj["box7"]["ypos"], col6, xOffset, yOffset); |
|
pop(); |
|
} |
|
|
|
function drawPart (xval1, yval1, xval2, yval2, col, xDiff, yDiff) { |
|
push(); |
|
beginShape(QUADS); |
|
fill(col); |
|
vertex(xval1 - xDiff, yval1 - yDiff); |
|
vertex(xval2 - xDiff, yval2 - yDiff); |
|
vertex(xval2 + xDiff, yval2 + yDiff); |
|
vertex(xval1 + xDiff, yval1 + yDiff); |
|
endShape(); |
|
pop(); |
|
} |
|
|
|
function swapExhibitLetter(n, c, frameDelay) { |
|
chosenPrevObjs[n] = computeCurrentChosenChar(0, 0, n); |
|
chosenLetters[n] = c; |
|
chosenIsAnimating[n] = true; |
|
chosenCurAnimationFrame[n] = 0 - frameDelay; |
|
} |
|
|
|
function computeCurrentChosenChar(partIndex, frameNum, n) { |
|
var obj; |
|
var indexes = [1,2,3,4,5,6,7]; |
|
var movingPart = partIndex; |
|
indexes.splice(partIndex-1, 1); |
|
|
|
if (chosenIsAnimating[n]) { |
|
if(chosenCurAnimationFrame[n] < 0) { |
|
obj = chosenPrevObjs[n]; |
|
} else { |
|
nextObj = savedValues[chosenLetters[n]]; |
|
|
|
obj = {}; |
|
for (var i = 0; i < 6; i++) { |
|
if (indexes[i] != 7) { |
|
obj["box"+indexes[i]] = {}; |
|
obj["box"+indexes[i]]["xpos"] = chosenPrevObjs[n]["box"+indexes[i]]["xpos"]; |
|
obj["box"+indexes[i]]["ypos"] = chosenPrevObjs[n]["box"+indexes[i]]["ypos"]; |
|
obj["box"+indexes[i]]["color"] = chosenPrevObjs[n]["box"+indexes[i]]["color"]; |
|
} else { |
|
obj["box"+indexes[i]] = {}; |
|
obj["box"+indexes[i]]["xpos"] = chosenPrevObjs[n]["box"+indexes[i]]["xpos"]; |
|
obj["box"+indexes[i]]["ypos"] = chosenPrevObjs[n]["box"+indexes[i]]["ypos"]; |
|
} |
|
} |
|
|
|
if (indexes[i] != 7) { |
|
obj["box"+movingPart] = {}; |
|
obj["box"+movingPart]["xpos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]); |
|
obj["box"+movingPart]["ypos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]); |
|
obj["box"+movingPart]["color"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["color"], nextObj["box"+movingPart]["color"]); |
|
} else { |
|
obj["box"+movingPart] = {}; |
|
obj["box"+movingPart]["xpos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]); |
|
obj["box"+movingPart]["ypos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]); |
|
} |
|
} |
|
} |
|
else { |
|
obj = savedValues[chosenLetters[n]]; |
|
} |
|
return obj; |
|
} |
|
|
|
function computeCurrentSoloChar(partIndex, frameNum) { |
|
var obj; |
|
var indexes = [1,2,3,4,5,6,7]; |
|
var movingPart = partIndex; |
|
indexes.splice(partIndex-1, 1); |
|
|
|
if (soloIsAnimating) { |
|
nextObj = savedValues[soloCurLetter]; |
|
obj = {}; |
|
for (var i = 0; i < 6; i++) { |
|
if (indexes[i] != 7) { |
|
obj["box"+indexes[i]] = {}; |
|
obj["box"+indexes[i]]["xpos"] = soloPrevObj["box"+indexes[i]]["xpos"]; |
|
obj["box"+indexes[i]]["ypos"] = soloPrevObj["box"+indexes[i]]["ypos"]; |
|
obj["box"+indexes[i]]["color"] = soloPrevObj["box"+indexes[i]]["color"]; |
|
} else { |
|
obj["box"+indexes[i]] = {}; |
|
obj["box"+indexes[i]]["xpos"] = soloPrevObj["box"+indexes[i]]["xpos"]; |
|
obj["box"+indexes[i]]["ypos"] = soloPrevObj["box"+indexes[i]]["ypos"]; |
|
} |
|
} |
|
|
|
if (indexes[i] != 7) { |
|
obj["box"+movingPart] = {}; |
|
obj["box"+movingPart]["xpos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]); |
|
obj["box"+movingPart]["ypos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]); |
|
obj["box"+movingPart]["color"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["color"], nextObj["box"+movingPart]["color"]); |
|
} else { |
|
obj["box"+movingPart] = {}; |
|
obj["box"+movingPart]["xpos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]); |
|
obj["box"+movingPart]["ypos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]); |
|
} |
|
} |
|
else { |
|
obj = savedValues[soloCurLetter]; |
|
} |
|
return obj; |
|
} |
|
|
|
function keyTyped() { |
|
if (key == '!') { |
|
saveBlocksImages(); |
|
} |
|
else if (key == '@') { |
|
saveBlocksImages(true); |
|
} |
|
else { |
|
lastKeyPressedTime = millis(); |
|
if(isSwappingWords) { |
|
isSwappingWords = false; |
|
} |
|
upper_key = key.toUpperCase(); |
|
if (upper_key in savedValues) { |
|
if(curDrawMode == "solo") { |
|
soloPrevObj = savedValues[soloCurLetter]; |
|
soloCurLetter = upper_key; |
|
soloIsAnimating = true; |
|
soloCurAnimationFrame = 0; |
|
} |
|
else if(curDrawMode == "exhibition") { |
|
if (!chosenIsAnimating[curChosenLetter]) { |
|
swapExhibitLetter(curChosenLetter, upper_key, 0); |
|
curChosenLetter = (curChosenLetter + 1) % 5; |
|
} |
|
} |
|
} |
|
} |
|
} |
