API tools faq
paste
Advertisement
ollj

voronoy map generator

ollj
May 9th, 2016
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  2.  <title>Chrome,Opera,are better for Webgl</title><style>body{margin: 0px;overflow: hidden;}</style></head> <body><canvas id="can"></canvas><div id="i"></div><script id="vs"type="x-shader/vertex">attribute vec3 position;void main(){gl_Position=vec4(position,1.0);}</script><script id="fs"type="x-shader/fragment">
  3.  //the interesting code segment that sets the scene starts at line 33:
  4.  //@Ollj made this;
  5.  //...tiny Offline HTML5 WebGl|GLES canvas Boilerplate ShaderToy.com GlslSandbox GLSL Vertex Shader Test
  6.  //...to more easily code GlGl offline, without any external libraries as single .html file, best with Chrome.
  7.  //The methods are;
  8.  //...commonly used to visualize linear algebra, geometry or raymarching/sphere-tracking signed distance functions.
  9.  //The error message line numbers are;
  10.  //... off by +1 line, that line is the html header above
  11.  //... and even though error messages are minimalistic glsl, ollj saw other boilerplates handling errors much worse.
  12.  //the IO functions of the Boilerplate;
  13.  //...is still pretty messy, handlers and variables exist but are not utilized well. mouse "works"
  14.  //...no keyboard input in here, as I saw no use for it, not yet.
  15. #ifdef GL_ES
  16. precision highp float;
  17. #endif
  18. //#extension GL_OES_standard_derivatives : enable
  19. //"GL_OES_standard_derivatives" is used a lot in shadertoy but it just doesn't work too well for many environments.
  20. ///---start of input values, constant and identical for each pixel, set by "Boilerplate" code segment FAR below---
  21. //uniforms have duplicate aliases for compatibility to copy paste scene-code from different sources.
  22. uniform vec2 res;////number of screenspace pixel.xy
  23. uniform vec2 iResolution;//<-res
  24. uniform vec2 resolution; //<-res
  25. uniform float time;//increments over time for animation
  26. uniform float iGlobalTime;//<-time
  27. uniform vec2 mouse;//mouse position.xy
  28. uniform vec2 iMouse;//<-mouse, some applications insist on a vec4 mouse.
  29. //no support for images yet.
  30. #ifdef GL_ES
  31. precision mediump float;
  32. #endif
  33. ////---end of input values, constant and identical for each pixel, set by "Boilerplate" code segment FAR below---
  34. ////------start of variable scene code---
  35.  
  36. // Voronoi
  37. // By: Brandon Fogerty
  38. // bfogerty at gmail.com
  39. // xdpixel.com
  40. //@ollj modified it to use as simple "random level generator" by making the following values constant or seeded:
  41. //- mx mouse.x  //set voronoi-zoom -> larger regions
  42. #define mx mouse.x
  43. //- my mouse.y  //set voronoi-seed within randomVec2() -> different level.
  44. #define my mouse.y
  45. //- tilesize //set tile size. application dependent //larger tilesize makes larger more blocky image.
  46. #define tilesize 10.0
  47. //- darkness //set brightness-threshold that turns flattened grey-scale image to monochrome image.
  48. //           //larger darkness makes more cells black, -0.5->0%; 0.5->50%; 1.5=100%
  49. #define darkness 0.7
  50. //- t time   //Brownian-like motion of voronoi-cells.
  51. #define t time
  52. //below lines 62 and 68 are optional masks. remove them to visualize the underlining subroutines.
  53.  
  54. vec2 randomVec2(vec2 p){mat2 m=mat2(15.27,47.63,99.41,88.98);return fract(sin(m*p*my)*46839.32);}
  55. vec2 voronoi(in vec2 p){vec2 g=floor(p);vec2 f=fract(p);vec3 res=vec3(100.0,0.0,0.0);
  56.  for(int y=-1;y<=1;++y){for(int x=-1;x<=1;++x){
  57.   vec2 l=vec2(x,y);vec2 o=randomVec2(l+g);
  58.   float d=distance(l+(sin(t*o)*0.5+0.5),f);
  59.   if(d<res.x){res=vec3(d,o);}}}return vec2(res.yz);}
  60. void main(void){vec4 p=gl_FragCoord;
  61. //below line is optional, makes scene blocky by applying [tilesize] as voxel size.
  62. p.x-=mod(p.x,tilesize);p.y-=mod(p.y,tilesize);//doing mod() per dimension makes it more backwards compatible.
  63. vec2 v=((p.xy/ resolution.xy)*2.0-1.0)*res.x/res.y;vec2 c=voronoi(v*mx*10.);
  64. vec3 f=cos(c.x*10.+vec3(1.,2.,3.))+.6;//3 color dimensions
  65. //vec3 f=cos(c.x*10.+vec3(1.,0.,0.));//1 color dimension
  66. //below line is optional, increases contrast to monochrome
  67. if(f.x>darkness)f=vec3(1,1,1);else f=vec3(0,0,0);//increase contrast to moochrome
  68.  gl_FragColor=vec4(f,1.0);}
  69.  
  70. ///-------end of variable scene code-----
  71. ///-------end of variable scene code-----
  72. //below is a wrapper to bridge from common other boilerplates to Shadertoy namespace
  73. //void main(void){vec4 c=vec4(0.0);mainImage(c,gl_FragCoord.xy);c.w=1.0;gl_FragColor=c;}
  74. //if (you get the error message "no main() function") just uncomment the line above.
  75.  
  76. </script><script>//crossBrowser.requestAnimationFrame by paulirish.com/2011/requestanimationframe-for-smart-animating
  77. //start of Boilerplate
  78. window.requestAnimationFrame=window.requestAnimationFrame||(function(){return window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback,element){window.setTimeout(callback,50/3);};})();
  79. var c,gl,b,v,f,p,o,mx,my//lots of var's needed to initialize glsl and to bridge a html5 canvas and glsl.
  80. var lastMouseX = null;var lastMouseY=null;var mouseDown=false;
  81. var mdX=null;var mdY=null;//mouse speed as derivation of mouse positions over time.
  82. function handleMouseDown(event){mouseDown = true;
  83.   //lastMouseX=event.clientX;
  84.   //lastMouseY=event.clientY;
  85.   mx=event.clientX*0.001;my=event.clientY*0.001;
  86. }function handleMouseUp(event){mouseDown=false;
  87. }function handleMouseMove(event){
  88.   //if (!mouseDown){return;}
  89.   var newX=event.clientX*0.001;var newY=event.clientY*0.001;
  90.   //var deltaX = newX - lastMouseX;
  91.   //var newRotationMatrix = mat4.create();
  92.   //mat4.identity(newRotationMatrix);
  93.   //mat4.rotate(newRotationMatrix, degToRad(deltaX / 10), [0, 1, 0]);
  94.   //  var deltaY = newY - lastMouseY;
  95.   //  mat4.rotate(newRotationMatrix, degToRad(deltaY / 10), [1, 0, 0]);
  96.   // mat4.multiply(newRotationMatrix, moonRotationMatrix, moonRotationMatrix);
  97.   //lastMouseX=newX;
  98.   //lastMouseY=newY;
  99.   mx=newX;my=newY;}//making a compatible UI, something I don't want to spend much time with for now.
  100.  par={start_time:new Date().getTime(),time:0,screenWidth:0,screenHeight:0,screenRatio:0};init();animate();
  101. function init(){v=document.getElementById('vs').textContent;f=document.getElementById('fs').textContent;
  102.  c=document.querySelector('canvas');
  103.  c.onmousedown       =handleMouseDown;
  104.  document.onmouseup  =handleMouseUp;
  105.  document.onmousemove=handleMouseMove;
  106.  try{gl=c.getContext('experimental-webgl');}catch(error){}if(!gl){throw "webgl.context.create.fail";}
  107.  b=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,b );
  108.  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1.0,-1.0,1.0,-1.0,-1.0,1.0,1.0,-1.0,1.0,1.0,-1.0,1.0]), gl.STATIC_DRAW);p=createProgram(v,f);onWindowResize();window.addEventListener('resize',onWindowResize,false);
  109. }function createProgram(v,f){var p=gl.createProgram();var vs=createShader(v,gl.VERTEX_SHADER);
  110.  var fs=createShader('#ifdef GL_ES\nprecision highp float;\n#endif\n\n'+f,gl.FRAGMENT_SHADER);
  111.  if(vs==null||fs==null)return null;
  112.  gl.attachShader(p,vs);gl.attachShader(p,fs);gl.deleteShader(vs);gl.deleteShader(fs);gl.linkProgram(p);
  113.  if(!gl.getProgramParameter(p,gl.LINK_STATUS)){alert("ERROR:\n"+"VALIDATE_STATUS: "+
  114.   gl.getProgramParameter(p,gl.VALIDATE_STATUS)+"\n"+"ERROR: "+gl.getError()+"\n\n"+"-Vertex Shader-\n"+v+
  115.   "\n\n"+"-Fragment Shader-\n"+f);return null;}return p;
  116. }function createShader(src,type){var s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);
  117.  if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){
  118.   alert((type==gl.VERTEX_SHADER?"VERTEX":"FRAGMENT")+" SHADER:\n"+gl.getShaderInfoLog(s));return null;}return s;
  119. }function onWindowResize(event){c.width =window.innerWidth;c.height=window.innerHeight;
  120.  par.screenWidth =c.width;par.screenHeight=c.height;gl.viewport(0,0,c.width,c.height);
  121.  //document.onmousemove=hmm;
  122. }function animate(){requestAnimationFrame(animate);render();
  123. }function hmm(event){//event.clientX; .Y <- mouse when klicked on an element.
  124. //var r=c.getBoundingClientRect();
  125. //mx=event.clientX;//-(r.left+r.width *0.5);
  126. //my=event.clientY;//-(r.top +r.height*0.5);
  127. //mdX=mx*0.00005;mdY=my*0.00005;
  128. }function render(){if(!p)return;par.time=new Date().getTime()-par.start_time;
  129. //if(mx<0.1)mx=0.1;//lastMouseX;
  130. //if(mx>1.0)mx=1.0;
  131.  //my=0.0;//lastMouseY;//min(max(my,1.0),0.0);
  132.  //setting uniforms of glsl. this is the bridge between html5-canvas and glsl, .js var's set glsl constants:
  133.  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);gl.useProgram(p);
  134.  gl.uniform1f(gl.getUniformLocation(p,'iGlobalTime'),par.time/1000.0);
  135.  gl.uniform1f(gl.getUniformLocation(p,'time'),par.time/1000.0);
  136.  gl.uniform2f(gl.getUniformLocation(p,'res'),par.screenWidth,par.screenHeight);
  137.  gl.uniform2f(gl.getUniformLocation(p,'resolution'),par.screenWidth,par.screenHeight);
  138.  gl.uniform2f(gl.getUniformLocation(p,'iResolution'),par.screenWidth,par.screenHeight);
  139.  gl.uniform2f(gl.getUniformLocation(p,'mouse' ),mx*1.02,(1.0-my*2.0));
  140.  gl.uniform2f(gl.getUniformLocation(p,'iMouse'),mx*1.02,(1.0-my*2.0));
  141.  gl.bindBuffer(gl.ARRAY_BUFFER,b);//Render
  142.  gl.vertexAttribPointer(o,2,gl.FLOAT,false,0,0);gl.enableVertexAttribArray(o);gl.drawArrays(gl.TRIANGLES,0,6);gl.disableVertexAttribArray(o);}</script></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!