xxxxxxxxxx894
var noAnimate = true;var x;var percent = 0;var letter = "Z";var coordinates = { A: { rect1: { X: 170, Y: 225, width: 30, height: 280, theta: 6, }, rect2: { X: 282, Y: 225, width: 30, height: 280, theta: -6, }, rect3: { X: 165, Y: 384, width: 150, height: 20, theta: 0, }, next: "B", }, B: { rect1: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect2: { X: 240, Y: 225, width: 30, height: 230, theta: -20, }, rect3: { X: 140, Y: 413, width: 230, height: 30, theta: -10, }, next: "C", }, C: { rect1: { X: 140, Y: 280, width: 30, height: 170, theta: 0, }, rect2: { X: 140, Y: 250, width: 180, height: 30, theta: -5, }, rect3: { X: 140, Y: 445, width: 180, height: 30, theta: 5, }, next: "D", }, D: { rect1: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect2: { X: 142, Y: 290, width: 220, height: 30, theta: 12, }, rect3: { X: 140, Y: 405, width: 220, height: 30, theta: -12, }, next: "E", }, E: { rect1: { X: 220, Y: 180, width: 30, height: 230, theta: 20, }, rect2: { X: 140, Y: 350, width: 210, height: 30, theta: 0, }, rect3: { X: 220, Y: 320, width: 30, height: 230, theta: -20, }, next: "F", }, F: { rect1: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect2: { X: 140, Y: 350, width: 180, height: 30, theta: 0, }, rect3: { X: 130, Y: 225, width: 200, height: 30, theta: 0, }, next: "G", }, G: { rect1: { X: 220, Y: 180, width: 30, height: 240, theta: 20, }, rect2: { X: 285, Y: 380, width: 30, height: 100, theta: 0, }, rect3: { X: 200, Y: 320, width: 30, height: 200, theta: -15, }, next: "H", }, H: { rect1: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect2: { X: 282, Y: 225, width: 30, height: 275, theta: 0, }, rect3: { X: 120, Y: 360, width: 210, height: 30, theta: 0, }, next: "I", }, I: { rect1: { X: 215, Y: 200, width: 30, height: 320, theta: 0, }, rect2: { X: 140, Y: 470, width: 173, height: 30, theta: 0, }, rect3: { X: 140, Y: 220, width: 173, height: 30, theta: 0, }, next: "J", }, J: { rect1: { X: 215, Y: 225, width: 30, height: 275, theta: 0, }, rect2: { X: 140, Y: 460, width: 100, height: 30, theta: 3, }, rect3: { X: 140, Y: 220, width: 173, height: 30, theta: 0, }, next: "K", }, K: { rect1: { X: 220, Y: 180, width: 30, height: 225, theta: 20, }, rect2: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect3: { X: 220, Y: 320, width: 30, height: 225, theta: -20, }, next: "L", }, L: { rect1: { X: 140, Y: 225, width: 30, height: 225, theta: 0, }, rect2: { X: 140, Y: 225, width: 30, height: 275, theta: 0, }, rect3: { X: 140, Y: 450, width: 225, height: 30, theta: 0, }, next: "Z", }, Z: { rect1: { X: 220, Y: 225, width: 30, height: 275, theta: 12, }, rect2: { X: 140, Y: 470, width: 200, height: 30, theta: 0, }, rect3: { X: 140, Y: 225, width: 200, height: 30, theta: 0, }, next: "Z", },}var wiggle;function setup() { createCanvas(800, 600); angleMode(DEGREES); //noLoop();}//https://medium.com/@chenzhenxi/fastest-way-to-select-the-ntn-digit-in-integer-in-javascript-216fa6f9dd71function getDigit(ntn, number) { var len = Math.floor(Math.log(number) / Math.LN10) - ntn; return ((number / Math.pow(10, len)) % 10) | 0;}function getTwoDigits(number) { let curFirst; let curSecond; if (number < 10) { curFirst = 0; curSecond = number; } else { curFirst = getDigit(0, number); curSecond = getDigit(1, number); } return [curFirst, curSecond];}function setUpDigits() { let curFirst = hour() % 12; let minuteDigits = getTwoDigits(minute()); let secondDigits = getTwoDigits(second()); return [curFirst, minuteDigits[0], minuteDigits[1], secondDigits[0], secondDigits[1]];}function drawLayout() { push(); noFill(); stroke('red'); //ellipse(232, 374, 350); //line(0, 225, width, 225); //line(0, 500, width, 500); // grids for (var i = 1; i < 5; i++) { var curX = i * width / 5; line(curX, 0, curX, height); if (i < 3) { var curY = i * height / 3; line(0, curY, width, curY); } } pop();}function numberToLetter(number) { switch (number) { case 0: return "Z"; case 1: return "A"; case 2: return "B"; case 3: return "C"; case 4: return "D"; case 5: return "E"; case 6: return "F"; case 7: return "G"; case 8: return "H"; case 9: return "I"; case 10: return "J"; case 11: return "K"; case 12: return "L"; } return;}function getLetterObj(letter) { switch (letter) { case "A": return coordinates.A; case "B": return coordinates.B; case "C": return coordinates.C; case "D": return coordinates.D; case "E": return coordinates.E; case "F": return coordinates.F; case "G": return coordinates.G; case "H": return coordinates.H; case "I": return coordinates.I; case "J": return coordinates.J; case "K": return coordinates.K; case "L": return coordinates.L; case "Z": return coordinates.Z; }}function callDrawLetter(letter) { switch (letter) { case "A": drawLetter(coordinates.A); break; case "B": drawLetter(coordinates.B); break; case "C": drawLetter(coordinates.C); break; case "D": drawLetter(coordinates.D); break; case "E": drawLetter(coordinates.E); break; case "F": drawLetter(coordinates.F); break; case "G": drawLetter(coordinates.G); break; case "H": drawLetter(coordinates.H); break; case "I": drawLetter(coordinates.I); break; case "J": drawLetter(coordinates.J); break; case "K": drawLetter(coordinates.K); break; case "L": drawLetter(coordinates.L); break; case "Z": drawLetter(coordinates.Z); break; }}function drawQuadrant(quadNum, number) { var Xoffset = 70; switch (quadNum) { case 1: push(); translate(-15 + Xoffset, height / 2 - 125); scale(0.3); callDrawLetter(numberToLetter(number)); pop(); break; case 2: push(); translate(150 + Xoffset, height / 2 - 125); scale(0.3); callDrawLetter(numberToLetter(number)); pop(); break; case 3: push(); translate(255 + Xoffset, height / 2 - 125); scale(0.3); callDrawLetter(numberToLetter(number)); pop(); break; case 4: push(); translate(415 + Xoffset, height / 2 - 125); scale(0.3); callDrawLetter(numberToLetter(number)); pop(); break; case 5: push(); translate(500 + Xoffset, height / 2 - 125); scale(0.3); callDrawLetter(numberToLetter(number)); pop(); break; }}function drawAll() { //drawLayout(); // grids for (var i = 1; i < 5; i++) { push(); var curX = i * width / 5; scale(0.6) callDrawLetter(numberToLetter(9)); if (i < 3) { var curY = i * height / 3; } pop(); }}function drawColon() { rect(210, 276, 10); rect(210, 299, 10); rect(475, 276, 10); rect(475, 299, 10);}function draw() { wiggle = 0.5 * (1 + sin(millis() / 2000.0)); var r = map(second(), 0, 59, 150, 255); var g = map(minute(), 0, 59, 150, 255); var b = map(hour(), 0, 24, 150, 255); background(r*wiggle, g*wiggle, b*wiggle); //background('black'); fill('white'); // drawLayout(); noStroke(); drawColon(); percent += 0.05; var curTime = setUpDigits(); var secondDigit = curTime[1]; //first digit of minute var thirdDigit = curTime[2]; //second digit of minute var fourthDigit = curTime[3]; // first digit of second var fifthDigit = curTime[4]; // second digit of second drawQuadrant(1, hour() % 12); drawQuadrant(2, secondDigit); drawQuadrant(3, thirdDigit); drawQuadrant(4, fourthDigit); drawQuadrant(5, fifthDigit);}function rotateRectCorner(x, y, cx, cy, theta) { //rotates single corner of a rectangle //from https://gamedev.stackexchange.com/questions/86755/how-to-calculate-corner-positions-marks-of-a-rotated-tilted-rectangle // cx, cy - center of square coordinates // x, y - coordinates of a corner point of the square // theta is the angle of rotation // translate point to origin let tempX = x - cx; let tempY = y - cy; // now apply rotation let rotatedX = tempX * cos(theta) - tempY * sin(theta); let rotatedY = tempX * sin(theta) + tempY * cos(theta); // translate back x = rotatedX + cx; y = rotatedY + cy; return [x, y];}function getAllRotatedCorner(leftX, botY, topY, rightX, cx, cy, theta) { var newL1 = rotateRectCorner(leftX, botY, cx, cy, theta); var newL2 = rotateRectCorner(leftX, topY, cx, cy, theta); var newR1 = rotateRectCorner(rightX, topY, cx, cy, theta); var newR2 = rotateRectCorner(rightX, botY, cx, cy, theta); var newLeftX_fixed = newL1[0]; var newLeftX1_fixed = newL2[0]; var newRightX_fixed = newR1[0]; var newRightX1_fixed = newR2[0]; var newLeftY_fixed = newL1[1]; var newLeftY1_fixed = newL2[1]; var newRightY_fixed = newR1[1]; var newRightY1_fixed = newR2[1]; return [newLeftX_fixed, newLeftX1_fixed, newRightX_fixed, newRightX1_fixed, newLeftY_fixed, newLeftY1_fixed, newRightY_fixed, newRightY1_fixed ];}function makeRect(leftX, rightX, topY, botY, theta, nLeftX, nRightX, nTopY, nBotY, ntheta) { var curLeftX = leftX; var curRightX = rightX; var curTopY = topY; var curBotY = botY; var cx = leftX + (rightX - leftX) / 2; var cy = botY + (topY - botY) / 2; var ncx = nLeftX + (nRightX - nLeftX) / 2; var ncy = nBotY + (nTopY - nBotY) / 2; /* if (second()>50) { var period = 2000; // milliseconds var percent = (millis() % 5000)/period; let newCoords = getAllRotatedCorner(nLeftX, nBotY, nTopY, nRightX, ncx, ncy, ntheta); let newLeftX_fixed = newCoords[0]; let newLeftX1_fixed = newCoords[1]; let newRightX_fixed = newCoords[2]; let newRightX1_fixed = newCoords[3]; let newLeftX = lerp(curLeftX, newLeftX_fixed, constrain(percent, 0, 1)); let newLeftX1 = lerp(curLeftX, newLeftX1_fixed, constrain(percent,0, 1)); let newRightX = lerp(curRightX, newRightX_fixed, constrain(percent, 0, 1)); let newRightX1 = lerp(curRightX, newRightX1_fixed, constrain(percent,0, 1)); let newLeftY_fixed = newCoords[4]; let newLeftY1_fixed = newCoords[5]; let newRightY_fixed = newCoords[6]; let newRightY1_fixed = newCoords[7]; let newLeftY = lerp(curTopY, newLeftY_fixed, constrain(percent,0, 1)); let newLeftY1 = lerp(curTopY, newLeftY1_fixed, constrain(percent, 0, 1)); let newRightY = lerp(curBotY, newRightY_fixed, constrain(percent, 0, 1)); let newRightY1 = lerp(curBotY, newRightY1_fixed, constrain(percent, 0, 1)); beginShape(); vertex(newLeftX, newLeftY); vertex(newLeftX1, newLeftY1); vertex(newRightX, newRightY); vertex(newRightX1, newRightY1); endShape(CLOSE); } else {*/ var newCoords = getAllRotatedCorner(leftX, botY, topY, rightX, cx, cy, theta); var newLeftX_fixed = newCoords[0]; var newLeftX1_fixed = newCoords[1]; var newRightX_fixed = newCoords[2]; var newRightX1_fixed = newCoords[3]; var newLeftX = lerp(curLeftX, newLeftX_fixed, constrain(frameCount * 0.05, 0, 1)); var newLeftX1 = lerp(curLeftX, newLeftX1_fixed, constrain(frameCount * 0.05, 0, 1)); var newRightX = lerp(curRightX, newRightX_fixed, constrain(frameCount * 0.05, 0, 1)); var newRightX1 = lerp(curRightX, newRightX1_fixed, constrain(frameCount * 0.05, 0, 1)); var newLeftY_fixed = newCoords[4]; var newLeftY1_fixed = newCoords[5]; var newRightY_fixed = newCoords[6]; var newRightY1_fixed = newCoords[7]; var newLeftY = lerp(curTopY, newLeftY_fixed, constrain(frameCount * 0.05, 0, 1)); var newLeftY1 = lerp(curTopY, newLeftY1_fixed, constrain(frameCount * 0.05, 0, 1)); var newRightY = lerp(curBotY, newRightY_fixed, constrain(frameCount * 0.05, 0, 1)); var newRightY1 = lerp(curBotY, newRightY1_fixed, constrain(frameCount * 0.05, 0, 1)); if (noAnimate) { beginShape() vertex(newLeftX_fixed, newLeftY_fixed); vertex(newLeftX1_fixed, newLeftY1_fixed); vertex(newRightX_fixed, newRightY_fixed); vertex(newRightX1_fixed, newRightY1_fixed); endShape(CLOSE); } else { beginShape() vertex(newLeftX, newLeftY); vertex(newLeftX1, newLeftY1); vertex(newRightX, newRightY); vertex(newRightX1, newRightY1); endShape(CLOSE); }}// figure out coordinatesfunction drawLetter(data) { var drawLetter; var Xoffset = 60; var leftX; var rightX; var botY; var topY; var theta; var nextX; var nextY; var theta2; var leftX2; var rightX2; var botY2; var topY2; var next1X; var next2Y; var theta3; var leftX3; var rightX3; var botY3; var topY3; // rect1 leftX = data.rect1.X; rightX = leftX + data.rect1.width; botY = data.rect1.Y; topY = botY + data.rect1.height; theta = data.rect1.theta * PI; let nextObj = getLetterObj(data.next); let nextLeftX = nextObj.rect1.X; let nextRightX = nextLeftX + nextObj.rect1.width; let nextbotY = nextObj.rect1.Y; let nexttopY = nextbotY + nextObj.rect1.height; let nexttheta = nextObj.rect1.theta * PI; //rect2 leftX2 = data.rect2.X; rightX2 = leftX2 + data.rect2.width; botY2 = data.rect2.Y; topY2 = botY2 + data.rect2.height; theta2 = data.rect2.theta * PI; let nextLeft2X = nextObj.rect2.X; let nextRight2X = nextLeft2X + nextObj.rect2.width; let nextbot2Y = nextObj.rect2.Y; let nexttop2Y = nextbot2Y + nextObj.rect2.height; let nexttheta2 = nextObj.rect2.theta * PI; //rect3 leftX3 = data.rect3.X; rightX3 = leftX3 + data.rect3.width; botY3 = data.rect3.Y; topY3 = botY3 + data.rect3.height; theta3 = data.rect3.theta * PI; let nextLeft3X = nextObj.rect3.X; let nextRight3X = nextLeft3X + nextObj.rect3.width; let nextbot3Y = nextObj.rect3.Y; let nexttop3Y = nextbot3Y + nextObj.rect3.height; let nexttheta3 = nextObj.rect3.theta * PI; //rectangle 1 -------------------------------------- ///nLeftX, nRightX, nTopY, nBotY, ntheta makeRect(leftX, rightX, topY, botY, theta, nextLeftX, nextRightX, nexttopY, nextbotY, nexttheta); //rectangle 2 -------------------------------------- makeRect(leftX2, rightX2, topY2, botY2, theta2, nextLeft2X, nextRight2X, nexttop2Y, nextbot2Y, nexttheta2); //rectangle 2 -------------------------------------- makeRect(leftX3, rightX3, topY3, botY3, theta3, nextLeft3X, nextRight3X, nexttop3Y, nextbot3Y, nexttheta3);}function mousePressed() { console.log(mouseX, mouseY);}