Viewing Program

Program Data

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

Title	Fruit Ninja 3D
ID	5655503662399488
Created	11 months ago, 1706584816087
Updated	7 months ago, 1715901339964
Code	<!DOCTYPE html> <!-- FRUIT NINJA 3D To the judges about lag: This program should have almost NO LAG unless you are on an integrated GPU laptop. This whole game runs using webgl, which is a gpu based rendering system. If your computer does not have one... Well I guess you can see the problem. As long as you have any kind of gpu though it should be fine. On my less crappy laptop it runs PERFECTLY FINE. I would appreciate it greatly if you viewed this program on the appropriate device to give me a proper score, I do not want to be penalized by circumstance. To the judges for real this time: This program is over 1000 lines of dense math, raymarching, rendering, scene managment, hand coded 3D models, and so... so... much... trigonometry 😵. All this is beautifully tied together in an html shell running Javascript code, running Webgl2 shadercode. I am not sure if these programs are graded based off code neatness, but I have made it look very pretty. If you do not think so, that's probably because it's mostly C++, it's not my fault C looks goofy. For C, it looks great imo. Also, ratios for The Wogglebug (my partner in crime) in workload is small. The Wogglebug mentored me in webgl for a bit, but he was not able to really work on anything else because school :( I was also incapacitated for the same reason for a few days, but not for as long. Enjoy :) And feast your eyes! DIRECTIONS: Fruit in the vicinity of your mouse will slice, no need to click or anything. Avoid the bombs, because they will take away 5 seconds off the timer. You can see your highscore in the menu screen. --> <html> <head> <meta charset="utf-8"> <title>Fruit Ninja 3D</title> <style> #gl-canvas { display: none; overflow:hidden; } { overflow:hidden; margin:0px; } </style> <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=Kaushan+Script&family=Rock+Salt&display=swap" rel="stylesheet"> </head> <body> <canvas id = 'canvas' width = '600' height = '600'></canvas> <canvas id = 'gl-canvas' width = '600' height = '600'></canvas> <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 id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump sampler2D; uniform sampler2D iChannel0; precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; uniform vec3 WatermelonPosition; uniform vec3 ApplePosition; uniform vec3 OrangePosition; uniform vec3 PearPosition; uniform vec3 BombPosition; //Rotation matrix that edits the variable passed in. void Rotate(inout vec3 vector, vec2 angle) { vector.yz = cos(angle.y) vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; vector.xz = cos(angle.x) * vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; } //Rotation matrix that returns an edited variable vec3 Rotate2(vec3 vect, vec2 angle) { vec3 vector = vect; vector.yz = cos(angle.y) * vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; vector.xz = cos(angle.x) * vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; return vector; } //SDF for an octahedron. You wont see it here, but it's here trust me. float sdOctahedron(vec3 p, float s) { p = abs(p); return (p.x + p.y + p.z - s) * 0.57735027; } //Random function for 2 dimensions. vec2 random2(vec2 st) { st = vec2(dot(st, vec2(127.1, 311.7)), dot(st, vec2(269.5, 183.3))); return -1.0 + 2.0 * fract(sin(st) * 2378.5453123); } //noise function based off my custom fruit looking voroni noise texture. float noise(vec2 st) { vec2 p = st * 1.2; return texture(iChannel0, vec2(p - floor(p))).g * 2.0 - 1.0; } //noise of a different octave. float noise3(vec2 p) { float ret = 0.0; float div = 1.0; for (int i = 0; i < 1; i++) { ret += noise(p * div) / div; div = 2.0; } return ret; } //noise of a different octave. float noise4(vec2 p) { float ret = 0.0; float div = 1.0; for (int i = 0; i < 3; i++) { ret += noise(p div) / div; div = 2.0; } return ret; } //SDF for a sphere. It's used alot float sdSphere(vec3 p, float s) { return length(p) - s; } //smooth minimum function, makes my fruit not look like it was made by a 3 year old in blender. float smin(float a, float b, float k) { float h = max(k - abs(a - b), 0.0) / k; return min(a, b) - h h * k * (1.0 / 4.0); } //smax, same as smin but smax float smax(float a, float b, float k) { float h = min(k - abs(a - b), 0.0) / k; return max(a, b) - h * h * k * (1.0 / 4.0); } //SDF for a capsule or line if you want to get technical. float sdCapsule(vec3 p, vec3 a, vec3 b, float r) { vec3 pa = p - a, ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h) - r; } //SDF for a plane. It's a wall... The're in the walls. float sdPlane(vec3 p, vec3 n, float h) { // n must be normalized return dot(p, n) + h; } //Adds color to the plane. Wow vec4 sdPlaneDetails(vec3 p, vec3 n, float h) { // n must be normalized float f = dot(p, n) + h; vec3 color = vec3(0.7, 0.5, 0.2); color -= noise4(vec2(p.x / 16.0, p.y / 90.0)) / 25.0 + 0.20; return vec4(color.r, color.g, color.b, f); } //SDF for a cylinder float sdCappedCylinder(vec3 p, float h, float r) { vec2 d = abs(vec2(length(p.xz), p.y)) - vec2(r, h); return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)); } //SDF subtraction function. Gotta bore holes into fruit somehow float opSmoothSubtraction(float d1, float d2, float k) { float h = clamp(0.5 - 0.5 * (d2 + d1) / k, 0.0, 1.0); return mix(d2, -d1, h) + k * h * (1.0 - h); } //Bomb coloring and normal mapping vec4 BombDetails(vec3 pos) { vec3 color = vec3( clamp( clamp(20.0 - abs(pos.x * 20.0) * 20.0, 0.05, 1.0) + clamp(80.0 - abs((pos.y + 0.3) * 20.0) * 20.0, 0.05, 1.0) - 1.0 + clamp(10.0 - distance(pos.xy, vec2(0.0, 0.05)) * 200.0, 0.1, 1.0), 0.2, 1.0) - 0.1, 0.1, 0.1); float f3 = sdSphere(pos, 1.0); f3 = min(f3, sdCappedCylinder(pos - vec3(0.0, -0.5, 0.0), 0.59, 0.2)); return vec4(color.r, color.g, color.b, f3); } //SDF for a bomb float Bomb(vec3 pos) { float f3 = sdSphere(pos, 1.0); f3 = min(f3, sdCappedCylinder(pos - vec3(0.0, -0.5, 0.0), 0.59, 0.2)); return f3; } //Pear coloring and normal mapping vec4 PearDetails(vec3 pos) { vec3 color = vec3(0.6 + noise3(pos.xy / 1.5) / 8.0 + noise3(pos.yz / 1.5) / 8.0, 0.8, 0.1); float f3 = sdSphere(pos, 1.0); f3 = smin(f3, sdSphere(pos - vec3(0.1, -0.8, 0.0), 0.6), 0.2); f3 = smin(f3, sdSphere(pos - vec3(0.05, -0.4, 0.0), 0.8), 0.2); f3 = smin(f3, sdSphere(pos - vec3(0.25, -1.2, 0.0), 0.4), 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.4, -1.4, 0.0), vec3(0.25, -1.8, 0.0), 0.02), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.9, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.7, 0.0), 0.01), f3, 0.3); float nex = sdCapsule(pos, vec3(0.4, -1.2, 0.0), vec3(0.3, -1.8, 0.0), 0.06); if (nex < f3) { f3 = nex; color = vec3(0.6, 0.4, 0.3) / 1.5; } f3 -= -noise3(pos.xy * 5.0) / 1620.0 - noise3(pos.yz * 5.0) / 1620.0; float curf3 = f3; if (f3 > curf3 + 0.05) { color = vec3(1.0, 1.0, 0.9); } return vec4(color.r, color.g, color.b, f3); } float Pear(vec3 pos) { float f3 = sdSphere(pos, 1.0); f3 = smin(f3, sdSphere(pos - vec3(0.1, -0.8, 0.0), 0.6), 0.2); f3 = smin(f3, sdSphere(pos - vec3(0.05, -0.4, 0.0), 0.8), 0.2); f3 = smin(f3, sdSphere(pos - vec3(0.25, -1.2, 0.0), 0.4), 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.4, -1.4, 0.0), vec3(0.25, -1.8, 0.0), 0.02), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.9, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.7, 0.0), 0.01), f3, 0.3); float nex = sdCapsule(pos, vec3(0.4, -1.2, 0.0), vec3(0.3, -1.8, 0.0), 0.06); if (nex < f3) { f3 = nex; } float curf3 = f3; f3 += sin(pos.x * 10.0) / 200.0 + cos(pos.y * 10.0) / 200.0 + sin(pos.z * 10.0) / 200.0; return f3; } //Orange coloring and normal mapping vec4 OrangeDetails(vec3 pos) { vec3 color = vec3(1.3 + noise3(pos.xz / 1.5) / 9.0, 0.5, 0.03); float f3 = sdSphere(pos, 1.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.9, 0.0), 0.01), f3, 0.01); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.99, 0.0), 0.01), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.9, 0.0), 0.01), f3, 0.1); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.99, 0.0), 0.01), f3, 0.25); f3 -= -noise3(pos.xy * 6.0) / 1520.0 - noise3(pos.yz * 6.0) / 1520.0; float curf3 = f3; float curf4 = f3; if (f3 > curf4 + 0.02) { color = vec3(1.0, 0.5, 0.2) * 8.5; } if (f3 > curf3 + 0.09) { color = vec3(1.0, 0.5, 0.2) * 1.5; } return vec4(color.r, color.g, color.b, f3); } float Orange(vec3 pos) { float f3 = sdSphere(pos, 1.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.9, 0.0), 0.01), f3, 0.01); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.99, 0.0), 0.01), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.9, 0.0), 0.01), f3, 0.01); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.99, 0.0), 0.01), f3, 0.2); float curf3 = f3; f3 += sin(pos.x * 10.0) / 200.0 + cos(pos.y * 10.0) / 200.0 + sin(pos.z * 10.0) / 200.0; return f3; } float Apple(vec3 pos) { float f3 = sdSphere(pos, 1.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.7, 0.0), 0.005), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.99, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.7, 0.0), 0.005), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.99, 0.0), 0.01), f3, 0.8); float nex = sdCapsule(pos, vec3(0.2, -1.0, 0.0), vec3(-0.1, -0.4, 0.0), 0.06); if (nex < f3) { f3 = nex; } float curf3 = f3; f3 += sqrt(pos.x * pos.x + pos.z * pos.z) / 10.0; f3 += sin(pos.x * 12.0) / 150.0 - cos(pos.y * 4.0 + 2.0) / 80.0 + sin(pos.z * 12.0) / 150.0; return f3; } //Apple coloring and normal mapping vec4 AppleDetails(vec3 pos) { vec3 color = vec3(0.9 - noise3(pos.xz / 1.1) / 42.0, 0.108, 0.052); float f3 = sdSphere(pos, 1.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.7, 0.0), 0.005), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 1.4, 0.0), vec3(0.0, 0.99, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.7, 0.0), 0.005), f3, 0.2); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -1.4, 0.0), vec3(0.0, -0.99, 0.0), 0.01), f3, 0.8); f3 -= -noise3(pos.xy * 8.0) / 5920.0 - noise3(pos.yz * 8.0) / 5920.0; f3 += sqrt(pos.x * pos.x + pos.z * pos.z) / 10.0; f3 += sin(pos.x * 12.0) / 150.0 - cos(pos.y * 4.0 + 2.0) / 80.0 + sin(pos.z * 12.0) / 150.0; float nex = sdCapsule(pos, vec3(0.2, -1.0, 0.0), vec3(-0.1, -0.4, 0.0), 0.06); if (nex < f3) { f3 = nex; color = vec3(0.6, 0.4, 0.3) / 2.5; } float curf3 = f3; float curf4 = f3; if (f3 > curf4 + 0.02) { color = vec3(1.0, 0.5, 0.2) * 8.5; } return vec4(color.r, color.g, color.b, f3); } float Watermelon(vec3 pos) { float f3 = sdSphere(pos, 2.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 2.4, 0.0), vec3(0.0, 1.99, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -2.4, 0.0), vec3(0.0, -1.99, 0.0), 0.01), f3, 0.8); float nex = sdCapsule(pos, vec3(0.2, -2.0, 0.0), vec3(-0.1, -1.4, 0.0), 0.06); if (nex < f3) { f3 = nex; } return f3; } //Wmelon coloring and normal mapping vec4 WatermelonDetails(vec3 pos) { vec3 color = vec3(0.08, 0.508, 0.052) + (noise4(pos.xz / 1.1) / 12.0) / max(abs(pos.y) * 2.0, 1.0); float f3 = sdSphere(pos, 2.0); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, 2.4, 0.0), vec3(0.0, 1.99, 0.0), 0.01), f3, 0.8); f3 = opSmoothSubtraction( sdCapsule(pos, vec3(0.0, -2.4, 0.0), vec3(0.0, -1.99, 0.0), 0.01), f3, 0.8); f3 -= -noise3(pos.xy * 3.0) / 5920.0 - noise3(pos.yz * 3.0) / 5920.0; float nex = sdCapsule(pos, vec3(0.2, -2.0, 0.0), vec3(-0.1, -1.4, 0.0), 0.02); if (nex < f3) { f3 = nex; color = vec3(0.9, 0.9, 0.4) / 1.8; } float curf3 = f3; if (f3 > curf3 + 0.15) { color = vec3(1.0, 0.2, 0.2) * 1.0; } return vec4(color.r, color.g, color.b, f3); } float Scene(vec3 pos) { float f = Watermelon(Rotate2(pos - WatermelonPosition, vec2(iTime / 100.0, iTime / 207.0))); f = min(f, Apple(Rotate2(pos - ApplePosition, vec2(-iTime / 100.0, iTime / 207.0)))); f = min(f, Orange(Rotate2(pos - OrangePosition, vec2(-iTime / 100.0, -iTime / 207.0)))); f = min(f, Pear(Rotate2(pos - PearPosition, vec2(iTime / 100.0, -iTime / 207.0)))); f = min(f, Bomb(Rotate2(pos - BombPosition, vec2(iTime / 100.0, iTime / 207.0)))); f = min(f, sdPlane(pos, vec3(0.0, 0.0, -1.0), 1.0)); return f; } //Scene coloring and normal mapping vec4 SceneDetails(vec3 pos) { vec4 f = WatermelonDetails(Rotate2(pos - WatermelonPosition, vec2(iTime / 100.0, iTime / 207.0))); vec4 f2 = AppleDetails( Rotate2(pos - ApplePosition, vec2(-iTime / 100.0, iTime / 207.0))); if (f2.a < f.a) { f = f2; } f2 = OrangeDetails(Rotate2(pos - OrangePosition, vec2(-iTime / 100.0, -iTime / 207.0))); if (f2.a < f.a) { f = f2; } f2 = PearDetails( Rotate2(pos - PearPosition, vec2(iTime / 100.0, -iTime / 207.0))); if (f2.a < f.a) { f = f2; } f2 = BombDetails( Rotate2(pos - BombPosition, vec2(iTime / 100.0, iTime / 207.0))); if (f2.a < f.a) { f = f2; } f2 = sdPlaneDetails(pos, vec3(0.0, 0.0, -1.0), 1.0); if (f2.a < f.a) { f = f2; } // sdPlane(pos,vec3(0.0,0.0,-1.0),1.0) return f; } //Cool gradient math to get the normal vector for any SDF... GRADIENT DESCENT YAYYYAYAYYYYYY vec3 calcNormal(in vec3 pos) { vec2 e = vec2(1.0, -1.0) * 0.00001; return normalize(e.xyy * SceneDetails(pos + e.xyy).a + e.yyx * SceneDetails(pos + e.yyx).a + e.yxy * SceneDetails(pos + e.yxy).a + e.xxx * SceneDetails(pos + e.xxx).a); } out vec4 fragColor; void main() { vec2 iResolution = vec2(600.0, 600.0); vec2 uv = 8.0 * (gl_FragCoord.xy - iResolution.xy * 0.5) / -iResolution.x; vec3 ray = normalize(vec3(-uv.x / 8.0, -uv.y / 8.0, 0.6)); vec3 pos = vec3(-0.0, 0, -12.0); float renderDistance = 20.0; vec3 cameraPos = pos; vec2 angle = -((vec2(-600.0 - drawx, drawy)) / (iResolution.xy / 3.141) + vec2(3.1415 / 2.0, 3.141 / 2.0)) / 2.0; // Rotate(pos,angle); Rotate(ray, angle); // Rotate(cameraPos,angle); float iters = 0.0; for (int i = 0; i < 30; i++) { float h = Scene(pos); if (h < 0.009 \|\| distance(cameraPos, pos) > renderDistance * 1.0 \|\| pos.z > 12.1) { break; } pos += ray * h; } vec3 lightSource = vec3(10.0, 10.0, 10.0); fragColor.rgb = vec3(0.0, 0.0, 0.0); vec3 normal; if (Scene(pos) < 0.01) { normal = calcNormal(pos); if (Scene(pos - normal / 100.0) > 0.01) { normal = -normal; } float light = dot(normal, normalize(cameraPos - pos)); vec3 ballColor = vec3(0.1, 0.1, 0.1); vec3 lightCol = vec3(1); vec3 ambient = SceneDetails(pos).rgb; vec3 spec = lightCol * 0.6; float light2 = light; light2 = light2; light2 = light2; light2 = light2; light2 = light2; vec3 total = ((light * lightCol) + light2 * spec); fragColor.rgb = ambient; fragColor.rgb = total; fragColor.rgb -= max((distance(cameraPos, pos) - 18.0) / 4.0, 0.0); } fragColor = vec4(fragColor.r, fragColor.g, fragColor.b, 1.0); } </script> <script type = 'module'> alert("This takes a bit to load. Close this window to continue."); const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var mouseX = 0, pmouseX = 0, mouseY = 0, pmouseY = 0, clicked = false, key = {}; ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); 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; }); window.addEventListener('mousedown', event => { clicked = true; //clicking? }); window.addEventListener('mouseup', event => { clicked = false; //not clicking so set clicked to false }); 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; } var rand1 = Math.random() 2 - 1; var rand2 = Math.random() + 3; var w = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; var b = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; var p = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; var a = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; var o = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; function main() { const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); 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 BombPosition = gl.getUniformLocation(program, "BombPosition"); const PearPosition = gl.getUniformLocation(program, "PearPosition"); const OrangePosition = gl.getUniformLocation(program, "OrangePosition"); const WatermelonPosition = gl.getUniformLocation(program, "WatermelonPosition"); const ApplePosition = gl.getUniformLocation(program, "ApplePosition"); const iChannel0 = gl.getUniformLocation(program, "iChannel0"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); let texture0 = gl.createTexture(); let textureCnv = new OffscreenCanvas(600, 600); let ctx2 = textureCnv.getContext('2d'); function smin(a, b, k) { var h = Math.max(k - Math.abs(a - b), 0.0) / k; return Math.min(a, b) - h * h * k * (1.0 / 4.0); } ctx2.fillStyle = "rgb(255, 255, 255)" ctx2.fillRect(0, 0, 600, 600); var data = ctx2.getImageData(0, 0, 600, 600); var pts = []; for (var y = 0; y <= 46; y++) { pts.push({ x: Math.random() * 600, y: Math.random() * 600 }) } var x = 0; var speed = 600; for (var x3 = 0; x3 < speed; x3++) { if (x < 600) { x++; } for (var y = 0; y < 600; y++) { var index1 = (x) * 4 + (y) * 600 * 4 var dist = 50; for (var i = 0; i < pts.length; i++) { for (var y1 = 0; y1 <= 3; y1++) { for (var x1 = 0; x1 <= 3; x1++) { var cx = (pts[i].x - x + x1 * 600 - 600); var cy = (pts[i].y - y + y1 * 600 - 600); dist = smin(dist, Math.sqrt(cx * cx + cy * cy), 10.0); } } } dist = 255 - (dist * 5 - 25); data.data[index1 + 0] = dist data.data[index1 + 1] = dist data.data[index1 + 2] = dist data.data[index1 + 3] = 255 } } ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); ctx2.putImageData(data, 0, 0); ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCnv); gl.uniform1i(iChannel0, 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); var mousex = 0; var mousey = 0; var now; var frameCount = 0; var then = performance.now(); var fps = 30; var delta; var scene = "menu"; var interval = 1000 / fps; ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 600, 600); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); ctx.fillStyle = "rgb(0, 187, 204)"; ctx.fillRect(0, 0, 600, 600); function rand(x) { return (x * 10324.4765) % 1; } function distance(x1, y1, x2, y2) { var x = (x1 - x2); var y = (y1 - y2); return Math.sqrt(x * x + y * y); } var particles = []; class fruitParticle { constructor(x, y, xv, yv, r, g, b) { this.x = -(((x) * 13) - 300); this.y = -(((y) * 13) - 300); this.xv = xv; this.yv = yv; this.color = [r, g, b]; this.lifetime = 40; this.size = Math.random() * 12.0 + 2 } update() { this.lifetime--; this.x += this.xv * 3; this.y += this.yv * 3; this.yv += 0.1; } draw() { ctx.fillStyle = "rgb(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + (1.0 - ((50 - this.lifetime) / 50)) + ")" ctx.fillRect(this.x - (mouseX - 300), this.y - (mouseY - 300), this.size, this.size); } } var flashbang = 0; var gameTime = -1; var latestScore = -1; var highScore = -1; var toggle = 0; function runGame() { if (gameTime === -1) { gameTime = frameCount; } if (toggle === 1) { toggle = 0; latestScore = 0; } var mx = (mouseX - 300) / 13; var my = -(mouseY - 300) / 13; // particles.push(new fruitParticle(mx-mx2,my+my2,0,0,255,255,255)); if (distance(mx, my, w.x, w.y) < 2.2) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; latestScore++; for (var i = 0; i < 20; i++) { particles.push(new fruitParticle(w.x - mx * 2, w.y + my * 2, Math.random() * 4 - 2, Math.random() * 4 - 2, 255, 0, 0)); } w = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } if (distance(mx, my, a.x, a.y) < 1.4) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; latestScore++; for (var i = 0; i < 20; i++) { particles.push(new fruitParticle(a.x - mx * 2, a.y + my * 2, Math.random() * 4 - 2, Math.random() * 4 - 2, 255, 255, 200)); } a = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } if (distance(mx, my, o.x, o.y) < 1.4) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; latestScore++; for (var i = 0; i < 20; i++) { particles.push(new fruitParticle(o.x - mx * 2, o.y + my * 2, Math.random() * 4 - 2, Math.random() * 4 - 2, 255, 210, 120)); } o = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } if (distance(mx, my, p.x, p.y) < 1.4) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; latestScore++; for (var i = 0; i < 20; i++) { particles.push(new fruitParticle(p.x - mx * 2, p.y + my * 2, Math.random() * 4 - 2, Math.random() * 4 - 2, 255, 255, 200)); } p = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } if (distance(mx, my, b.x, b.y) < 1.4) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; flashbang = 1; gameTime -= 150.0; b = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } w.x += w.xv; w.y += w.yv; w.yv -= 0.01; if (w.y < -15) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; w = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } b.x += b.xv; b.y += b.yv; b.yv -= 0.01; if (b.y < -15) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; b = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } a.x += a.xv; a.y += a.yv; a.yv -= 0.01; if (a.y < -15) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; a = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } p.x += p.xv; p.y += p.yv; p.yv -= 0.01; if (p.y < -15) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; p = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } o.x += o.xv; o.y += o.yv; o.yv -= 0.01; if (o.y < -15) { rand1 = Math.random() * 2 - 1; rand2 = Math.random() + 3; o = { x: rand1 * 6.0, y: -14, xv: -rand1 / 4, yv: rand2 / 6 }; } gl.uniform1f(drawx, -mouseX); gl.uniform1f(drawy, -mouseY); gl.uniform1f(iTime, frameCount * 5.0); gl.uniform3f(WatermelonPosition, w.x, w.y, 0); gl.uniform3f(PearPosition, p.x, p.y, 0); gl.uniform3f(BombPosition, b.x, b.y, 0); gl.uniform3f(ApplePosition, a.x, a.y, 0); gl.uniform3f(OrangePosition, o.x, o.y, 0); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); for (var i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); if (particles[i].lifetime < 0) { particles.splice(i, 1); } } if (flashbang > 0) { flashbang -= 0.03; } ctx.textAlign = "center" ctx.font = (30) + "px Kaushan Script"; ctx.fillStyle = "rgb(181, 0, 0)" ctx.fillText(Math.max(Math.round(30 - ((frameCount - gameTime) / 30)), 0), 300, 50); if (Math.round(30 - ((frameCount - gameTime) / 30)) < 0) { w.x = 100; p.x = 100; b.x = 100; a.x = 100; o.x = 100; ctx.fillStyle = "rgb(0,0,0," + (Math.max(-(30 - ((frameCount - gameTime) / 30)), 0)) + ")" ctx.fillRect(0, 0, 600, 600); if (30 - ((frameCount - gameTime) / 30) < -2) { scene = "menu"; } } ctx.fillStyle = "rgb(255,255,255," + flashbang + ")" ctx.fillRect(0, 0, 600, 600); frameCount++; } function menu() { toggle = 1; gameTime = -1; ctx.fillStyle = "rgb(108, 191, 199)"; ctx.fillRect(0, 0, 600, 600); ctx.fillStyle = "rgb(235, 0, 59)"; ctx.font = "60px Rock Salt"; ctx.textAlign = "center" ctx.lineWidth = 2.0; ctx.strokeStyle = "rgb(125, 0, 0)" ctx.fillText("Fruit Ninja", 300, 200); ctx.strokeText("Fruit Ninja", 299, 199); ctx.font = "120px Impact"; ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillText("3D", 297, 318); ctx.fillStyle = "rgb(224, 217, 119)"; ctx.fillText("3D", 300, 320); for (var i = 0; i < 120; i++) { ctx.fillStyle = "rgb(255, 0, 0, 0.1)"; var r = rand(i * 2.16398) * 180; ctx.fillRect(50 + r * Math.cos(rand(i) * 6.28), 70 + r * Math.sin(rand(i) * 6.28), 20 - r / 11, 20 - r / 11); } frameCount++; for (var i = 0; i < 120; i++) { ctx.fillStyle = "rgb(9, 0, 255, 0.1)"; var r = rand(i * 1.05) * 180; ctx.fillRect(450 + r * Math.cos(rand(i) * 6.28), 530 + r * Math.sin(rand(i) * 6.28), 20 - r / 11, 20 - r / 11); } ctx.font = (Math.sin(frameCount / 20) * 5 + 60) + "px Kaushan Script"; if (mouseX > 200 && mouseX < 400 && mouseY > 400 && mouseY < 480) { ctx.fillStyle = "rgb(9, 0, 255, 0.4)"; if (clicked) { scene = "countdown"; } } else { ctx.fillStyle = "rgb(9, 0, 255, 0.2)"; } ctx.fillRect(200, 400, 200, 80) ctx.fillStyle = "rgb(71, 0, 0)"; ctx.fillText("SLICE", 295, 460); ctx.font = (28) + "px Kaushan Script"; if (latestScore > highScore) { highScore = latestScore } if (highScore > -1) { ctx.fillText("Latest Score: " + latestScore, 150, 50); ctx.fillText("High Score: " + highScore, 450, 50); } } var curTime = 0; function timer() { if (curTime === 0) { curTime = frameCount; } frameCount++; ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(0, 0, 600, 600); ctx.textAlign = "center" ctx.font = (Math.sin(frameCount / 20) * 5 + 100) + "px Kaushan Script"; ctx.fillStyle = "rgb(181, 0, 0)" if (Math.round(3 - ((frameCount - curTime) / 30)) > 0) { ctx.fillText(Math.round(3 - ((frameCount - curTime) / 30)), 300, 300); } else { ctx.fillText("GO!", 300, 300); } if (3 - (frameCount - curTime) / 30 < 0) { scene = "game" } } function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); if (scene === "menu") { menu(); } else if (scene === "game") { runGame(); } else if (scene === "countdown") { timer(); } } } render(); } main(); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMv26PSFCgw
Votes	84
Spin-Offs	20
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	23 days ago, 1734464235573
Updated	23 days ago, 1734464282949
Source Deleted	unknown