3e:null 3f:["$","title",null,{"children":"3D Parametric Equations | Renato Mauro | Observable"}] 45:Ta00,vertexShader = newShader(gl.VERTEX_SHADER, ` #define PI 3.1415926535897932384626433832795 in vec2 uv; out vec2 uvfrag; uniform mat4 projection; uniform mat4 view; uniform mat4 model; uniform float tween; vec3 f(float u, float v) { float x = 6.0*u-3.0; float z = 6.0*v-3.0; return vec3( x, 0.2*cos(25.0*x), z ); } vec3 g(float u, float v) { float theta = (u*PI)-(PI/2.0); float phi = (2.0*v*PI); return vec3( 3.0*cos(theta)*cos(phi), 3.0*sin(theta), 3.0*cos(theta)*sin(phi) ); } vec3 torus(float u, float v) { float theta = (2.0*u*PI); float phi = (2.0*v*PI); return vec3( (2.0+cos(theta))*cos(phi), sin(theta), (2.0+cos(theta))*sin(phi) ); } vec3 h(float u, float v) { float phi = (2.0*v*PI); return vec3( 2.0*u*cos(phi), 4.0*u*u, 2.0*u*sin(phi) ); } vec3 h2(float u, float v) { float s = 4.0*u-2.0; float t = 4.0*v-2.0; return vec3( s, (t*t+s*s), t ); } vec3 h3(float u, float v) { float s = 4.0*u-2.0; float t = 4.0*v-2.0; return vec3( s, (t*t-s*s), t ); } vec3 q2(float u, float v) { float x, y, z, t; if(u<0.25) { y = -1.0; } else if(u < 0.75) { t = (u-0.25)*2.0; y = (t-1.0)+t; } else { y = 1.0; } if(v >= 1.0/8.0 && v < 3.0/8.0) { t = (v-1.0/8.0)*4.0; z = -1.0; x = (1.0-t)-t; } else if(v >= 3.0/8.0 && v < 5.0/8.0) { t = (v-3.0/8.0)*4.0; z = (t-1.0)+t; x = -1.0; } else if(v >= 5.0/8.0 && v < 7.0/8.0) { t = (v-5.0/8.0)*4.0; z = 1.0; x = (t-1.0)+t; } else { x = 1.0; if(v>=7.0/8.0) { v = v-1.0; } t = (v+1.0/8.0)*4.0; z = (1.0-t)-t; } return vec3(x,y,z); } vec3 q(float v, float u) { float x, y, z, t; if(u<0.25) { x = -1.0; } else if(u < 0.5) { t = (u-0.25)*4.0; x = (t-1.0)+t; } else if(u < 0.75) { x = 1.0; } else { t = (u-0.75)*4.0; x = (1.0-t)-t; } if(v < 1.0/3.0) { y = -1.0; } else if(v < 2.0/3.0) { t = (v-1.0/3.0)*3.0; y = (t-1.0)+t; } else { y = 1.0; } z = -1.0; if(u >= 0.25 && u <= 0.5 && v >= 1.0/3.0 && v <= 2.0/3.0) { z = 1.0; } else if(u < 0.75 && u >= 0.5) { t = (u-0.5)*4.0; z = (1.0-t)-t; } else if(u < 0.25) { t = u*4.0; z = (t-1.0)+t; } return vec3(x,y,z); } void main() { uvfrag = uv; vec3 p1 = q2(uv[0],uv[1]); vec3 p2 = torus(uv[0],uv[1]); float t = (1.0+cos(tween*2.0*PI/200.0))/2.0; vec3 p = mix(p1,p2,t); gl_Position = projection * view * model * vec4(p,1.0); } `);46:T460,draw = { let [M,N] = resolution; let indexBuffer = new Int16Array((2*M)*(N-1)+2*(N-2)); for(let i=0, k=0; i0) { indexBuffer[k++] = i*M+M-1; indexBuffer[k++] = i*M; } for(let j=0; j { gl.bindVertexArray(vao); gl.useProgram(prog); gl.drawElements(gl.TRIANGLE_STRIP,indexBuffer.length,gl.UNSIGNED_SHORT,0); }; }47:[] 43:{"id":"1b179e8e71f18463","slug":null,"title":"3D Parametric Equations","thumbnail":"9a0f489cddaa73986cc3c7cfc0e5b0ae6d34684bd9f05926e584d2ebd9a992cc","access_level":"public","create_time":"$D2023-09-23T16:47:05.177Z","update_time":"$D2024-08-06T22:31:04.395Z","view_time":null,"first_public_time":"$D2023-09-23T16:47:05.177Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a194530ebf4bcd45","login":"rmauro","name":"Renato Mauro","avatar_url":"https://avatars-next.observableusercontent.com/384a790421646f649e2ea216b245cdf691e67c27a943cfe9e09dd7d3485efaf3","tier":"starter_2024","bio":"","following":false},"version":394,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3230060d1b16358d","login":"rmauro","name":"Renato Mauro","avatar_url":"https://avatars-next.observableusercontent.com/384a790421646f649e2ea216b245cdf691e67c27a943cfe9e09dd7d3485efaf3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3230060d1b16358d","login":"rmauro","name":"Renato Mauro","avatar_url":"https://avatars-next.observableusercontent.com/384a790421646f649e2ea216b245cdf691e67c27a943cfe9e09dd7d3485efaf3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Parametric Equations","cells":[{"id":0,"value":"# 3D Parametric Equations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof gl = {\n const canvas = document.createElement(\"canvas\");\n canvas.width = W;\n canvas.height = H;\n const gl = canvas.value = canvas.getContext(\"webgl2\");\n if (!gl) throw new Error(\"WebGL unsupported\");\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"frameCount = {\n let frameCount = 0;\n gl.enable(gl.DEPTH_TEST);\n gl.depthFunc(gl.LEQUAL)\n gl.clearColor(0.3,0.3,0.3,1.0);\n while (true) {\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n let identity = glm.mat4.identity(glm.mat4.create());\n let model = glm.mat4.rotateX(glm.mat4.create(),identity,frameCount/100);\n //model = glm.mat4.rotateX(glm.mat4.create(),model,frameCount/100);\n \n gl.useProgram(prog);\n gl.uniformMatrix4fv(gl.getUniformLocation(prog,\"projection\"),false,projection);\n gl.uniformMatrix4fv(gl.getUniformLocation(prog,\"view\"),false,view);\n gl.uniformMatrix4fv(gl.getUniformLocation(prog,\"model\"),false,model);\n gl.uniform1f(gl.getUniformLocation(prog,\"tween\"),0.2*frameCount);\n draw(prog);\n yield frameCount;\n frameCount++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"prog = newProgram(vertexShader, fragmentShader, [ [\"uv\",0 ] ]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"fragmentShader = newShader(gl.FRAGMENT_SHADER, `\n#define PI 3.1415926535897932384626433832795\nin vec2 uvfrag;\nout vec4 color;\nvoid main() {\n float r = (1.0+cos(uvfrag[0]*2.0*PI))/2.0;\n float g = (1.0+sin(uvfrag[0]*2.0*PI))/2.0;\n float b = (1.0+cos(uvfrag[1]*2.0*PI))/2.0;\n color = vec4(r,g,b,1.0);\n}\n`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function newShader(type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, \"#version 300 es\\nprecision highp float;\\n\"+source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function newProgram(vs,fs,attrs) {\n const program = gl.createProgram();\n gl.attachShader(program, vs);\n gl.attachShader(program, fs);\n for(let [attrName, index] of attrs) {\n gl.bindAttribLocation(program,index,attrName);\n }\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(\"cannot link program\");\n return program;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"resolution = [ 60, 60 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"W = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"H = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"projection = glm.mat4.perspective( glm.mat4.create(),\n (45 * Math.PI) / 180,\n W / H,\n 0.1,\n 100\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"view = glm.mat4.lookAt(glm.mat4.create(),[0,0,-10],[0,0,0],[0,1,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"glm = import(\"gl-matrix\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"