Rotating Wireframe Cube

{"name":"cube weird perspective","description":"Dive into the world of 3D art with a rotating wireframe cube built entirely in Vanilla JavaScript! This project invites users to explore an interactive cube experience in their browser, merging creativity and coding in a captivating way.","photo":null,"view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-09-20T19:57:54.205310Z","updated_at":"2024-09-20T21:45:16.588486Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":3287,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"code":{"script.js":"const canvas = document.getElementById('cubeCanvas');\nconst ctx = canvas.getContext('2d');\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\n// Define the vertices of the cube with side length 600px (300px from center in each direction)\nconst vertices = [\n { x: -300, y: -300, z: -300 },\n { x: 300, y: -300, z: -300 },\n { x: 300, y: 300, z: -300 },\n { x: -300, y: 300, z: -300 },\n { x: -300, y: -300, z: 300 },\n { x: 300, y: -300, z: 300 },\n { x: 300, y: 300, z: 300 },\n { x: -300, y: 300, z: 300 },\n];\n\nconst faces = [\n [0, 1, 2, 3], // Front face\n [4, 5, 6, 7], // Back face\n [0, 1, 5, 4], // Bottom face\n [2, 3, 7, 6], // Top face\n [0, 3, 7, 4], // Left face\n [1, 2, 6, 5] // Right face\n];\n\nlet angleX = 0;\nlet angleY = 0;\n\n\n\n\n\nfunction project(vertex) {\n const scale = 1000; // Increase the scale factor to make the cube larger\n const distance = 1000; // Set a large enough distance to avoid distortion\n const z = vertex.z + distance;\n return {\n x: (vertex.x / z) * scale + canvas.width / 2,\n y: (vertex.y / z) * scale + canvas.height / 2\n };\n}\n\nfunction rotate(vertex, angleX, angleY) {\n const cosX = Math.cos(angleX);\n const sinX = Math.sin(angleX);\n const cosY = Math.cos(angleY);\n const sinY = Math.sin(angleY);\n\n let y = vertex.y * cosX - vertex.z * sinX;\n let z = vertex.y * sinX + vertex.z * cosX;\n let x = vertex.x * cosY - z * sinY;\n z = vertex.x * sinY + z * cosY;\n\n return { x, y, z };\n}\n\n\n\nfunction animate() {\n angleX += 0.001;\n angleY += 0.001;\n\n\n\n draw();\n requestAnimationFrame(animate);\n}\n\n\n\nfunction draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const rotatedVertices = vertices.map(vertex => rotate(vertex, angleX, angleY));\n const projectedVertices = rotatedVertices.map(project);\n\n faces.forEach((face, index) => {\n const faceVertices = face.map(vertexIndex => projectedVertices[vertexIndex]);\n\n // Fill the face\n ctx.beginPath();\n faceVertices.forEach((vertex, i) => {\n if (i === 0) {\n ctx.moveTo(vertex.x, vertex.y);\n } else {\n ctx.lineTo(vertex.x, vertex.y);\n }\n });\n ctx.closePath();\n ctx.fillStyle = 'hsla(300, 25%, 25%, 0.75)';\n ctx.fill();\n ctx.strokeStyle = '#ffffff';\n ctx.stroke();\n\n // Draw the 16x16 grid of 1s and 0s\n drawGrid(face);\n });\n}\n\nfunction drawGrid(face) {\n ctx.font = '16px monospace'; // Set the font to monospace and increase the size to 16px\n ctx.fillStyle = '#ffffff'; // Set the text color to white\n\n // Define the vertices of the face in 3D space\n const faceVertices = face.map(vertexIndex => vertices[vertexIndex]);\n\n // Iterate over the 16x16 grid with padding\n for (let i = 0; i < 16; i++) {\n for (let j = 0; j < 16; j++) {\n const xFraction = (i + 0.5) / 16; // Fractional position in the grid with padding\n const yFraction = (j + 0.5) / 16; // Fractional position in the grid with padding\n\n // Interpolate positions between vertices in 3D space\n const x = faceVertices[0].x + xFraction * (faceVertices[1].x - faceVertices[0].x) + yFraction * (faceVertices[3].x - faceVertices[0].x);\n const y = faceVertices[0].y + xFraction * (faceVertices[1].y - faceVertices[0].y) + yFraction * (faceVertices[3].y - faceVertices[0].y);\n const z = faceVertices[0].z + xFraction * (faceVertices[1].z - faceVertices[0].z) + yFraction * (faceVertices[3].z - faceVertices[0].z);\n\n // Rotate the grid point\n const rotatedPoint = rotate({ x, y, z }, angleX, angleY);\n\n // Project the rotated grid point onto 2D canvas\n const projectedPoint = project(rotatedPoint);\n\n const value = Math.random() < 0.5 ? '1' : '0'; // Randomly choose 1 or 0\n ctx.fillText(value, projectedPoint.x, projectedPoint.y);\n }\n }\n}\n\nanimate();","style.css":"body {\n margin: 0;\n background-color: hsl(300, 13%, 18%);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n color: white;\n font-family: Arial, sans-serif;\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n\n \n \n Rotating Wireframe Cube\n \n\n\n\n

\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":16,"comments":[],"steps":[]}