Viewing Program

Program Data

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

Title	Crazy Cube Shader
ID	6721152057671680
Created	9 years ago, 1478793005850
Updated	9 years ago, 1478877792970
Code	<!DOCTYPE html> <!-- Not using disallowed functionality --> <!-- Yes, this is an HTML port of another program of mine, which was flagged and taken down. Please do not flag this program for plagiarism, as all code is mine. Please do not flag this program for disallowed functionality, as it does not violate any of the webpage guidelines. Thank You, Swax97 --> <!-- If you're just seeing a black screen, try enabling WebGL. Here are some instructions for popular browsers: https://www.khanacademy.org/computer-programming/webgl-help/4591506649 --> <html> <head> <meta charset="utf-8"> <title>Crazy Cube Shader</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> body { margin: 0; overflow: hidden; background: #000; } </style> </head> <body> <canvas id="display" width="400" height="400"></canvas> </body> <script id="fragment" type="frag-shader"> #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif //Constants for the raymarcher #define MARCH_EPS 0.01 #define MARCH_STEP 0.95 #define FAR 4.0 uniform float time; uniform vec2 res; //Create a 2-dimensional rotation matrix mat2 rot2 (float angle){ float ca = cos(angle), sa = sin(angle); return mat2(ca, sa, -sa, ca); } //The distance map function (defines the cube and distortions) float dmap (vec3 p) { //Apply distortions to space float ry = (p.x * sin(time * 2.82) * 0.5 + sin(time * 2.75) * 0.8 + time); p.xz = rot2(p.y cos(time * 2.65) * 0.5 + cos(time * 2.91) * 0.8 + time); p.yz = rot2(ry); //Rounded cube with Minkowski distance vec3 p4 = ppppp; return pow(dot(p4, p4), 0.1) - 0.6; } //Raymarching function float trace(vec3 ro, vec3 rd, inout float close){ float d, t = 0.0; //60 iterations max for (int i = 0; i < 60; i++){ //sample distance map d = dmap(ro + rd t); //If close to the surface, or sufficiently far, break if (abs(d) < MARCH_EPS \|\| t > FAR) break; //Save the closest distance (for the background effect) close = min(close, d); //March t += d * MARCH_STEP; } //Pseudo-code (-1.0 represents not hitting the cube): //if (d < MARCH_EPS) return t; //else return -1.0; return (t+1.0) * step(d, MARCH_EPS) - 1.0; } //Apply specular and diffuse lighting void light (inout vec3 lig, float dp, vec3 col){ dp = max(0.0, dp);//Make sure light is positive lig += (dp0.3/ + dpdpdpdp0.150/) (col);//diffuse lig += ( dpdpdpdp0.3) * (col + 1.0);//specular } //Main function (called for every fragment in the image) void main(void){ //Calculate coordinate space (-1 to +1 on the smaller dimension) vec2 uv = (2.0 * gl_FragCoord.xy - res.xy) / min(res.x, res.y); //Ray origin and direction vec3 ro = vec3(.0, .0, 3.0); vec3 rd = normalize(vec3(uv, -1.5)); //Perform raymarch and save the closest distance float close = 4.0; float t = trace(ro, rd, close); //t will be > 0 if it is not -1.0 //This will be true if the ray hits the cube if (t > 0.0){ //End-point, or point of intersection vec3 end = ro + rd * t; //Tetrahedral normal calculation const vec2 eps = 0.002 * vec2(-1.0, 1.0); vec3 nml = normalize(eps.xxx * dmap(vec3(end + eps.xxx)) + eps.yyx * dmap(vec3(end + eps.yyx)) + eps.xyy * dmap(vec3(end + eps.xyy)) + eps.yxy * dmap(vec3(end + eps.yxy))); //Light starts out black vec3 lig = vec3(0.0); //Rotate the normal (effectively rotating the lights) nml.xz = rot2(time); nml.yz = rot2(time0.314159); //Apply six lights perpendicular to the faces of a cubes light(lig, +nml.x, vec3(1., 1., 0.)); light(lig, -nml.x, vec3(1., 0., 1.)); light(lig, +nml.y, vec3(0., 1., 1.)); light(lig, -nml.y, vec3(0., 0., 1.)); light(lig, +nml.z, vec3(0., 1., 0.)); light(lig, -nml.z, vec3(1., 0., 0.)); //Write the color to the screen gl_FragColor = vec4(lig, 1.0); } else { //Calculate aura vec3 aur = vec3(0.3) / (closeclose + 1.0); //Add in background color aur += vec3(0.25, 0.2, 0.3); //Write the color to the screen gl_FragColor = vec4(aur, 1.0); } } </script> <script> var canvas = document.getElementById("display"); var width = canvas.width; var height = canvas.height; var frame = window.requestAnimationFrame; var source = document.getElementById("fragment").text; var url = "https://www.khanacademy.org/api/labs/scratchpads/6315630103953408?callback=?"; $.getJSON(url, function(data){ eval(data.revision.code);//I know how this looks, but it's safe }); </script> </html>
Folds	158,168
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgITHopv4Cww
Votes	327
Spin-Offs	82
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	◄▓▒░Swax97░▒▓►
Author Name	swax97
Author ID	kaid_923591327600038001835478
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739461119292
Updated	8 months ago, 1744828902698
Source Deleted	unknown