Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	WebGL metaballs 100 lines TCW
ID	6281718443982848
Created	24 days ago, 1734406636638
Updated	24 days ago, 1734406635926
Code	<!DOCTYPE html> <!-- I made some squishy ordnaments for your tree These are metaballs, basicly a rational function of the points is used to determine how light a certain point is or not. YOKEIBOB HELPd ME --> <html> <head> <meta charset="utf-8"> <title>WebGL metaballs 100 lines TCW</title> </head> <style> { margin:0;/These things are always nice/ overflow:hidden; } </style> <body> <canvas id = "myCanvas" width = "600" height = "600"></canvas><!--The canvas I draw on--> <pre id = "log"></pre> <script id = "vertex-shader" type = "glsl">#version 300 es in vec2 position;//The position of the triangles in vec2 tex_coords;//the coordanents of the thing out vec2 text_coords;//I did not make these 2 things like i intended them. void main(){//all shaders have a main function gl_Position = vec4(position, 1, 1);//gl_Position is a predefined variable for glsl text_coords = position;//The coordanents are relitive to the position } </script><!--The vertex shader--> <script id="fragment-shader" type = "glsl">#version 300 es precision highp float; //Dont use low or mediump in vec2 text_coords;//passes in the position from the vertex shader uniform float u_frame;//frameCount uniform float ball_p[24];//the ball positions uniform float ball_c[36];//the ball colors out vec4 out_color;//the color of the triangles float wel(float x, float y, float p1, float p2){//the rational function that is useful return 1.0/((x-p1)(x-p1)+(y-p2)(y-p2)); } void main(){//all shaders have a main function run every pixel vec3 col = vec3(0);//the red, green, and blue vector for(int i = 0;i<12;i++){//how many metaballs their are. col+=wel(text_coords.x, text_coords.y, ball_p[i2], ball_p[i2+1])0.01vec3(ball_c[i3],ball_c[i3+1],ball_c[i3+2]);//puts the metaballs in the color } out_color = vec4(col, 1);//what the color of the triangles are } </script> <script> var gl = document.getElementById("myCanvas").getContext("webgl2", {preserveDrawingBuffer:true}), vSSource = document.getElementById("vertex-shader").text, fSSource = document.getElementById("fragment-shader").text;//ummm, defines gl, gets the text of the vertex shader and fragment shader function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; }//creates shader function createProgram(gl, vertexShader, fragmentShader){ var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program; }//creates program(a pair of shaders) var program = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, vSSource), createShader(gl, gl.FRAGMENT_SHADER, fSSource));//uses the functions to create a program. var texCL = gl.getAttribLocation(program, "tex_coords"), frame = gl.getUniformLocation(program, "u_frame"), BP = gl.getUniformLocation(program, "ball_p"), BC = gl.getUniformLocation(program, "ball_c"), timer = 0, texCd = [0,0,0,1,1,1,0,0,1,1,1,0], posL = gl.getAttribLocation(program, "position");//gets the location of the text_coords, u_frame, ball_c, ball_p, sets timer to 0, sets the texture coordanents to numbers(probably can get rid of some of this) var posBuff = gl.createBuffer();//creates a buffer gl.bindBuffer(gl.ARRAY_BUFFER, posBuff), gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,1,-1,-1,1,-1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);//binds it and gives it data var vao = gl.createVertexArray();//creates the vertex atribute array gl.bindVertexArray(vao), gl.enableVertexAttribArray(posL), gl.vertexAttribPointer(posL, 2, gl.FLOAT, false, 0, 0);//binds it and enables it for(var i = 0, bp = [], v = [];i < 24;i++){ bp.push(Math.random()2-1), v.push(Math.random()0.01-0.0025);//the velocity and points for the balls } for(var i = 0, c = [];i<12;i++, c.push(Math.random(), Math.random(), Math.random())){}//the colors for the balls function draw(){//run every frame timer++;//our u_frame value gl.bindVertexArray(vao);//binds the vertex array gl.useProgram(program);//uses program for(var i = 0;i < 12;i++){//adds velocity and constrains the balls positions in the canvas bp[i2] += v[i2], bp[i2+1] += v[i2+1]; if(bp[i2]<-1\|\|bp[i2]>1) v[i2]=-1; if(bp[i2+1]<-1\|\|bp[i2+1]>1) v[i2+1]=-1; } gl.uniform1fv(BC,new Float32Array(c));//adds the balls color to the uniform gl.uniform1fv(BP,new Float32Array(bp));//adds the balls position to the uniform gl.uniform1f(frame, timer);//adds the frame count to u_frame gl.drawArrays(gl.TRIANGLES, 0, 6);//!!!DRAWS THE TRIANGLES YAY!!! window.parent.raf = requestAnimationFrame(draw);//request animation frame } cancelAnimationFrame(window.parent.raf);//cancel animation frame window.parent.raf = requestAnimationFrame(draw);//raf = request animation frame. </script> </body> </html><!--93 lines with comments!-->
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvjiKaUCww
Votes	12
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	The Former Wizard of Oz
Author Name	theformerwizardofoz
Author ID	kaid_981854986090143486946241
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734463721299
Updated	23 days ago, 1734463721299
Source Deleted	unknown