{"name":"Pixel Art Playground","description":"Unleash your creativity with the Pixel Art Playground! Design and paint your own pixel art masterpieces using a customizable grid system. Let your imagination run wild and create stunning visuals one pixel at a time.","photo":null,"view_count":14,"fork_count":3,"expires_at":null,"created_at":"2024-04-17T18:24:20.451753Z","updated_at":"2024-04-17T18:24:20.451755Z","user_id":28,"status":"PUBLIC","parent_id":1190,"id":1194,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let radius = 600;\nlet centerX;\nlet centerY;\n\nlet shrinkingInterval; // Declare at the top of the script\n\nconst updatesPerSecond = 10; // Update frequency for performance\n\n// Define the pixel grid dimensions\nconst gridWidth = 10; // Adjust according to your grid size\nconst gridHeight = 10; // Adjust according to your grid size\n\n// Define the colors\nconst colors = [\"#FFFFFF\", \"#E6E6FA\", \"#800080\"]; // White, Light Purple, Dark Purple\n\n// Define the pixel array representing the letters\nconst letters = {\n 'J': [\n [0, 0, 1, 1, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [1, 1, 0, 1, 1, 0, 0],\n [0, 1, 1, 1, 0, 0, 0]\n ],\n 'I': [\n [1, 1, 1, 1, 1, 1],\n [0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0],\n [1, 1, 1, 1, 1, 1]\n ],\n 'P': [\n [1, 1, 1, 1, 1, 0],\n [1, 0, 0, 0, 1, 0],\n [1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0]\n ],\n 'T': [\n [1, 1, 1, 1, 1, 1, 1, 1],\n [0, 0, 0, 1, 1, 0, 0, 0],\n [0, 0, 0, 1, 1, 0, 0, 0],\n [0, 0, 0, 1, 1, 0, 0, 0],\n [0, 0, 0, 1, 1, 0, 0, 0],\n [0, 0, 0, 1, 1, 0, 0, 0]\n ],\n 'Y': [\n [1, 0, 0, 0, 0, 1],\n [1, 1, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 0],\n [0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0]\n ],\n // Example for a period (.)\n '.': [\n [0, 0, 0],\n [0, 0, 0],\n [0, 0, 0],\n [0, 0, 0],\n [1, 1, 0],\n [1, 1, 0]\n ],\n 'R': [\n [1, 1, 1, 1, 0, 0],\n [1, 0, 0, 0, 1, 0],\n [1, 1, 1, 1, 0, 0],\n [1, 1, 1, 0, 0, 0],\n [1, 1, 0, 1, 0, 0],\n [1, 1, 0, 0, 1, 0]\n ],\n 'O': [\n [0, 1, 1, 1, 0],\n [1, 1, 0, 0, 1],\n [1, 1, 0, 0, 1],\n [1, 1, 0, 0, 1],\n [1, 1, 0, 0, 1],\n [0, 1, 1, 1, 0]\n ]\n};\n\n// // Function to apply shimmer effect to a specific pixel\n// function applyShimmerEffect(pixel) {\n// const intervalTime = 1000 / 0.001; // Adjust to match 10 fps\n// setInterval(() => {\n// const randomColor = Math.floor(Math.random() * 10) - 5;\n// const color = `rgb(${75 + randomColor}, ${70 + randomColor}, ${90 + randomColor})`;\n// pixel.style.backgroundColor = color;\n// }, intervalTime);\n// }\n\n\n\nfunction mainVisualEffect() {\n const fps = 30;\n const canvas = document.getElementById('pixelCanvas');\n\n canvas.width = 800;\n canvas.height = 600;\n\n const pixelsWide = Math.ceil(canvas.width / 5);\n const pixelsHigh = Math.ceil(canvas.height / 5);\n const fragment = document.createDocumentFragment(); // Use DocumentFragment for performance\n const body = document.body;\n\n const word = \"JIPPITY.PRO\";\n const dotIndex = word.indexOf('.'); // Find the index of the dot in the word\n\n // Calculate the total width of the characters before the dot\n let totalWidthBeforeDot = 0;\n for (let i = 0; i < dotIndex; i++) {\n totalWidthBeforeDot += (letters[word[i]] ? letters[word[i].toUpperCase()][0].length : 0) * 5 + 5; // Adjust 5px per pixel + 5px gap\n }\n\n // Adjust the centerX more accurately to be over the dot\n centerX = (canvas.width / 2) - ((word.length * 6 * 5) / 2) + totalWidthBeforeDot - ((letters['.'][0].length * 5)) - 6;\n centerY = (canvas.height / 2) + 8; // Adjust to push down\n\n\n //const totalTime = calculateTotalTimeForRadiusToDisappear();\n\n\n\n // Apply the background and text after calculated time\n setTimeout(() => {\n const container = document.getElementById('pixelArtContainer');\n container.style.opacity = 1; // Ensure visibility\n container.style.zIndex = '1000'; // Ensure it's above background\n\n // Correct start positions for text drawing\n const startX = Math.max(canvas.width / 2 - (letters['J'][0].length * 5 * word.length) / 2, 0);\n const startY = Math.max(canvas.height / 2 - (letters['J'].length * 5) / 2, 0);\n\n drawWord('pixelArtContainer', 'JIPPITY.PRO', startX, startY, \"#800080\", true); // Add shimmer effect if desired\n }, 2000);\n\n for (let y = 0; y < pixelsHigh; y++) {\n for (let x = 0; x < pixelsWide; x++) {\n const pixelDiv = document.createElement('div');\n pixelDiv.classList.add('pixel');\n pixelDiv.style.position = 'absolute';\n pixelDiv.style.left = `${x * 5}px`;\n pixelDiv.style.top = `${y * 5}px`;\n\n const distanceToCenter = Math.sqrt(Math.pow(x * 5 - centerX, 2) + Math.pow(y * 5 - centerY, 2));\n if (distanceToCenter < radius) {\n pixelDiv.classList.add('dark-purple');\n }\n\n fragment.appendChild(pixelDiv); // Add to fragment\n }\n }\n\n body.appendChild(fragment); // Append fragment to body at once\n\n shrinkingInterval = setInterval(shrinkCircle, 1000 / fps);\n\n setInterval(updatePixelColors, 1000 / fps); // Adjust interval for performance and shimmering effect\n}\n\n// The updatePixelColors function now correctly references the globally defined variables.\nfunction updatePixelColors() {\n const pixels = document.querySelectorAll('.pixel:not(.text-pixel):not(.fading-in)');\n pixels.forEach(pixel => {\n // Reduced randomness to decrease processing time\n if (Math.random() > 0.9) { // Reduced the probability of changing color to reduce repaints\n const randomColorAdjustment = Math.floor(Math.random() * 8) - 4;\n let color;\n if (pixel.classList.contains('dark-purple')) {\n color = `rgb(${128 + randomColorAdjustment}, ${0 + randomColorAdjustment}, ${128 + randomColorAdjustment})`;\n } else {\n color = `rgb(${235 + randomColorAdjustment}, ${230 + randomColorAdjustment}, ${250 + randomColorAdjustment})`;\n }\n pixel.style.backgroundColor = color;\n }\n });\n}\n\nmainVisualEffect();\n\n\n\nfunction drawLetter(containerId, letter, startX, startY, targetColor, shimmer = false) {\n const letterData = letters[letter.toUpperCase()];\n if (!letterData) return;\n\n const container = document.getElementById(containerId);\n\n letterData.forEach((row, y) => {\n row.forEach((pixel, x) => {\n if (pixel) {\n const pixelDiv = document.createElement('div');\n pixelDiv.classList.add('pixel', 'fading-in'); // Add 'fading-in' class to mark the fade-in process\n pixelDiv.style.position = 'absolute';\n pixelDiv.style.left = `${startX + x * 5}px`;\n pixelDiv.style.top = `${startY + y * 5}px`;\n\n let startColor = { r: 235, g: 230, b: 250 }; // Light purple\n let endColor = hexToRgb(targetColor); // Convert target color to RGB\n let currentColor = startColor;\n pixelDiv.style.backgroundColor = `rgba(${currentColor.r}, ${currentColor.g}, ${currentColor.b}, 0.5)`;\n container.appendChild(pixelDiv);\n\n let frames = 10; // Set to match the target fps for a 1-second animation\n let frameCount = 0;\n const frameTime = 1000 / 10; // Time per frame to match 10 fps\n const intervalId = setInterval(() => {\n frameCount++;\n let progress = frameCount / frames;\n currentColor.r += progress * (endColor.r - startColor.r);\n currentColor.g += progress * (endColor.g - startColor.g);\n currentColor.b += progress * (endColor.b - startColor.b);\n\n pixelDiv.style.backgroundColor = `rgb(${Math.round(currentColor.r)}, ${Math.round(currentColor.g)}, ${Math.round(currentColor.b)})`;\n\n if (frameCount >= frames) {\n clearInterval(intervalId);\n pixelDiv.style.backgroundColor = targetColor;\n pixelDiv.classList.remove('fading-in'); // Fade-in complete, remove the marking\n pixelDiv.classList.add('text-pixel'); // Mark this pixel as part of the text\n }\n }, frameTime); // Adjust timing based on frames\n }\n });\n });\n}\nfunction calculateTotalTimeForRadiusToDisappear() {\n const initialRadius = radius; // Initial radius\n const decreasePerUpdate = 5; // Radius decrease per update\n const updatesPerSecond = 30; // As defined in createShimmeringBackground\n\n // Calculate decrease per second\n const decreasePerSecond = decreasePerUpdate * updatesPerSecond;\n\n // Calculate total time in milliseconds for the radius to reach zero\n const totalTime = (initialRadius / decreasePerSecond) * 1000; // Convert to milliseconds\n\n return totalTime;\n}\n// Helper function to convert HEX color to RGB\nfunction hexToRgb(hex) {\n let r = 0, g = 0, b = 0;\n // 3 digits\n if (hex.length === 4) {\n r = parseInt(hex[1] + hex[1], 16);\n g = parseInt(hex[2] + hex[2], 16);\n b = parseInt(hex[3] + hex[3], 16);\n }\n // 6 digits\n else if (hex.length === 7) {\n r = parseInt(hex[1] + hex[2], 16);\n g = parseInt(hex[3] + hex[4], 16);\n b = parseInt(hex[5] + hex[6], 16);\n }\n return { r, g, b };\n}\n\n\n\n// Adjust drawWord to pass shimmer effect flag for \"JIPPITY.PRO\" text\nfunction drawWord(containerId, word, startX, startY, shimmer = true) {\n let currentX = startX;\n const color = \"#800080\"; // Dark purple for all text\n\n word.split('').forEach((letter, index) => {\n drawLetter(containerId, letter, currentX, startY, color, shimmer);\n\n const letterData = letters[letter.toUpperCase()];\n if (!letterData) {\n console.error('Letter data not found for:', letter);\n return; // Skip this iteration if letter data is not found\n }\n currentX += letterData[0].length * 5 + 5; // Move to the right for the next letter, adding a small gap\n });\n}\n\nfunction shrinkCircle() {\n radius -= 25; // Decrease the radius\n if (radius < 0) {\n clearInterval(shrinkingInterval); // Stop the interval when the circle has fully shrunk\n } else {\n updateCircleDisplay(); // Call the function to update the display\n }\n}\n\nfunction updateCircleDisplay() {\n const pixels = document.querySelectorAll('.pixel');\n pixels.forEach(pixel => {\n const x = parseInt(pixel.style.left, 10);\n const y = parseInt(pixel.style.top, 10);\n const distanceToCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));\n if (distanceToCenter < radius) {\n pixel.classList.add('dark-purple');\n } else {\n pixel.classList.remove('dark-purple');\n }\n });\n}","style.css":"body,\nhtml {\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n}\n\n#pixelArtContainer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0; /* Initial state for the fade-in effect */\n z-index: 2; /* Ensure it's above the shimmering pixels */\n}\n\n.pixel {\n width: 5px;\n height: 5px;\n display: inline-block;\n position: absolute; /* Updated to ensure correct positioning */\n}","index.html":"\n\n\n\n \n \n \n\n\n\n\n

\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":6,"comments":[],"steps":[{"title":"Basic Grid Structure","instruction":"Set up the basic HTML structure for the pixel grid project.","created_at":"2024-04-17T14:39:01.474509","project_id":1194,"complete":false,"step_number":0,"updated_at":"2024-04-17T18:24:20.455476","id":6235},{"title":"CSS Styling","instruction":"Create a separate CSS file to style the grid and make it visually appealing.","created_at":"2024-04-17T14:39:01.474685","project_id":1194,"complete":false,"step_number":1,"updated_at":"2024-04-17T18:24:20.455644","id":6236},{"title":"JavaScript Interactivity","instruction":"Develop JavaScript functionality to add interactivity to the pixel grid, such as drawing and color selection.","created_at":"2024-04-17T14:39:01.474752","project_id":1194,"complete":false,"step_number":2,"updated_at":"2024-04-17T18:24:20.455694","id":6237},{"title":"Grid Customization Options","instruction":"Implement tools for customizing the grid size, color palette, and drawing tools.","created_at":"2024-04-17T14:39:01.474812","project_id":1194,"complete":false,"step_number":3,"updated_at":"2024-04-17T18:24:20.455741","id":6238},{"title":"Save and Share Functionality","instruction":"Allow users to save and share their pixel art creations.","created_at":"2024-04-17T14:39:01.474870","project_id":1194,"complete":false,"step_number":4,"updated_at":"2024-04-17T18:24:20.455786","id":6239},{"title":"Undo/Redo Functionality","instruction":"Add the ability for users to undo and redo changes made to their pixel art.","created_at":"2024-04-17T14:39:01.474929","project_id":1194,"complete":false,"step_number":5,"updated_at":"2024-04-17T18:24:20.455831","id":6240}]}