Changes to cmycube1.scroll.pub

root
root
20 days ago
Initial commit
body.html
Changed around line 1
+
+
+

Move your mouse to rotate the CMY cube.

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://cmycube.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Interactive CMY Cube with WebGL
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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\n
\n

Move your mouse to rotate the CMY cube.

\n
\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"
+ }
readme.scroll
Changed around line 1
+ # 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?
script.js
Changed around line 1
+ 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;
+ }
+ };
style.css
Changed around line 1
+ 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;
+ }