Viewing Program

Program Data

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

Title	The Library of Useful Functions
ID	6441505775861760
Created	4 months ago, 1725936742017
Updated	4 months ago, 1725936891159
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>The Library of Useful Functions</title> <style> #gl-canvas { display: none; overflow:hidden; } canvas{ width:600px; } { margin:0px; } #canvas2{ position:fixed; left: 0; top: 0; } </style> </head> <body> <canvas id = 'canvas' width = '1200' height = '9600'></canvas> <canvas id = 'canvas2' width = '1200' height = '1200'></canvas> <canvas id = 'gl-canvas' width = '600' height = '4800'></canvas> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" id="far"> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; vec2 triangle_wave(vec2 a){ vec2 a2 = vec2(1.,0.5) , a1 = a+a2; return abs(fract((a1)(a2.x+a2.y))-.5); } vec3 fractal(vec2 uv){ vec3 col = vec3(0.); float scale = 1.5; vec2 t2 = vec2(0.); vec3 col1 = col; float c1=0.; for(int k = 0; k < 12; k++){ uv.y -= 1./4.; uv = (uv+t2)/scale; uv = (fract(vec2(uv+vec2(.5,1.5))scale)-.5)/scale; t2 = triangle_wave(uv+.5); uv = //t2-triangle_wave(uv.yx)+fract(t2/2.) //looks better with more iterations t2-triangle_wave(uv.yx)-fract(t2/2.)-vec2(floor(-uv.x),0.) ; c1 = //max(abs(uv.y-uv.xsign(uv.x-uv.y))/2.,c1) max(abs(uv.y+uv.x)/2.,c1) ; c1 = //1.-abs(2.c1-1.) //more colorful abs(2.c1-1.) //Spooky! //max(abs(2.c1-2.),c1/4.)/2. ; col.x = //col.x //blue and white //c1 //red and blue and white //max(1.-abs(2.c1-1.),c1/4.) //more colorful //max(length(uv-t2-c1)/3.,1.-col.x) //blue and green //max(length(uv-c1)/3.,col.x) //purple 2. - max((abs(uv.y-uv.x))/3.,col.x) //black and white //col.x ; col = abs(col-(1.-(c1col.x))); col1 = abs(col1c1-col-1.).yzx //abs(col1c1-colsign(t2.y-t2.x)-1.).yzx ; } return col1; } out vec4 fragColor; void main() { vec2 iResolution = vec2(600.0,600.0); vec2 fragCoord=gl_FragCoord.xy; fragColor = vec4(0.0); float t1 = 6.; vec2 uv = (fragCoord)/iResolution.y/t1/2.0; vec3 col1 = fractal(uv); fragColor = vec4(pow(mix(vec3(157.0/255.0,189.0/255.0,255.0/255.0),vec3(1.0,215.0/255.0,196.0/255.0),clamp(col1.rrr/2.0+0.2,0.0,1.0))/2.0+0.9,vec3(8.0))/25.0+vec3(0.5),1.0); } </script> <script type = 'module'> const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); const canvas2 = document.getElementById('canvas2'), ctx2 = canvas2.getContext('2d'); var mouseX=300,pmouseX=300,mouseY=0,pmouseY=0,clicked=false,key={}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); var clickToggle=false; var canClick=true; var start=false; window.addEventListener('mousedown', event => { clicked = true; if(canClick){ clickToggle=true; canClick=false; } }); window.addEventListener('mouseup', event => { clicked = false; canClick=true; }); 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.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); return program; } function lerp(a,b,t){ return a+(b-a)t; } function text(t,x,y,s){ var texts=[]; for(var i=0;i<50;i++){ var g=t.indexOf("#"); if(g<0){ break; } texts.push(t.substring(0,g)); t=t.substring(g+1,t.length); } for(var i=0;i<texts.length;i++){ ctx.fillText(texts[i],x,y+is); } } var frameCount=0; var functions={}; functions.lerp=function(t,a,b){ if(!a){ a=0; } if(!b){ b=Math.sin(frameCount/20); } var o=a+(b-a)t; if(a<b){ o=Math.max(Math.min(o,b),a); }else{ o=Math.min(Math.max(o,b),a); } return o; } function lerp2(a, b, t) { return a+(b-a)sig(t); } functions.smoothStep=function(x){ var sqrt3=Math.sqrt(3); var e1=-1Math.sqrt(1-Math.pow(xsqrt3,2))+1 var e2=Math.sqrt(1-Math.pow(xsqrt3-sqrt3,2)) return(x>=0?(x<0.5?e1:(x<=1?e2:1)):0); } functions.gaussian=function(x){ return Math.pow(1/Math.sqrt(23.141),xx); } functions.smoothMin=function(a,b,k){ if(!b){ b=0; } if(!k){ k=0.1 } k = 6.0; var h = Math.max( k-Math.abs(a-b), 0.0 )/k; return Math.min(a,b) - hhhk(1.0/6.0); } functions.runSpring=function(position,velocity,destination){ var stiffness=1.5; var damping=0.1; var xv=lerp(velocity,(destination-position)stiffness,damping); return xv; } functions.circle=function(x){ return Math.sqrt(1-xx); } functions.invSquare=function(x){ return (1/(xx+0.1)); } functions.hash=function(x,seed){ if(!seed){ seed=1.0; } var r=1658353.85935+seed1545.2353; var r2=1658353.85935+seed89125.3; return Math.abs((((((xr)%1)r)%1)r2)%1); } var functionsArray=[functions.lerp,functions.smoothStep,functions.gaussian,functions.smoothMin,functions.runSpring,functions.circle,functions.invSquare,functions.hash]; function drawGraph(x,y,i,b1,b2,a){ ctx.fillStyle="rgb(55,55,55)" ctx.fillRect(x,y,400,300); ctx.fillStyle="rgb(165,165,165)" ctx.fillRect(x,y+149,400,2); ctx.fillRect(x+199,y,2,300); ctx.strokeStyle="rgb(255, 152, 116)" ctx.lineWidth=4; if(i!=4){ for(var y1=-1;y1<=1-0.01;y1+=0.01){ var gx=lerp(b1,b2,y1/2.0+0.5); var gx2=lerp(b1,b2,(y1+0.01)/2.0+0.5); var gy=functionsArray[i](gx)150a; var gy2=functionsArray[i](gx2)150a; ctx.beginPath(); if(Math.abs(gy)<160&&Math.abs(gy2)<160){ ctx.moveTo(x+200+y1200,y+150-gy,6,6); ctx.lineTo(x+200+(y1+0.01)200,y+150-gy2,6,6); } ctx.stroke(); } }else{ var gy=150; var pgy=150; var xv=1.0; for(var y1=-1;y1<=1-0.03;y1+=0.03){ var gx=lerp(b1,b2,y1/2.0+0.5); var gx2=lerp(b1,b2,(y1+0.03)/2.0+0.5); xv=functionsArray[i](gy,xv,0); gy+=xv; ctx.beginPath(); if(Math.abs(gy)<150\|\|1){ ctx.moveTo(x+200+y1200,y+150-pgy,6,6); ctx.lineTo(x+200+(y1+0.03)200,y+150-gy,6,6); } pgy=gy; ctx.stroke(); } } } function main() { const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const aPosition = gl.getAttribLocation(program, 'aPosition') const drawx = gl.getUniformLocation(program, "drawx"); const drawy = gl.getUniformLocation(program, "drawy"); const iTime = gl.getUniformLocation(program, "iTime"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); var mousex=300; var mousey=300; var now; var then = performance.now(); var delta; var copyBoxes=[[650,500],[1200,500],[1750,500],[2300,500],[2850,500],[2850+550,500],[2850+550+550,500],[2850+550+550+550,500]]; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var fps=0; var checktoggle=false; var delta=0; const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 1200, 9600); gl.clearColor(0, 0, 0, 1); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); ctx.fillStyle="rgb(255,255,255)"; ctx.fillRect(0,0,1200,2400); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0,1200,9600); ctx.fillStyle="rgb(0,0,0)"; ctx.font="66px Bona Nova SC" ctx.lineWidth=2; ctx.strokeStyle="rgb(0,0,0)" ctx.strokeText("The Library of Useful Functions",60,110); ctx.fillText("The Library of Useful Functions",60,110); ctx.font="40px Raleway" text("The Library of Useful Functions is a compilation of any#useful bits of math that may help you on your coding #journey. Feel free to click on the info boxes of any of #these to have the function copied to your clipboard.#",100,280,60); ctx.fillStyle="rgb(157, 189, 255,0.3)" for(var i=0;i<copyBoxes.length;i++){ ctx.beginPath(); ctx.roundRect(50,copyBoxes[i][0],1100,copyBoxes[i][1],20); ctx.fill(); } ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("LERP Function#",100,750,60); ctx.font="30px Asap" text("LERP stands for Linear Interpolation and it#allows you to find a number a certain ratio#between two other numbers, forming a#smooth \"interpolation.\"#",550,840,50); ctx.fillStyle="rgb(55,55,155)" ctx.font="30px Source Code Pro" text("lerp(t,a,b){return a+(b-a)t}#",550,1050,50); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Bearkirb's Smooth Step Function#",100,1300,60); ctx.font="30px Asap" text("Smooth Step functions are commonly used#in animations for movement without any#discontinuities in speed. This can be used#as a lerp by doing this:#ratio = smoothStep(ratio);#",550,1390,50); drawGraph(100,1350,1,-2,2,0.5); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Gaussian Distribution#",100,1850,60); ctx.font="30px Asap" text("The Gaussian Distribution can be used as#an accurate way to simulate a probability#distribution. It can be used as a threshold#value when generating random numbers#to get a \"cluster\" of values around a #specific spot.#",550,1940,50); drawGraph(100,1900,2,-4,4,0.5); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Smooth Minimum Function#",100,2400,60); ctx.font="30px Asap" text("The smooth minimum function is an#alternate version of the normal minimum#function where there is a smooth union#between both arguments of the function.#",550,2490,50); drawGraph(100,2450,3,-4,4,0.5); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Spring Simulation#",100,2950,60); ctx.font="30px Asap" text("This function simulates the movement of a#spring, taking in a position, velocity, and#resting position. It outputs a velocity which#you will need to add to the position every #frame.#",550,3040,50); drawGraph(100,3000,4,-2,2,0.5); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Semicircle Function#",100,2950+550,60); ctx.font="30px Asap" text("A simple circle, this function has many#applications in graphics and anywhere that#you may need the height of a circle at any#given point.#",550,3040+550,50); drawGraph(100,3000+550,5,-1.5,1.5,0.9); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Inverse Square#",100,2950+550+550,60); ctx.font="30px Asap" text("If you ever have the need to simulate light#you will be needing this function. It returns#light intensity based on distance from a#source, giving a realistic gradient of#luminance.#",550,3040+550+550,50); drawGraph(100,3000+550+550,6,-3.5,3.5,0.1); ctx.fillStyle="rgb(2,2,2)" ctx.font="Bold 60px Asap" text("Bearkirb's Hash#",100,2950+550+550+550,60); ctx.font="30px Asap" text("This function is an alternative way for#generating random numbers. It takes in an#input and a seed value, and will return the#same \"random\" number given the same#input values. ( unlike Math.random() )#",550,3040+550+550+550,50); drawGraph(100,3000+550+550+550,7,-3.5,3.5,0.5); ctx.fillStyle="rgb(2,2,2)" text("This function is an alternative way for#generating random numbers. It takes in an#input and a seed value, and will return the#same \"random\" number given the same#input values. ( unlike Math.random() )#",550,3040+550+550+550,50); ctx.fillStyle="rgb(2,2,2)" ctx.font="30px Raleway" text("If you have any useful functions (of x) then feel free to post them in the T&T#and I will add them to this database. After all, no library can be complete#with just one author! :P#",80,3040+550+550+550+500,50); text("Easter egg.#",80,3040+550+550+550+4900,50); var justCopied=200; var copyPos=0; function render() { window.requestAnimationFrame(render); frameCount+=1.0; drawGraph(100,800,0,-3.14,3.14,0.5); delta++; for(var i=0;i<copyBoxes.length;i++){ if(mouseX2>50&&mouseX2<1100&&mouseY2>copyBoxes[i][0]&&mouseY*2<copyBoxes[i][0]+copyBoxes[i][1]){ if(clickToggle){ justCopied=0; var x = document[0 \|\| "createElement"]("textarea"); document.body.appendChild(x); x.style="display:none;" x.value = "var yourFunction = " + functionsArray[i].toString(); x.select(); document.execCommand("copy"); } } } justCopied++ ctx2.clearRect(0,0,1200,1200); ctx2.font="40px Source Code Pro" ctx2.fillStyle="rgb(5,5,5,"+Math.min(4-justCopied/50,0.8)+")" ctx2.beginPath(); ctx2.roundRect(300,1200-(118-Math.pow(0.95,justCopied-100)),600,100,40) ctx2.fill(); ctx2.fillStyle="rgb(175,205,255,"+(4-justCopied/50)+")" ctx2.fillText("Copied Successfully!",360,1200-(55-Math.pow(0.95,justCopied-100))); clickToggle=false; // } } render(); } main(); //functions: lerp, smooth lerp, gaussian, smooth min, smooth abs </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNv8vtC4Cww
Votes	5
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	Bearkirb314🐻‍❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	4 months ago, 1725937208334
Updated	4 months ago, 1725937208334
Source Deleted	unknown