Last 10 Commits for cmycube1.scroll.pub

commit 0bb4f7b7c289566bb33762e38623385112a154e1 Author: root <root@hub.scroll.pub> Date: 2025-01-02 00:19:06 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..c4a7871 --- /dev/null +++ b/body.html @@ -0,0 +1,4 @@ +<canvas id="webgl-canvas"></canvas> +<div class="instructions"> + <p>Move your mouse to rotate the CMY cube.</p> +</div> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..191a98e --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://cmycube.scroll.pub +metaTags +editButton /edit.html +title Interactive CMY Cube with WebGL +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..b244a7e --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "df8383e1-d611-4ecf-8718-15eb9f66206f", + "object": "chat.completion", + "created": 1735777116, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\ncmycube.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://cmycube.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Interactive CMY Cube with WebGL\nstyle.css\nbody.html\nscript.js\n---body.html---\n<canvas id=\"webgl-canvas\"></canvas>\n<div class=\"instructions\">\n <p>Move your mouse to rotate the CMY cube.</p>\n</div>\n---style.css---\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n background: linear-gradient(135deg, #1e1e2f, #2a2a40);\n color: #fff;\n font-family: 'Arial', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\ncanvas {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.instructions {\n position: absolute;\n bottom: 20px;\n text-align: center;\n font-size: 1.2em;\n background: rgba(0, 0, 0, 0.7);\n padding: 10px 20px;\n border-radius: 5px;\n}\n---script.js---\nconst canvas = document.getElementById('webgl-canvas');\nconst gl = canvas.getContext('webgl');\n\nif (!gl) {\n console.error('WebGL not supported, falling back on experimental-webgl');\n gl = canvas.getContext('experimental-webgl');\n}\n\nif (!gl) {\n alert('Your browser does not support WebGL');\n}\n\nconst vertexShaderSource = `\n attribute vec4 a_position;\n uniform mat4 u_matrix;\n void main() {\n gl_Position = u_matrix * a_position;\n }\n`;\n\nconst fragmentShaderSource = `\n precision mediump float;\n uniform vec4 u_color;\n void main() {\n gl_FragColor = u_color;\n }\n`;\n\nconst vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\nconst fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\nconst program = createProgram(gl, vertexShader, fragmentShader);\n\nconst positionAttributeLocation = gl.getAttribLocation(program, 'a_position');\nconst matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');\nconst colorUniformLocation = gl.getUniformLocation(program, 'u_color');\n\nconst positionBuffer = gl.createBuffer();\ngl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\nsetGeometry(gl);\n\ngl.useProgram(program);\ngl.enableVertexAttribArray(positionAttributeLocation);\ngl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);\n\nlet mouseX = 0;\nlet mouseY = 0;\n\ncanvas.addEventListener('mousemove', (event) => {\n mouseX = event.clientX / canvas.width * 2 - 1;\n mouseY = -(event.clientY / canvas.height * 2 - 1);\n});\n\nfunction render() {\n gl.clearColor(0, 0, 0, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n const rotationX = mouseY * Math.PI;\n const rotationY = mouseX * Math.PI;\n\n const matrix = m4.xRotation(rotationX);\n m4.yRotate(matrix, rotationY, matrix);\n\n gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);\n\n gl.uniform4fv(colorUniformLocation, [1, 0, 0, 1]);\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n\n gl.uniform4fv(colorUniformLocation, [0, 1, 0, 1]);\n gl.drawArrays(gl.TRIANGLES, 6, 6);\n\n gl.uniform4fv(colorUniformLocation, [0, 0, 1, 1]);\n gl.drawArrays(gl.TRIANGLES, 12, 6);\n\n requestAnimationFrame(render);\n}\n\nrender();\n\nfunction createShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n}\n\nfunction createProgram(gl, vertexShader, fragmentShader) {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n return null;\n }\n return program;\n}\n\nfunction setGeometry(gl) {\n const positions = new Float32Array([\n // Front face\n -0.5, -0.5, 0.5,\n 0.5, -0.5, 0.5,\n 0.5, 0.5, 0.5,\n -0.5, -0.5, 0.5,\n 0.5, 0.5, 0.5,\n -0.5, 0.5, 0.5,\n\n // Back face\n -0.5, -0.5, -0.5,\n 0.5, -0.5, -0.5,\n 0.5, 0.5, -0.5,\n -0.5, -0.5, -0.5,\n 0.5, 0.5, -0.5,\n -0.5, 0.5, -0.5,\n\n // Left face\n -0.5, -0.5, -0.5,\n -0.5, -0.5, 0.5,\n -0.5, 0.5, 0.5,\n -0.5, -0.5, -0.5,\n -0.5, 0.5, 0.5,\n -0.5, 0.5, -0.5,\n\n // Right face\n 0.5, -0.5, -0.5,\n 0.5, -0.5, 0.5,\n 0.5, 0.5, 0.5,\n 0.5, -0.5, -0.5,\n 0.5, 0.5, 0.5,\n 0.5, 0.5, -0.5,\n\n // Top face\n -0.5, 0.5, -0.5,\n 0.5, 0.5, -0.5,\n 0.5, 0.5, 0.5,\n -0.5, 0.5, -0.5,\n 0.5, 0.5, 0.5,\n -0.5, 0.5, 0.5,\n\n // Bottom face\n -0.5, -0.5, -0.5,\n 0.5, -0.5, -0.5,\n 0.5, -0.5, 0.5,\n -0.5, -0.5, -0.5,\n 0.5, -0.5, 0.5,\n -0.5, -0.5, 0.5,\n ]);\n gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);\n}\n\nconst m4 = {\n xRotation: function(angleInRadians) {\n const c = Math.cos(angleInRadians);\n const s = Math.sin(angleInRadians);\n return [\n 1, 0, 0, 0,\n 0, c, s, 0,\n 0, -s, c, 0,\n 0, 0, 0, 1\n ];\n },\n yRotate: function(m, angleInRadians, dst) {\n const c = Math.cos(angleInRadians);\n const s = Math.sin(angleInRadians);\n const m00 = m[0 * 4 + 0];\n const m01 = m[0 * 4 + 1];\n const m02 = m[0 * 4 + 2];\n const m03 = m[0 * 4 + 3];\n const m20 = m[2 * 4 + 0];\n const m21 = m[2 * 4 + 1];\n const m22 = m[2 * 4 + 2];\n const m23 = m[2 * 4 + 3];\n dst = dst || new Float32Array(16);\n dst[0] = c * m00 + s * m20;\n dst[1] = c * m01 + s * m21;\n dst[2] = c * m02 + s * m22;\n dst[3] = c * m03 + s * m23;\n dst[8] = c * m20 - s * m00;\n dst[9] = c * m21 - s * m01;\n dst[10] = c * m22 - s * m02;\n dst[11] = c * m23 - s * m03;\n if (m !== dst) {\n dst[4] = m[4];\n dst[5] = m[5];\n dst[6] = m[6];\n dst[7] = m[7];\n dst[12] = m[12];\n dst[13] = m[13];\n dst[14] = m[14];\n dst[15] = m[15];\n }\n return dst;\n }\n};\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 257, + "completion_tokens": 2217, + "total_tokens": 2474, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 257 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..6b6c201 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# cmycube1.scroll.pub +Website generated by DeepSeek from prompt: can you make a website where you make a cmy cube and make it interative with mouse using webgl? \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5ec6b3e --- /dev/null +++ b/script.js @@ -0,0 +1,199 @@ +const canvas = document.getElementById('webgl-canvas'); +const gl = canvas.getContext('webgl'); + +if (!gl) { + console.error('WebGL not supported, falling back on experimental-webgl'); + gl = canvas.getContext('experimental-webgl'); +} + +if (!gl) { + alert('Your browser does not support WebGL'); +} + +const vertexShaderSource = ` + attribute vec4 a_position; + uniform mat4 u_matrix; + void main() { + gl_Position = u_matrix * a_position; + } +`; + +const fragmentShaderSource = ` + precision mediump float; + uniform vec4 u_color; + void main() { + gl_FragColor = u_color; + } +`; + +const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); +const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); +const program = createProgram(gl, vertexShader, fragmentShader); + +const positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); +const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix'); +const colorUniformLocation = gl.getUniformLocation(program, 'u_color'); + +const positionBuffer = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); +setGeometry(gl); + +gl.useProgram(program); +gl.enableVertexAttribArray(positionAttributeLocation); +gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0); + +let mouseX = 0; +let mouseY = 0; + +canvas.addEventListener('mousemove', (event) => { + mouseX = event.clientX / canvas.width * 2 - 1; + mouseY = -(event.clientY / canvas.height * 2 - 1); +}); + +function render() { + gl.clearColor(0, 0, 0, 1); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + const rotationX = mouseY * Math.PI; + const rotationY = mouseX * Math.PI; + + const matrix = m4.xRotation(rotationX); + m4.yRotate(matrix, rotationY, matrix); + + gl.uniformMatrix4fv(matrixUniformLocation, false, matrix); + + gl.uniform4fv(colorUniformLocation, [1, 0, 0, 1]); + gl.drawArrays(gl.TRIANGLES, 0, 6); + + gl.uniform4fv(colorUniformLocation, [0, 1, 0, 1]); + gl.drawArrays(gl.TRIANGLES, 6, 6); + + gl.uniform4fv(colorUniformLocation, [0, 0, 1, 1]); + gl.drawArrays(gl.TRIANGLES, 12, 6); + + requestAnimationFrame(render); +} + +render(); + +function createShader(gl, type, source) { + const shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + return null; + } + return shader; +} + +function createProgram(gl, vertexShader, fragmentShader) { + const program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program)); + return null; + } + return program; +} + +function setGeometry(gl) { + const positions = new Float32Array([ + // Front face + -0.5, -0.5, 0.5, + 0.5, -0.5, 0.5, + 0.5, 0.5, 0.5, + -0.5, -0.5, 0.5, + 0.5, 0.5, 0.5, + -0.5, 0.5, 0.5, + + // Back face + -0.5, -0.5, -0.5, + 0.5, -0.5, -0.5, + 0.5, 0.5, -0.5, + -0.5, -0.5, -0.5, + 0.5, 0.5, -0.5, + -0.5, 0.5, -0.5, + + // Left face + -0.5, -0.5, -0.5, + -0.5, -0.5, 0.5, + -0.5, 0.5, 0.5, + -0.5, -0.5, -0.5, + -0.5, 0.5, 0.5, + -0.5, 0.5, -0.5, + + // Right face + 0.5, -0.5, -0.5, + 0.5, -0.5, 0.5, + 0.5, 0.5, 0.5, + 0.5, -0.5, -0.5, + 0.5, 0.5, 0.5, + 0.5, 0.5, -0.5, + + // Top face + -0.5, 0.5, -0.5, + 0.5, 0.5, -0.5, + 0.5, 0.5, 0.5, + -0.5, 0.5, -0.5, + 0.5, 0.5, 0.5, + -0.5, 0.5, 0.5, + + // Bottom face + -0.5, -0.5, -0.5, + 0.5, -0.5, -0.5, + 0.5, -0.5, 0.5, + -0.5, -0.5, -0.5, + 0.5, -0.5, 0.5, + -0.5, -0.5, 0.5, + ]); + gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); +} + +const m4 = { + xRotation: function(angleInRadians) { + const c = Math.cos(angleInRadians); + const s = Math.sin(angleInRadians); + return [ + 1, 0, 0, 0, + 0, c, s, 0, + 0, -s, c, 0, + 0, 0, 0, 1 + ]; + }, + yRotate: function(m, angleInRadians, dst) { + const c = Math.cos(angleInRadians); + const s = Math.sin(angleInRadians); + const m00 = m[0 * 4 + 0]; + const m01 = m[0 * 4 + 1]; + const m02 = m[0 * 4 + 2]; + const m03 = m[0 * 4 + 3]; + const m20 = m[2 * 4 + 0]; + const m21 = m[2 * 4 + 1]; + const m22 = m[2 * 4 + 2]; + const m23 = m[2 * 4 + 3]; + dst = dst || new Float32Array(16); + dst[0] = c * m00 + s * m20; + dst[1] = c * m01 + s * m21; + dst[2] = c * m02 + s * m22; + dst[3] = c * m03 + s * m23; + dst[8] = c * m20 - s * m00; + dst[9] = c * m21 - s * m01; + dst[10] = c * m22 - s * m02; + dst[11] = c * m23 - s * m03; + if (m !== dst) { + dst[4] = m[4]; + dst[5] = m[5]; + dst[6] = m[6]; + dst[7] = m[7]; + dst[12] = m[12]; + dst[13] = m[13]; + dst[14] = m[14]; + dst[15] = m[15]; + } + return dst; + } +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b56cf26 --- /dev/null +++ b/style.css @@ -0,0 +1,28 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; + background: linear-gradient(135deg, #1e1e2f, #2a2a40); + color: #fff; + font-family: 'Arial', sans-serif; + display: flex; + justify-content: center; + align-items: center; +} + +canvas { + width: 100%; + height: 100%; + display: block; +} + +.instructions { + position: absolute; + bottom: 20px; + text-align: center; + font-size: 1.2em; + background: rgba(0, 0, 0, 0.7); + padding: 10px 20px; + border-radius: 5px; +} \ No newline at end of file