Rotating Cube

{"name":"jippity banner dynamic","description":"Dive into the mesmerizing world of the Rotating Cube Adventure! Explore a 3D environment while interacting with a vibrant, rotating cube, all while scoring points for your actions.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/okkch6zctfxgcy6k0ai4","view_count":11,"fork_count":1,"expires_at":null,"created_at":"2024-09-24T15:23:12.306479Z","updated_at":"2024-09-24T16:01:11.534936Z","user_id":70,"status":"PRIVATE","parent_id":3290,"id":3340,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"document.addEventListener(\"DOMContentLoaded\", function () {\n const faces = document.querySelectorAll('.face');\n const gridSize = 16;\n const swapProbability = 0.05;\n const characters = [\n { char: 'j', prob: 0.05 },\n { char: 'i', prob: 0.05 },\n { char: 'p', prob: 0.05 },\n { char: 't', prob: 0.05 },\n { char: 'y', prob: 0.05 },\n { char: 'r', prob: 0.05 },\n { char: 'o', prob: 0.05 },\n { char: '.', prob: 0.15 },\n { char: '1', prob: 0.25 },\n { char: '0', prob: 0.25 }\n ];\n\n const cumulativeProbs = [];\n let cumulativeSum = 0;\n characters.forEach((item) => {\n cumulativeSum += item.prob;\n cumulativeProbs.push({ char: item.char, prob: cumulativeSum });\n });\n\n const numRows = 16;\n const rowHeight = window.innerHeight / numRows;\n\n function getRandomCharacter() {\n const random = Math.random();\n for (let i = 0; i < cumulativeProbs.length; i++) {\n if (random < cumulativeProbs[i].prob) {\n return cumulativeProbs[i].char;\n }\n }\n }\n\n const grids = Array.from({ length: faces.length }, () =>\n Array.from({ length: gridSize }, () =>\n Array.from({ length: gridSize }, () => getRandomCharacter())\n )\n );\n\n function createGridCells(face, grid) {\n face.innerHTML = '';\n for (let i = 0; i < gridSize; i++) {\n for (let j = 0; j < gridSize; j++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n cell.textContent = grid[i][j];\n face.appendChild(cell);\n }\n }\n }\n\n function updateFace(face, grid) {\n const cells = face.querySelectorAll('.cell');\n cells.forEach((cell, index) => {\n const row = Math.floor(index / gridSize);\n const col = index % gridSize;\n cell.textContent = grid[row][col];\n });\n }\n\n function randomSwap(grid) {\n for (let i = 0; i < grid.length; i++) {\n for (let j = 0; j < grid[i].length; j++) {\n if (Math.random() < swapProbability) {\n grid[i][j] = getRandomCharacter();\n }\n }\n }\n }\n\n faces.forEach((face, index) => {\n createGridCells(face, grids[index]);\n updateFace(face, grids[index]);\n });\n\n function animate() {\n faces.forEach((face, index) => {\n randomSwap(grids[index]);\n updateFace(face, grids[index]);\n });\n requestAnimationFrame(animate);\n }\n\n animate();\n\n const floatingTextContainer = document.querySelector('.floating-text-container');\n const codeLines = [\n\n '',\n '',\n\n '',\n '',\n\n '

',\n '

Front

',\n '

Back

',\n '

Left

',\n '

Right

',\n '

Top

',\n '

Bottom

',\n\n 'document.addEventListener(\"DOMContentLoaded\", function () {',\n 'const faces = document.querySelectorAll(\\'.face\\');',\n 'const gridSize = 16;',\n 'const swapProbability = 0.05;',\n 'const characters = [',\n '{ char: \\'j\\', prob: 0.05 },',\n '{ char: \\'i\\', prob: 0.05 },',\n '{ char: \\'p\\', prob: 0.05 },',\n '{ char: \\'t\\', prob: 0.05 },',\n '{ char: \\'y\\', prob: 0.05 },',\n '{ char: \\'r\\', prob: 0.05 },',\n '{ char: \\'o\\', prob: 0.05 },',\n '{ char: \\'.\\', prob: 0.15 },',\n '{ char: \\'1\\', prob: 0.25 },',\n '{ char: \\'0\\', prob: 0.25 }',\n\n 'const cumulativeProbs = [];',\n 'let cumulativeSum = 0;',\n 'characters.forEach((item) => {',\n 'cumulativeSum += item.prob;',\n 'cumulativeProbs.push({ char: item.char, prob: cumulativeSum });',\n\n 'function getRandomCharacter() {',\n 'const random = Math.random();',\n 'for (let i = 0; i < cumulativeProbs.length; i++) {',\n 'if (random < cumulativeProbs[i].prob) {',\n 'return cumulativeProbs[i].char;',\n\n 'const grids = Array.from({ length: faces.length }, () =>',\n 'Array.from({ length: gridSize }, () =>',\n 'Array.from({ length: gridSize }, () => getRandomCharacter())',\n\n 'function createGridCells(face, grid) {',\n 'face.innerHTML = \\'\\';',\n 'for (let i = 0; i < gridSize; i++) {',\n 'for (let j = 0; j < gridSize; j++) {',\n 'const cell = document.createElement(\\'div\\');',\n 'cell.className = \\'cell\\';',\n 'cell.textContent = grid[i][j];',\n 'face.appendChild(cell);',\n\n 'function updateFace(face, grid) {',\n 'const cells = face.querySelectorAll(\\'.cell\\');',\n 'cells.forEach((cell, index) => {',\n 'const row = Math.floor(index / gridSize);',\n 'const col = index % gridSize;',\n 'cell.textContent = grid[row][col];',\n\n 'function randomSwap(grid) {',\n 'for (let i = 0; i < grid.length; i++) {',\n 'for (let j = 0; j < grid[i].length; j++) {',\n 'if (Math.random() < swapProbability) {',\n 'grid[i][j] = getRandomCharacter();',\n\n 'faces.forEach((face, index) => {',\n 'createGridCells(face, grids[index]);',\n 'updateFace(face, grids[index]);',\n\n 'function animate() {',\n 'faces.forEach((face, index) => {',\n 'randomSwap(grids[index]);',\n 'updateFace(face, grids[index]);',\n\n 'requestAnimationFrame(animate);',\n\n 'animate();',\n 'const floatingTextContainer = document.querySelector(\\'.floating-text-container\\');',\n 'function createFloatingText() {',\n 'const textElement = document.createElement(\\'div\\');',\n 'textElement.className = \\'floating-text\\';',\n 'textElement.textContent = codeLines[Math.floor(Math.random() * codeLines.length)];',\n 'textElement.style.top = `${Math.random() * window.innerHeight}px`;',\n 'textElement.style.animationDuration = `${8 + Math.random() * 8}s`;',\n 'textElement.style.animationName = \\'floatText\\';',\n 'floatingTextContainer.appendChild(textElement);',\n 'const animationDuration = parseFloat(getComputedStyle(textElement).animationDuration) * 1000 + 1000 * (500 / 2);',\n 'setTimeout(() => {',\n 'textElement.remove();',\n '}, animationDuration);',\n\n 'setInterval(createFloatingText, 1000);',\n\n ];\n\n function createFloatingText() {\n const textElement = document.createElement('div');\n textElement.className = 'floating-text';\n textElement.textContent = codeLines[Math.floor(Math.random() * codeLines.length)];\n\n // Get a random row index\n const rowIndex = Math.floor(Math.random() * numRows);\n\n // Set the top position based on the row index\n textElement.style.top = `${rowIndex * rowHeight}px`;\n\n // Set other styles\n textElement.style.animationDuration = `${8 + Math.random() * 8}s`;\n textElement.style.animationName = 'floatText';\n floatingTextContainer.appendChild(textElement);\n\n const animationDuration = parseFloat(getComputedStyle(textElement).animationDuration) * 1000 + 1000 * (500 / 2);\n\n setTimeout(() => {\n textElement.remove();\n }, animationDuration);\n }\n\n setInterval(createFloatingText, 500);\n});","style.css":"body,\nhtml {\n height: 100%;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: hsl(278, 32%, 8%);\n}\n\n.image-container {\n z-index: 3;\n}\n\n#title-image {\n max-width: none;\n max-height: none;\n width: 60vw;\n height: auto;\n z-index: 4;\n}\n\n.floating-text-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n}\n\n.floating-text {\n position: absolute;\n white-space: nowrap;\n color: hsla(300, 35%, 45%, 0.5);\n font-size: 2.25vw;\n font-family: 'Courier New', Courier, monospace;\n animation: floatText linear;\n left: 100%;\n}\n\n@keyframes floatText {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(calc(-100vw - 500px));\n }\n}\n\n.cube-container {\n perspective: 1000px;\n}\n\n.cube {\n position: relative;\n width: 30vw;\n transform-style: preserve-3d;\n transform: rotateX(180deg) rotateY(0deg);\n animation: rotateCube 30s infinite linear;\n z-index: 2;\n}\n\n.face {\n position: absolute;\n width: 50vw;\n height: 50vw;\n color: hsla(300, 35%, 45%, 1);\n background-color: hsla(289, 25%, 15%, 0.55);\n border: 1px solid hsla(300, 25%, 50%, 0.50);\n display: grid;\n grid-template-rows: repeat(16, 1fr);\n grid-template-columns: repeat(16, 1fr);\n font-size: 2.25vw;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.cell {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.front {\n transform: translateZ(25vw);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(25vw);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(25vw);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(25vw);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(25vw);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(25vw);\n}\n\n@keyframes rotateCube {\n from {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n to {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}","index.html":"\n\n\n\n \n \n Rotating Cube\n \n \n\n\n\n\n

\n $\"Title$ \n

\n\n

Front

Back

Left

Right

Top

Bottom

\n\n\n"},"chat_history":[],"assets":[{"project_id":3340,"creator":null,"cloudinary_id":"okkch6zctfxgcy6k0ai4","deleted":false,"id":21241,"created_at":"2024-09-24T16:00:48.167338Z","name":"coverGif","resource_type":"image","tags":null},{"project_id":3340,"creator":null,"cloudinary_id":"jdqhxxdriebtj2nzpiax","deleted":false,"id":21240,"created_at":"2024-09-24T15:23:12.315390Z","name":"title1","resource_type":"image","tags":null}],"messages_sent":6,"comments":[],"steps":[]}