├── 4x4.js ├── bits ├── 4x4module.js ├── butterflycreammodule.js ├── butterflywingmodule.js ├── cactusweird.png ├── camera.js ├── displacementmodule.js ├── feedbackeffect.js ├── foldingfanmodule.js ├── icecreamdripmodule.js ├── implicitcream.js ├── implicitcyl.js ├── jellydisplace.js ├── rotatypointmodule.js └── skelly.json ├── bluecyl.js ├── bye.js ├── cactus.js ├── cylwarp.js ├── feedbackgalaxy.js ├── foldingfan.js ├── ghost ├── main.js └── package.json ├── icecreamsandwich.js ├── jellyfish ├── bunnyears.js ├── chromadumonde.js ├── critter.js ├── gliderwings.js ├── jellyfish.js ├── lambent.js ├── lambent.json ├── objtojson.js ├── package.json ├── removequads.txt ├── rounderwings.js ├── stillness.js ├── unicorn.js ├── unicorn.json ├── unicornwoo.js ├── wings.js └── wingsdiffmaybe.js ├── package.json ├── readme.md ├── rotatypoints.js ├── skellypuff.js ├── skellyscissor.js ├── spinningtop.js ├── swimmypuff.js └── wingpole.js /4x4.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const fourxfour = require('./bits/4x4module.js') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, 2.5, 0] 10 | }) 11 | 12 | const drawfourxfour = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( 18 | abs(mod(hsl.x*2.0+vec3(0.0,4.0,2.0)-hsl.z*5.0,6.0)-3.0)-1.0, 0.0, 1.0 ); 19 | return hsl.z - hsl.y * (rgb-0.5)*(10.0-abs(2.0*hsl.y-1.0)); 20 | } 21 | void main () { 22 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)).xy, 0.5, 1.0); 23 | }`, 24 | vert: ` 25 | precision mediump float; 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnormal; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.zx); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y, r*sin(theta)) + 34 | vnormal*(1.0+cos(10.0*t*r-p.y)); 35 | } 36 | void main () { 37 | vnormal = normal; 38 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 39 | gl_PointSize = 40 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 41 | }`, 42 | attributes: { 43 | position: fourxfour.positions, 44 | normal: normals(fourxfour.cells, fourxfour.positions) 45 | }, 46 | elements: fourxfour.cells, 47 | uniforms: { 48 | t: function(context, props){ 49 | return context.tick/1000 50 | }, 51 | model: function(context, props){ 52 | var theta = context.tick/60 53 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 54 | } 55 | 56 | }, 57 | primitive: "triangles" 58 | }) 59 | 60 | regl.frame(() => { 61 | regl.clear({ 62 | color: [0, 0, 0, 1] 63 | }) 64 | camera(() => { 65 | drawfourxfour() 66 | }) 67 | }) 68 | -------------------------------------------------------------------------------- /bits/4x4module.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | var glvec3 = require("gl-vec3") 3 | var glvec2 = require("gl-vec2") 4 | 5 | /* 6 | var mesh = isosurface.surfaceNets([64,64,64], function(x,y,z) { 7 | return x*x + y*y + z*z - 100 8 | }, [[-11,-11,-11], [11,11,11]]) 9 | */ 10 | 11 | function sdCone( a, b ) //a should be a vec3, b should be a vec2 12 | { 13 | c = glvec2.length([a[0], a[1]]); 14 | return glvec2.dot([b[0], b[1]], [c, a[2]]); 15 | } 16 | var mesh = isosurface.surfaceNets([100,100,100], 17 | function (x, y, z){ 18 | return sdCone([Math.sin(x)*5.0*x-10.0,y/5.0,Math.sin(z)*5.0], [5, 1]) 19 | } 20 | , [[-11,-11,-11], [11,11,11]]) 21 | 22 | module.exports = mesh 23 | -------------------------------------------------------------------------------- /bits/butterflycreammodule.js: -------------------------------------------------------------------------------- 1 | //takes a function for an implicit sphere with a 2 | //displacement and exports the mesh 3 | var isosurface = require("isosurface") 4 | 5 | function displacement (a, b, c){ 6 | return 20*Math.sin(40*a)*Math.sin(60*b)*Math.sin(100*c) 7 | } 8 | 9 | function sphere (y, z, x){ 10 | return x*x + y*y + (z-3)*(z-3) - 10 11 | } 12 | 13 | var mesh = isosurface.surfaceNets([64,64,64], 14 | function (x, y, z){ 15 | return sphere(x, y, z) + displacement(x,y,z) 16 | } 17 | , [[-11,-11,-21], [11,21,11]]) 18 | 19 | module.exports = mesh 20 | -------------------------------------------------------------------------------- /bits/butterflywingmodule.js: -------------------------------------------------------------------------------- 1 | //takes a file that exports a mesh for an implicit surface 2 | //and returns a draw() fn that can be placed in a regl frame 3 | //file 4 | const regl = require('../regl')() 5 | const mat4 = require('gl-mat4') 6 | var rmat = [] 7 | const cyl = require('./butterflycreammodule.js') 8 | //perform operation on cyl...ie, -cyl, +cyl, and combined 9 | //cyl so that drawcyl operates on both sets of data 10 | const normals = require('angle-normals') 11 | module.exports = function (regl){ 12 | const drawcyl = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 22 | }`, 23 | vert: ` 24 | precision mediump float; 25 | uniform mat4 model, projection, view; 26 | attribute vec3 position, normal; 27 | varying vec3 vnormal; 28 | uniform float t; 29 | vec3 warp (vec3 p){ 30 | vec3 a = p; 31 | a.x = p.x; 32 | a.y = p.z; 33 | a.z = p.x; 34 | float r = length(2.0*a.zx*sin(t*a.yz)); 35 | float theta = atan(a.y, a.z); 36 | return vec3 (r*cos(theta), a.y, r*sin(theta)); 37 | //return vec3 (r*cos(p.y), p.y, r*sin(theta)); 38 | } 39 | void main () { 40 | vnormal = normal; 41 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 42 | gl_PointSize = 43 | (20.0*(5.0+sin(t*20.0+length(position))))/gl_Position.w; 44 | }`, 45 | attributes: { 46 | position: cyl.positions, 47 | normal: normals(cyl.cells, cyl.positions) 48 | }, 49 | elements: cyl.cells, 50 | uniforms: { 51 | t: function(context, props){ 52 | return context.tick/1000 53 | }, 54 | model: function(context, props){ 55 | mat4.identity(rmat) 56 | var theta = -context.tick/60 57 | //return mat4.rotateY(rmat, mat4.identity(rmat), theta) 58 | //return mat4.scale(rmat, mat4.identity(rmat), 59 | //[Math.sin(10.0*context.time), Math.sin(theta), 3.0]) 60 | //mat4.scale(rmat, mat4.identity(rmat), 61 | //[ 0.25, 0.25, 0.25]) 62 | mat4.translate(rmat, mat4.identity(rmat), 63 | [0,Math.sin(context.time)+2.0,context.time*0.4-10.0]) 64 | return rmat 65 | }, 66 | projection: function (context){ 67 | return mat4.perspective( 68 | mat4.create(), Math.PI/4, 69 | context.viewportWidth/context.viewportHeight, 0.01, 70 | 1000 71 | ) 72 | } 73 | }, 74 | primitive: "points" 75 | }) 76 | return function(){ 77 | drawcyl() 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /bits/cactusweird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mk30/regl-example-experiments/ee137567e6910a88caacb4c1cddbe4af02510c8d/bits/cactusweird.png -------------------------------------------------------------------------------- /bits/camera.js: -------------------------------------------------------------------------------- 1 | var mouseChange = require('mouse-change') 2 | var mouseWheel = require('mouse-wheel') 3 | var identity = require('gl-mat4/identity') 4 | var perspective = require('gl-mat4/perspective') 5 | var lookAt = require('gl-mat4/lookAt') 6 | 7 | module.exports = createCamera 8 | 9 | function createCamera (regl, props) { 10 | var cameraState = { 11 | view: identity(new Float32Array(16)), 12 | projection: identity(new Float32Array(16)), 13 | center: new Float32Array(props.center || 3), 14 | theta: props.theta || 0, 15 | phi: props.phi || 0, 16 | distance: Math.log(props.distance || 10.0), 17 | eye: new Float32Array(3), 18 | up: new Float32Array(props.up || [0, 1, 0]) 19 | } 20 | 21 | var right = new Float32Array([1, 0, 0]) 22 | var front = new Float32Array([0, 0, 1]) 23 | 24 | var minDistance = Math.log('minDistance' in props ? props.minDistance : 0.1) 25 | var maxDistance = Math.log('maxDistance' in props ? props.maxDistance : 1000) 26 | 27 | var dtheta = 0 28 | var dphi = 0 29 | var ddistance = 0 30 | 31 | var prevX = 0 32 | var prevY = 0 33 | mouseChange(function (buttons, x, y) { 34 | if (buttons & 1) { 35 | var dx = (x - prevX) / window.innerWidth 36 | var dy = (y - prevY) / window.innerHeight 37 | var w = Math.max(cameraState.distance, 0.5) 38 | 39 | dtheta += w * dx 40 | dphi += w * dy 41 | } 42 | prevX = x 43 | prevY = y 44 | }) 45 | 46 | mouseWheel(function (dx, dy) { 47 | ddistance += dy / window.innerHeight 48 | }) 49 | 50 | function damp (x) { 51 | var xd = x * 0.9 52 | if (xd < 0.1) { 53 | return 0 54 | } 55 | return xd 56 | } 57 | 58 | function clamp (x, lo, hi) { 59 | return Math.min(Math.max(x, lo), hi) 60 | } 61 | 62 | function updateCamera () { 63 | var center = cameraState.center 64 | var eye = cameraState.eye 65 | var up = cameraState.up 66 | 67 | cameraState.theta += dtheta 68 | cameraState.phi = clamp( 69 | cameraState.phi + dphi, 70 | -Math.PI / 2.0, 71 | Math.PI / 2.0) 72 | cameraState.distance = clamp( 73 | cameraState.distance + ddistance, 74 | minDistance, 75 | maxDistance) 76 | 77 | dtheta = damp(dtheta) 78 | dphi = damp(dphi) 79 | ddistance = damp(ddistance) 80 | 81 | var theta = cameraState.theta 82 | var phi = cameraState.phi 83 | var r = Math.exp(cameraState.distance) 84 | 85 | var vf = r * Math.sin(theta) * Math.cos(phi) 86 | var vr = r * Math.cos(theta) * Math.cos(phi) 87 | var vu = r * Math.sin(phi) 88 | 89 | for (var i = 0; i < 3; ++i) { 90 | eye[i] = center[i] + vf * front[i] + vr * right[i] + vu * up[i] 91 | } 92 | 93 | lookAt(cameraState.view, eye, center, up) 94 | } 95 | 96 | var injectContext = regl({ 97 | context: Object.assign({}, cameraState, { 98 | projection: function ({viewportWidth, viewportHeight}) { 99 | return perspective(cameraState.projection, 100 | Math.PI / 4.0, 101 | viewportWidth / viewportHeight, 102 | 0.01, 103 | 1000.0) 104 | } 105 | }), 106 | uniforms: Object.keys(cameraState).reduce(function (uniforms, name) { 107 | uniforms[name] = regl.context(name) 108 | return uniforms 109 | }, {}) 110 | }) 111 | 112 | function setupCamera (block) { 113 | updateCamera() 114 | injectContext(block) 115 | } 116 | 117 | Object.keys(cameraState).forEach(function (name) { 118 | setupCamera[name] = cameraState[name] 119 | }) 120 | 121 | return setupCamera 122 | } 123 | -------------------------------------------------------------------------------- /bits/displacementmodule.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | 3 | function displacement (a, b, c){ 4 | return 20*Math.sin(40*a)*Math.sin(60*b)*Math.sin(100*c) 5 | } 6 | 7 | function sphere (y, z, x){ 8 | return x*x + y*y + (z-5)*(z-5) - 40 9 | } 10 | 11 | var mesh = isosurface.surfaceNets([64,64,64], 12 | function (x, y, z){ 13 | return sphere(x, y, z) + displacement(x,y,z) 14 | } 15 | , [[-11,-11,-21], [11,21,11]]) 16 | 17 | module.exports = mesh 18 | -------------------------------------------------------------------------------- /bits/feedbackeffect.js: -------------------------------------------------------------------------------- 1 | module.exports = function(regl, src){ 2 | return regl({ 3 | frag: ` 4 | precision mediump float; 5 | varying vec2 uv; 6 | uniform sampler2D tex; 7 | ${src} 8 | void main () { 9 | gl_FragColor = vec4(sample(uv, tex),1); 10 | } 11 | `, 12 | vert: ` 13 | precision mediump float; 14 | varying vec2 uv; 15 | attribute vec2 position; 16 | void main () { 17 | uv = (1.0+position)*0.5; 18 | gl_Position = vec4(position, 0, 1); 19 | }`, 20 | attributes: { 21 | position: [-4, 0, 0, -4, 4, 4] 22 | }, 23 | uniforms: { 24 | tex: regl.prop('texture'), 25 | }, 26 | depth: {enable: false}, 27 | count: 3 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /bits/foldingfanmodule.js: -------------------------------------------------------------------------------- 1 | //takes a file that exports a mesh for an implicit surface 2 | //and returns a draw() fn that can be placed in a regl frame 3 | //file 4 | const regl = require('../regl')() 5 | const mat4 = require('gl-mat4') 6 | var rmat = [] 7 | const cyl = require('./butterflycreammodule.js') 8 | //perform operation on cyl...ie, -cyl, +cyl, and combined 9 | //cyl so that drawcyl operates on both sets of data 10 | const normals = require('angle-normals') 11 | module.exports = function (regl){ 12 | const drawcyl = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 22 | }`, 23 | vert: ` 24 | precision mediump float; 25 | uniform mat4 model, projection, view; 26 | attribute vec3 position, normal; 27 | varying vec3 vnormal; 28 | uniform float t; 29 | vec3 warp (vec3 p){ 30 | vec3 a = p; 31 | a.x = p.x; 32 | a.y = p.z; 33 | a.z = p.x; 34 | float r = length(2.0*a.zx*sin(t*a.yz)); 35 | float theta = atan(a.y, a.z); 36 | return vec3 (r*cos(theta), a.y, r*sin(theta)); 37 | //return vec3 (r*cos(p.y), p.y, r*sin(theta)); 38 | } 39 | void main () { 40 | vnormal = normal; 41 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 42 | gl_PointSize = 43 | (20.0*(5.0+sin(t*20.0+length(position))))/gl_Position.w; 44 | }`, 45 | attributes: { 46 | position: cyl.positions, 47 | normal: normals(cyl.cells, cyl.positions) 48 | }, 49 | elements: cyl.cells, 50 | uniforms: { 51 | t: function(context, props){ 52 | return context.tick/1000 53 | }, 54 | model: function(context, props){ 55 | mat4.identity(rmat) 56 | var theta = -context.tick/60 57 | //return mat4.rotateY(rmat, mat4.identity(rmat), theta) 58 | //return mat4.scale(rmat, mat4.identity(rmat), 59 | //[Math.sin(10.0*context.time), Math.sin(theta), 3.0]) 60 | //mat4.scale(rmat, mat4.identity(rmat), 61 | //[ 0.25, 0.25, 0.25]) 62 | mat4.translate(rmat, mat4.identity(rmat), 63 | [0,Math.sin(context.time)+2.0,context.time*0.4-10.0]) 64 | return rmat 65 | }, 66 | projection: function (context){ 67 | return mat4.perspective( 68 | mat4.create(), Math.PI/4, 69 | context.viewportWidth/context.viewportHeight, 0.01, 70 | 1000 71 | ) 72 | } 73 | }, 74 | primitive: "triangle fan" 75 | }) 76 | return function(){ 77 | drawcyl() 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /bits/icecreamdripmodule.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | 3 | function displacement (a, b, c){ 4 | return Math.sin(80*a)*Math.sin(b*b)*Math.sin(80*c) 5 | } 6 | 7 | function sphere (y, z, x){ 8 | return x*x + y*y + (z-5)*(z-5) - 20 9 | } 10 | 11 | var mesh = isosurface.surfaceNets([64,64,64], 12 | function (x, y, z){ 13 | return sphere(x, y, z)+ 14 | displacement(x,1/y,z)/(1/y)*20 15 | } 16 | , [[-11,-11,-21], [11,21,11]]) 17 | 18 | module.exports = mesh 19 | -------------------------------------------------------------------------------- /bits/implicitcream.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | 3 | function displacement (a, b, c){ 4 | return 20*Math.sin(40*a)*Math.sin(60*b)*Math.sin(100*c) 5 | } 6 | 7 | function sphere (y, z, x){ 8 | return x*x + y*y + (z-5)*(z-5) - 40 9 | } 10 | 11 | var mesh = isosurface.surfaceNets([64,64,64], 12 | function (x, y, z){ 13 | return sphere(x, y, z) + displacement(x,y,z) 14 | } 15 | , [[-11,-11,-21], [11,21,11]]) 16 | 17 | module.exports = mesh 18 | -------------------------------------------------------------------------------- /bits/implicitcyl.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | var glvec2 = require("gl-vec2") 3 | var out = [] 4 | var sum = [] 5 | var aa = [] 6 | var bb = [] 7 | var cc = [] 8 | var storage 9 | 10 | function sdCyl( a, b ) { //a should be a vec3, b should be a vec2 11 | if (a[2] < -15) return 100; 12 | glvec2.subtract(out, [Math.abs(glvec2.length([a[0], a[2]])), Math.abs(a[1])], b); 13 | aa = Math.max(out[0], out[1]) 14 | bb = Math.min(aa, 0.0) 15 | glvec2.max(cc, [out[0], out[1]], [0.0, 0.0]) 16 | storage = bb + Math.abs(cc[1] - cc[0]) 17 | return bb + Math.abs(cc[1] - cc[0]) 18 | } 19 | 20 | var mesh = isosurface.surfaceNets([64,64,64], 21 | function (x, y, z){ 22 | return sdCyl([x,y,z], [5, 1]) 23 | } 24 | , [[-11,-11,-11], [11,11,11]]) 25 | 26 | module.exports = mesh 27 | -------------------------------------------------------------------------------- /bits/jellydisplace.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | 3 | function displacement (a, b, c){ 4 | return Math.sin(a)*Math.sin(b*b)*Math.sin(c) 5 | } 6 | 7 | function sphere (y, z, x){ 8 | return x*x + y*y + (z-5)*(z-5) - 20 9 | } 10 | 11 | var mesh = isosurface.surfaceNets([64,64,64], 12 | function (x, y, z){ 13 | return sphere(x, y, z)+ 14 | displacement(x,1/y,z)/(1/y)*20 15 | } 16 | , [[-11,-11,-21], [11,21,11]]) 17 | 18 | module.exports = mesh 19 | -------------------------------------------------------------------------------- /bits/rotatypointmodule.js: -------------------------------------------------------------------------------- 1 | var isosurface = require("isosurface") 2 | var glvec3 = require("gl-vec3") 3 | var glvec2 = require("gl-vec2") 4 | 5 | /* 6 | var mesh = isosurface.surfaceNets([64,64,64], function(x,y,z) { 7 | return x*x + y*y + z*z - 100 8 | }, [[-11,-11,-11], [11,11,11]]) 9 | */ 10 | 11 | function sdCone( a, b ) //a should be a vec3, b should be a vec2 12 | { 13 | c = glvec2.length([a[0], a[1]]); 14 | return glvec2.dot([b[0], b[1]], [c, a[2]]); 15 | } 16 | var mesh = isosurface.surfaceNets([100,100,100], 17 | function (x, y, z){ 18 | return sdCone([Math.sin(x)*5.0*x-10.0,y/5.0,Math.sin(z)*5.0], [5, 1]) 19 | } 20 | , [[-11,-11,-11], [11,11,11]]) 21 | 22 | module.exports = mesh 23 | -------------------------------------------------------------------------------- /bluecyl.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const cyl = require('./bits/implicitcyl.js') 5 | const normals = require('angle-normals') 6 | const camera = require('./bits/camera.js')(regl, { 7 | center: [0, 0, 0] 8 | }) 9 | const drawcyl = regl({ 10 | frag: ` 11 | precision mediump float; 12 | varying vec3 vnormal; 13 | vec3 hsl2rgb(vec3 hsl) { 14 | vec3 rgb = clamp( abs(mod(hsl.x*2.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 15 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 16 | } 17 | void main () { 18 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 19 | }`, 20 | vert: ` 21 | precision mediump float; 22 | uniform mat4 model, projection, view; 23 | attribute vec3 position, normal; 24 | varying vec3 vnormal; 25 | uniform float t; 26 | vec3 warp (vec3 p){ 27 | float r = length(p.zx); 28 | float theta = atan(p.z, p.x); 29 | return vec3 (r*cos(theta), p.y, r*sin(theta)) + 30 | vnormal*(1.0+cos(40.0*t+p.y)); 31 | } 32 | void main () { 33 | vnormal = normal; 34 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 35 | gl_PointSize = 36 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 37 | }`, 38 | attributes: { 39 | position: cyl.positions, 40 | normal: normals(cyl.cells, cyl.positions) 41 | }, 42 | elements: cyl.cells, 43 | uniforms: { 44 | t: function(context, props){ 45 | return context.tick/1000 46 | }, 47 | model: function(context, props){ 48 | var theta = context.tick/60 49 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 50 | } 51 | }, 52 | primitive: "line loop" 53 | }) 54 | regl.frame(() => { 55 | regl.clear({ 56 | color: [0, 0, 0, 1] 57 | }) 58 | camera(() => { 59 | drawcyl() 60 | }) 61 | }) 62 | -------------------------------------------------------------------------------- /bye.js: -------------------------------------------------------------------------------- 1 | //takes an exported draw function and plops it into the 2 | //camera. this file gets browserified. 3 | const regl = require('regl')() 4 | const mat4 = require('gl-mat4') 5 | const mod = require('./bits/butterflywingmodule.js')(regl) 6 | const camera = require('./bits/camera.js')(regl, { 7 | center: [0.0, 2.5, 0.0] 8 | }) 9 | const SetupCamera = regl 10 | 11 | regl.frame(() => { 12 | regl.clear({ 13 | color: [0, 0, 0, 1] 14 | }) 15 | camera(() => { mod() }) 16 | }) 17 | -------------------------------------------------------------------------------- /cactus.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | 4 | var fs = require('fs'); 5 | var image = fs.readFileSync(__dirname + '/bits/cactusweird.png', 'base64'); 6 | var imageurl = 'data:image/png;base64,' + image 7 | 8 | var cubePosition = [ 9 | [-1.5, +1.5, +1.5], [+0.5, +0.5, +0.5], [+0.5, -0.5, +0.5], [-0.5, -0.5, +0.5], // positive z face. 10 | [+0.5, +0.5, +0.5], [+0.5, +0.5, -0.5], [+0.5, -2.5, 11 | -1.5], [+0.5, -1.5, -1.5], // positive x face 12 | [+1.5, -2.5, -0.5], [-0.5, +0.5, -0.5], [-1.5, -0.5, -0.5], [+0.5, -0.5, -0.5], // negative z face 13 | [-0.5, +0.5, 0.5], [-0.5, +0.5, +0.5], [2.5, 1.5, 1.5], [-0.5, -0.5, -0.5], // negative x face. 14 | [-0.5, +0.5, -0.5], [-0.5, -2.5, -1.5], [+0.5, +0.5, +0.5], [-0.5, +0.5, +0.5], // top face 15 | [-0.5, -0.5, -0.5], [+0.5, -0.5, -0.5], [+0.5, -0.5, 16 | +0.5], [+2, -0.5, +1.5] // bottom face 17 | ] 18 | 19 | var cubeUv = [ 20 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // positive z face. 21 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // positive x face. 22 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // negative z face. 23 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // negative x face. 24 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0], // top face 25 | [0.0, 0.0], [1.0, 0.0], [1.0, 1.0], [0.0, 1.0] // bottom face 26 | ] 27 | 28 | const cubeElements = [ 29 | [2, 1, 0], [2, 0, 3], // positive z face. 30 | [6, 5, 4], [6, 4, 7], // positive x face. 31 | [10, 9, 8], [10, 8, 11], // negative z face. 32 | [14, 13, 12], [14, 12, 15], // negative x face. 33 | [18, 17, 16], [18, 16, 19], // top face. 34 | [20, 21, 22], [23, 20, 22] // bottom face 35 | ] 36 | 37 | const drawCube = regl({ 38 | frag: ` 39 | precision mediump float; 40 | varying vec2 vUv; 41 | uniform sampler2D tex; 42 | void main () { 43 | gl_FragColor = texture2D(tex,vUv); 44 | }`, 45 | vert: ` 46 | precision mediump float; 47 | attribute vec3 position; 48 | attribute vec2 uv; 49 | varying vec2 vUv; 50 | uniform mat4 projection, view; 51 | void main() { 52 | vUv = uv; 53 | gl_Position = projection * view * vec4(position, 1); 54 | }`, 55 | attributes: { 56 | position: cubePosition, 57 | uv: cubeUv 58 | }, 59 | elements: cubeElements, 60 | uniforms: { 61 | view: ({tick}) => { 62 | const t = 0.01 * tick 63 | return mat4.lookAt([], 64 | [5 * Math.cos(t), 2.5 * Math.sin(t), 5 * Math.sin(t)], 65 | [0, 0.0, 0], 66 | [0, 1, 0]) 67 | }, 68 | projection: ({viewportWidth, viewportHeight}) => 69 | mat4.perspective([], 70 | Math.PI / 4, 71 | viewportWidth / viewportHeight, 72 | 0.01, 73 | 10), 74 | tex: regl.prop('texture') 75 | } 76 | }) 77 | 78 | require('resl')({ 79 | manifest: { 80 | texture: { 81 | type: 'image', 82 | src: imageurl, 83 | parser: (data) => regl.texture({ 84 | data: data, 85 | mag: 'linear', 86 | min: 'linear' 87 | }) 88 | } 89 | }, 90 | onDone: ({texture}) => { 91 | regl.frame(() => { 92 | regl.clear({ 93 | color: [0, 0, 0, 255], 94 | depth: 1 95 | }) 96 | drawCube({texture}) 97 | }) 98 | } 99 | }) 100 | -------------------------------------------------------------------------------- /cylwarp.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const cyl = require('./bits/implicitcyl.js') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, -1, 0], 10 | distance: 15, 11 | phi: 0.4 12 | }) 13 | const drawBunny = regl({ 14 | frag: ` 15 | precision mediump float; 16 | varying vec3 vnormal; 17 | vec3 hsl2rgb(vec3 v ) { 18 | vec3 rgb = clamp( abs(mod(v.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 19 | return v.z + v.y * (rgb-0.5)*(1.0-abs(2.0*v.z-1.0)); 20 | } 21 | vec3 warpcolor (vec3 normal){ 22 | return hsl2rgb(vec3( 23 | 0.1+0.8*mod(normal.x*2.0+normal.y-sin(normal.z), 24 | 0.5), 25 | 1.0, 26 | 0.5 27 | )); 28 | } 29 | void main () { 30 | gl_FragColor = vec4(warpcolor(abs(vnormal)), 1.0); 31 | }`, 32 | vert: ` 33 | precision mediump float; 34 | uniform mat4 model, projection, view; 35 | attribute vec3 position, normal; 36 | varying vec3 vnormal; 37 | uniform float t; 38 | vec3 warp (vec3 p){ 39 | float r = length(p.zx); 40 | float theta = atan(p.z, p.x); 41 | return vec3 (r*cos(theta), p.y, r*sin(theta)) + 42 | vnormal*(1.0+cos(40.0*t+p.y)); 43 | } 44 | void main () { 45 | vnormal = normal; 46 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 47 | gl_PointSize = 48 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 49 | }`, 50 | attributes: { 51 | position: cyl.positions, 52 | normal: normals(cyl.cells, cyl.positions) 53 | }, 54 | elements: cyl.cells, 55 | uniforms: { 56 | t: function(context, props){ 57 | return context.tick/1000 58 | }, 59 | model: function(context, props){ 60 | var theta = context.tick/60 61 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { 71 | drawBunny() 72 | }) 73 | }) 74 | 75 | -------------------------------------------------------------------------------- /feedbackgalaxy.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const cyl = require('./bits/implicitcyl.js') 6 | const cone = require('./bits/implicitcone.js') 7 | const normals = require('angle-normals') 8 | 9 | const camera = require('./bits/camera.js')(regl, { 10 | center: [0, 0, 0], 11 | distance: 15, 12 | phi: -0.6, 13 | theta: -0.7 14 | }) 15 | var feedback = require('./bits/feedbackeffect.js') 16 | var drawfeedback = feedback(regl, ` 17 | vec3 sample (vec2 uv, sampler2D tex) { 18 | return 0.97*texture2D(tex, (0.99*(2.0*uv-1.0)+1.0)*0.5).rgb; 19 | } 20 | `) 21 | const feedBackTexture = regl.texture({}) 22 | const drawcyl = regl({ 23 | frag: ` 24 | precision mediump float; 25 | varying vec3 vnormal; 26 | vec3 hsl2rgb(vec3 hsl) { 27 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 28 | return hsl.z - (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 29 | } 30 | void main () { 31 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 0.3); 32 | }`, 33 | vert: ` 34 | precision mediump float; 35 | uniform mat4 model, projection, view; 36 | attribute vec3 position, normal; 37 | varying vec3 vnormal; 38 | uniform float t; 39 | vec3 warp (vec3 p){ 40 | float r = length(p.zx*sin(t*p.yz)); 41 | float theta = atan(p.z, p.x); 42 | return vec3 ((1.0-r)*cos(theta), (p.y*2.0)/r+p.y, r*sin(theta+p.z)); 43 | } 44 | void main () { 45 | vnormal = normal; 46 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 47 | gl_PointSize = 48 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 49 | }`, 50 | attributes: { 51 | position: cyl.positions, 52 | normal: normals(cyl.cells, cyl.positions) 53 | }, 54 | elements: cyl.cells, 55 | uniforms: { 56 | t: function(context, props){ 57 | return context.tick/1000 58 | }, 59 | model: function(context, props){ 60 | var theta = context.tick/60 61 | return mat4.rotateZ(rmat, mat4.identity(rmat), theta) 62 | } 63 | }, 64 | blend: { 65 | enable: true, 66 | func: { 67 | src: 'src alpha', 68 | dst: 'one minus src alpha' 69 | } 70 | }, 71 | cull: { 72 | enable: true 73 | }, 74 | primitive: "points" 75 | }) 76 | regl.frame(() => { 77 | regl.clear({ color: [0, 0, 0, 1] }) 78 | drawfeedback({texture: feedBackTexture}) 79 | camera(() => { 80 | drawcyl() 81 | feedBackTexture({ 82 | copy: true, 83 | min: 'linear', 84 | mag: 'linear' 85 | }) 86 | 87 | }) 88 | }) 89 | -------------------------------------------------------------------------------- /foldingfan.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | const mod = require('./bits/foldingfanmodule.js')(regl) 4 | const camera = require('./bits/camera.js')(regl, { 5 | center: [0.0, 2.5, 0.0] 6 | }) 7 | const SetupCamera = regl 8 | 9 | regl.frame(() => { 10 | regl.clear({ 11 | color: [0, 0, 0, 1] 12 | }) 13 | camera(() => { mod() }) 14 | }) 15 | -------------------------------------------------------------------------------- /ghost/main.js: -------------------------------------------------------------------------------- 1 | var regl = require('regl')() 2 | var camera = require('regl-camera')(regl, { 3 | center: [0,0,0], 4 | distance: 5, 5 | phi: 0.5, 6 | theta: 1.5 7 | }) 8 | var anormals = require('angle-normals') 9 | var mat4 = require('gl-mat4') 10 | var icosphere = require('icosphere') 11 | var glsl = require('glslify') 12 | 13 | var feedback = require('../bits/feedbackeffect.js') 14 | var drawfeedback = feedback(regl, ` 15 | vec3 sample (vec2 uv, sampler2D tex) { 16 | return 0.95*texture2D(tex, (0.99*(2.0*uv-1.0)+1.0)*0.5).rgb; 17 | } 18 | `) 19 | const feedBackTexture = regl.texture({}) 20 | function makesphere (regl) { 21 | var sphere = icosphere(4) 22 | var model = [] 23 | return regl({ 24 | frag: glsl` 25 | precision mediump float; 26 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 27 | #pragma glslify: cnoise = require('glsl-curl-noise') 28 | varying vec3 vpos, vnorm; 29 | void main () { 30 | float c = snoise(cnoise(sin(vpos+3.0)/2.0)); 31 | float y = vpos.y*11.0-7.6; 32 | float x = vpos.x/25.0; 33 | float z = vpos.z*14.0+9.0; 34 | float e = x*x 35 | + y*y 36 | + z*z 37 | +z*z*z*z 38 | +z*z*x*x 39 | +x*x 40 | - 0.1; 41 | if (e < 0.0){ 42 | gl_FragColor = vec4(sqrt(vec3(0,0,0)),1.0); 43 | } 44 | else gl_FragColor = 45 | vec4(sqrt(vec3(1,0.8,0.3)*(c+0.7)),0.1); 46 | } 47 | `, 48 | vert: glsl` 49 | precision mediump float; 50 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 51 | uniform mat4 projection, view, model; 52 | uniform float time; 53 | attribute vec3 position, normal; 54 | varying vec3 vnorm, vpos, dvpos; 55 | void main () { 56 | vnorm = normal; 57 | float h = min( 58 | pow(abs(((position.y/0.5)-1.0)*0.5),3.0), 59 | 0.9 60 | ); 61 | float dx = 62 | snoise(position+sin(0.2*time-h))*h; 63 | float dz = 64 | snoise(position+cos(0.3*time-h))*h; 65 | vpos = position; 66 | dvpos = position 67 | + vec3(dx,0,dz) 68 | + vec3(0,position.y/12.0-sin(time*1.4)*0.007,position.z/12.0 69 | + sin(time)*0.1); 70 | gl_Position = projection * view * model * vec4(dvpos,1); 71 | } 72 | `, 73 | attributes: { 74 | position: sphere.positions, 75 | normal: anormals(sphere.cells, sphere.positions) 76 | }, 77 | uniforms: { 78 | texture: feedBackTexture, 79 | model: function () { 80 | mat4.identity(model) 81 | mat4.scale(model, model, [0.5,1.5,0.5]) 82 | return model 83 | }, 84 | time: regl.context('time') 85 | }, 86 | blend: { 87 | enable: true, 88 | func: { 89 | src: 'src alpha', 90 | dst: 'one minus src alpha' 91 | } 92 | }, 93 | cull: { 94 | enable: true 95 | }, 96 | elements: sphere.cells 97 | }) 98 | } 99 | var draw = { 100 | sphere: makesphere(regl) 101 | } 102 | regl.frame(function () { 103 | regl.clear({ color: [0,0,0,1], depth: true }) 104 | drawfeedback({texture: feedBackTexture}) //** 105 | camera(function () { 106 | draw.sphere() 107 | feedBackTexture({ //** 108 | copy: true, 109 | min: 'linear', 110 | mag: 'linear' 111 | }) 112 | }) 113 | }) 114 | -------------------------------------------------------------------------------- /ghost/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ghost", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "brfs": "^1.4.3", 13 | "glsl-curl-noise": "0.0.4", 14 | "glsl-noise": "0.0.0", 15 | "glslify": "^6.0.0", 16 | "icosphere": "^1.0.0", 17 | "implicit-mesh": "^1.1.1", 18 | "meshview": "^1.0.0", 19 | "sphere-mesh": "^0.2.2" 20 | }, 21 | "browserify": { 22 | "transform": "glslify" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /icecreamsandwich.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const cyl = require('./bits/implicitcyl.js') 5 | const normals = require('angle-normals') 6 | const camera = require('./bits/camera.js')(regl, { 7 | center: [0, 0, 0], 8 | distance: 15, 9 | phi: -0.6, 10 | theta: -0.7 11 | }) 12 | var feedback = require('./bits/feedbackeffect.js') 13 | var drawfeedback = feedback(regl, ` 14 | vec3 sample (vec2 uv, sampler2D tex) { 15 | return 0.97*texture2D(tex, (0.99*(2.0*uv-1.0)+1.0)*0.5).rgb; 16 | } 17 | `) 18 | const feedBackTexture = regl.texture({}) 19 | const drawcyl = regl({ 20 | frag: ` 21 | precision mediump float; 22 | varying vec3 vnormal; 23 | vec3 hsl2rgb(vec3 hsl) { 24 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 25 | return hsl.z - (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 26 | } 27 | void main () { 28 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 0.3); 29 | }`, 30 | vert: ` 31 | precision mediump float; 32 | uniform mat4 model, projection, view; 33 | attribute vec3 position, normal; 34 | varying vec3 vnormal; 35 | uniform float t; 36 | vec3 warp (vec3 p){ 37 | float r = length(p.zx*sin(t*p.yz)); 38 | float theta = atan(p.z, p.x); 39 | return vec3 ((1.0-r)*cos(theta), (p.y*2.0)/r+p.y, r*sin(theta+p.z)); 40 | } 41 | void main () { 42 | vnormal = normal; 43 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 44 | gl_PointSize = 45 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 46 | }`, 47 | attributes: { 48 | position: cyl.positions, 49 | normal: normals(cyl.cells, cyl.positions) 50 | }, 51 | elements: cyl.cells, 52 | uniforms: { 53 | t: function(context, props){ 54 | return context.tick/1000 55 | }, 56 | model: function(context, props){ 57 | var theta = context.tick/60 58 | return mat4.rotateZ(rmat, mat4.identity(rmat), theta) 59 | } 60 | }, 61 | blend: { 62 | enable: true, 63 | func: { 64 | src: 'src alpha', 65 | dst: 'one minus src alpha' 66 | } 67 | }, 68 | cull: { 69 | enable: true 70 | }, 71 | primitive: "points" 72 | }) 73 | regl.frame(() => { 74 | regl.clear({ color: [0, 0, 0, 1] }) 75 | drawfeedback({texture: feedBackTexture}) 76 | camera(() => { 77 | drawcyl() 78 | feedBackTexture({ 79 | copy: true, 80 | min: 'linear', 81 | mag: 'linear' 82 | }) 83 | }) 84 | }) 85 | -------------------------------------------------------------------------------- /jellyfish/bunnyears.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),6.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateX(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/chromadumonde.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 0, 0], 8 | distance: 10, 9 | theta: 0.8 10 | 11 | }) 12 | var glsl = require('glslify') 13 | var feedback = require('regl-feedback') 14 | 15 | var drawfeedback = feedback(regl, ` 16 | vec3 sample (vec2 uv, sampler2D tex) { 17 | return 0.96*texture2D(tex, (0.97*(2.0*uv-1.0)+1.0)*0.5).rgb; 18 | } 19 | `) 20 | const feedBackTexture = regl.texture({}) 21 | 22 | const drawdis = regl({ 23 | frag: ` 24 | precision mediump float; 25 | varying vec3 vnorm; 26 | void main () { 27 | gl_FragColor = vec4(abs(vnorm), 0.2); 28 | }`, 29 | vert: glsl` 30 | precision mediump float; 31 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 32 | uniform mat4 model, projection, view; 33 | attribute vec3 position, normal; 34 | varying vec3 vnorm, vpos, dvpos; 35 | uniform float t; 36 | vec3 warp (vec3 p){ 37 | float r = length(p.x*sin(t)); 38 | float theta = atan(p.z, p.x); 39 | return vec3 (r*cos(r), 2.0+sin(theta-r), r*sin(theta+t)); 40 | } 41 | void main () { 42 | vnorm = normal; 43 | float h = min( 44 | pow(abs(((position.y)-1.0)*0.5),5.0), 45 | 0.1 46 | ); 47 | float dx = 48 | snoise(position+sin(t))*h; 49 | float dz = 50 | snoise(position+cos(t))*h; 51 | vpos = position; 52 | dvpos = position + vec3(dx,0,dz); 53 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 54 | }`, 55 | attributes: { 56 | position: dis.positions, 57 | normal: normals(dis.cells, dis.positions) 58 | }, 59 | elements: dis.cells, 60 | uniforms: { 61 | t: function(context, props){ 62 | return context.time + props.offset 63 | }, 64 | model: function(context, props){ 65 | var theta = context.time 66 | return mat4.rotateZ(rmat, mat4.identity(rmat), props.foo) 67 | } 68 | }, 69 | primitive: "triangles", 70 | blend: { 71 | enable: true, 72 | func: { src: 'src alpha', dst: 'one minus src alpha' } 73 | }, 74 | cull: { enable: true } 75 | }) 76 | regl.frame((context) => { 77 | regl.clear({ 78 | color: [0, 0, 0, 1] 79 | }) 80 | drawfeedback({texture: feedBackTexture}) 81 | var batch = [] 82 | for (var i=0; i<20; i++){ 83 | batch.push({foo: i/10*Math.PI, offset: i/20}) 84 | } 85 | camera(() => { 86 | drawdis(batch) 87 | feedBackTexture({ copy: true, min: 'linear', mag: 'linear' }) 88 | }) 89 | }) 90 | -------------------------------------------------------------------------------- /jellyfish/critter.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(sin(t*p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),6.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateX(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/gliderwings.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x*sin(t*p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),5.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateX(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/jellyfish.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 0, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x*sin(t)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(r), 2.0+sin(theta-r), r*sin(theta+t)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),5.0), 39 | 0.1 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.time + props.offset 57 | }, 58 | model: function(context, props){ 59 | var theta = context.time 60 | return mat4.rotateZ(rmat, mat4.identity(rmat), props.foo) 61 | } 62 | }, 63 | primitive: "lines" 64 | }) 65 | regl.frame((context) => { 66 | regl.clear({ 67 | color: [0, 0, 0, 1] 68 | }) 69 | var batch = [] 70 | for (var i=0; i<20; i++){ 71 | batch.push({foo: i/20*Math.PI, offset: i/20}) 72 | } 73 | camera(() => { drawdis(batch) }) 74 | }) 75 | -------------------------------------------------------------------------------- /jellyfish/lambent.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | const glsl = require('glslify') 4 | const normals = require('angle-normals') 5 | 6 | const camera = require('regl-camera')(regl, { 7 | center: [0, 3, 0], 8 | distance: 6 9 | }) 10 | 11 | function woman (regl){ 12 | var rmat = [] 13 | var mesh = require('./lambent.json') 14 | return regl({ 15 | frag: ` 16 | precision mediump float; 17 | varying vec3 vnormal; 18 | vec3 hsl2rgb(vec3 hsl) { 19 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 20 | return hsl.z - hsl.y * (rgb)*(10.0-abs(2.0*hsl.y-1.0)); 21 | } 22 | 23 | void main () { 24 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 25 | }`, 26 | vert: ` 27 | precision mediump float; 28 | uniform mat4 model, projection, view; 29 | attribute vec3 position, normal; 30 | varying vec3 vnormal; 31 | uniform float t; 32 | void main () { 33 | vnormal = normal; 34 | gl_Position = projection * view * model * 35 | vec4(position, 1.0); 36 | gl_PointSize = 37 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 38 | }`, 39 | attributes: { 40 | position: mesh.positions, 41 | normal: normals(mesh.cells, mesh.positions) 42 | }, 43 | elements: mesh.cells, 44 | uniforms: { 45 | t: function(context, props){ 46 | return context.tick/1000 47 | }, 48 | model: function(context, props){ 49 | var theta = context.tick/60 50 | return mat4.rotateY(rmat, mat4.identity(rmat), 1.2) 51 | } 52 | }, 53 | primitive: "triangles" 54 | }) 55 | } 56 | function wings (regl){ 57 | var model = [] 58 | var mesh = require('../bits/jellydisplace.js') 59 | return regl({ 60 | frag: ` 61 | precision mediump float; 62 | varying vec3 vnorm; 63 | vec3 hsl2rgb(vec3 hsl) { 64 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 65 | return hsl.z - hsl.y * (rgb)*(10.0-abs(2.0*hsl.y-1.0)); 66 | } 67 | void main () { 68 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 69 | }`, 70 | vert: glsl` 71 | precision mediump float; 72 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 73 | uniform mat4 model, projection, view; 74 | attribute vec3 position, normal; 75 | varying vec3 vnorm, vpos, dvpos; 76 | uniform float t; 77 | vec3 warp (vec3 p){ 78 | float r = length(p.x*sin(p.yz)); 79 | float theta = atan(p.z, p.x); 80 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 81 | } 82 | void main () { 83 | vnorm = normal; 84 | float dx = 85 | snoise(position+sin(t)); 86 | float dz = 87 | snoise(position+cos(t)); 88 | vpos = position; 89 | dvpos = position + vec3(dx,0,dz); 90 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 91 | }`, 92 | attributes: { 93 | position: mesh.positions, 94 | normal: normals(mesh.cells, mesh.positions) 95 | }, 96 | elements: mesh.cells, 97 | uniforms: { 98 | t: function(context, props){ 99 | return context.tick/100 100 | }, 101 | model: function(context, props){ 102 | var theta = context.tick/60 103 | mat4.identity(model) 104 | mat4.scale(model, model, [0.25, 0.2, 0.25]) 105 | mat4.rotateY(model, model, 1.5) 106 | mat4.translate(model, model, [0,10,-5]) 107 | return model 108 | } 109 | }, 110 | primitive: "triangles" 111 | }) 112 | } 113 | 114 | var draw = { 115 | woman: woman(regl), 116 | wings: wings(regl) 117 | } 118 | 119 | regl.frame(() => { 120 | regl.clear({ 121 | color: [0, 0, 0, 1] 122 | }) 123 | camera(() => { 124 | draw.woman() 125 | draw.wings() 126 | }) 127 | }) 128 | -------------------------------------------------------------------------------- /jellyfish/objtojson.js: -------------------------------------------------------------------------------- 1 | var parseOBJ = require('parse-wavefront-obj'); 2 | var fs = require('fs'); 3 | 4 | var buf = fs.readFileSync('lambent.obj'); 5 | var mesh = parseOBJ(buf); 6 | fs.writeFile('lambent.json', JSON.stringify(mesh), function (err){ 7 | if (err) throw err; 8 | console.log('It\'s saved!'); 9 | }); 10 | -------------------------------------------------------------------------------- /jellyfish/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "regls", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "dependencies": { 11 | "angle-normals": "^1.0.0", 12 | "brfs": "^1.4.3", 13 | "budo": "^8.1.0", 14 | "bunny": "^1.0.1", 15 | "gl-mat4": "^1.1.4", 16 | "gl-vec2": "^1.0.0", 17 | "glsl-curl-noise": "0.0.4", 18 | "glsl-noise": "0.0.0", 19 | "glslify": "^6.0.0", 20 | "isosurface": "^1.0.0", 21 | "mouse-change": "^1.3.0", 22 | "mouse-wheel": "^1.2.0", 23 | "parse-wavefront-obj": "^1.0.3", 24 | "regl": "^1.1.1", 25 | "regl-camera": "^1.1.0", 26 | "regl-feedback": "^1.0.0", 27 | "resl": "^1.0.3" 28 | }, 29 | "browserify": { 30 | "transform": [ 31 | "glslify" 32 | ] 33 | }, 34 | "description": "" 35 | } 36 | -------------------------------------------------------------------------------- /jellyfish/removequads.txt: -------------------------------------------------------------------------------- 1 | var cells = []; 2 | for (var i = 0; i < mesh.cells.length; i++) { 3 | var c = mesh.cells[i]; 4 | for (var j = 2; j < c.length; j++) { 5 | cells.push([c[0],c[j-1],c[j]]) 6 | } 7 | } 8 | mesh.cells = cells 9 | -------------------------------------------------------------------------------- /jellyfish/rounderwings.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x*sin(p.yz)); 32 | float theta = atan(p.y, p.x); 33 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),5.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateX(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/stillness.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 0, 0], 8 | distance: 10, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(sin(p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(r), 2.0+sin(theta-r), r*sin(theta+t)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),5.0), 39 | 0.1 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateZ(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "lines" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/unicorn.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | const vec3 = require('gl-vec3') 4 | const glsl = require('glslify') 5 | const normals = require('angle-normals') 6 | 7 | const camera = require('regl-camera')(regl, { 8 | center: [0, 20, 0], 9 | distance: 50, 10 | theta: 1 11 | }) 12 | 13 | function unicorn (regl){ 14 | var model = [] 15 | 16 | var mesh = require('./unicorn.json') 17 | var cells = []; 18 | for (var i = 0; i < mesh.cells.length; i++) { 19 | var c = mesh.cells[i]; 20 | for (var j = 2; j < c.length; j++) { 21 | cells.push([c[0],c[j-1],c[j]]) 22 | } 23 | } 24 | mesh.cells = cells 25 | return regl({ 26 | frag: ` 27 | precision mediump float; 28 | varying vec3 vnormal, vpos; 29 | varying float vtime; 30 | vec3 hsl2rgb(in vec3 hsl) { 31 | vec3 rgb = clamp(abs(mod(hsl.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,0.0,1.0); 32 | return hsl.z+hsl.y*(rgb-0.5)*(1.0-abs(2.0*hsl.z-1.0)); 33 | } 34 | void main () { 35 | vec3 c = abs(vnormal) * 0.3 36 | + vec3(10.0*sin(vtime - vpos.z/10.0 + 37 | vpos.y/200.0),1,1) * 0.4 38 | ; 39 | c.y = 1.0; 40 | gl_FragColor = vec4(hsl2rgb(c), 1.0); 41 | }`, 42 | vert: ` 43 | precision mediump float; 44 | uniform mat4 model, projection, view; 45 | uniform float t; 46 | attribute vec3 position, normal; 47 | varying vec3 vnormal, vpos; 48 | varying float vtime; 49 | void main () { 50 | vnormal = normal; 51 | vtime = t; 52 | gl_Position = projection * view * model * 53 | vec4(position, 1.0); 54 | vpos = vec3(gl_Position); 55 | }`, 56 | attributes: { 57 | position: mesh.positions, 58 | normal: normals(mesh.cells, mesh.positions) 59 | }, 60 | elements: mesh.cells, 61 | uniforms: { 62 | t: function(context, props){ 63 | return context.tick/1000 64 | }, 65 | model: function(context, props){ 66 | var theta = context.tick/60 67 | mat4.identity(model) 68 | mat4.scale(model, model, [0.01, 0.01, 0.015]) 69 | //mat4.rotateY(model, model, 1.5) 70 | return model 71 | } 72 | }, 73 | primitive: "triangles" 74 | }) 75 | } 76 | function wings (regl){ 77 | var model = [] 78 | var mesh = require('../bits/jellydisplace.js') 79 | return regl({ 80 | frag: ` 81 | precision mediump float; 82 | varying vec3 vnorm; 83 | void main () { 84 | gl_FragColor = vec4(abs(vnorm), 1.0); 85 | }`, 86 | vert: glsl` 87 | precision mediump float; 88 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 89 | uniform mat4 model, projection, view; 90 | attribute vec3 position, normal; 91 | varying vec3 vnorm, vpos, dvpos; 92 | uniform float t; 93 | vec3 warp (vec3 p){ 94 | float r = length(p.x*sin(p.yz)); 95 | float theta = atan(p.z, p.x); 96 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 97 | } 98 | void main () { 99 | vnorm = normal; 100 | float dx = 101 | snoise(position+sin(t-position)); 102 | float dz = 103 | snoise(position+cos(t-position)); 104 | vpos = position; 105 | dvpos = position + vec3(dx,0,dz); 106 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 107 | }`, 108 | attributes: { 109 | position: mesh.positions, 110 | normal: normals(mesh.cells, mesh.positions) 111 | }, 112 | elements: mesh.cells, 113 | uniforms: { 114 | t: function(context, props){ 115 | return context.tick/100 116 | }, 117 | model: function(context, props){ 118 | var theta = context.tick/60 119 | mat4.identity(model) 120 | mat4.scale(model, model, [1.5, 1.3, 2.0]) 121 | mat4.rotateY(model, model, -1.5) 122 | mat4.translate(model, model, [0,13,-1.0]) 123 | return model 124 | } 125 | }, 126 | primitive: "triangles" 127 | }) 128 | } 129 | 130 | var draw = { 131 | unicorn: unicorn(regl), 132 | wings: wings(regl) 133 | } 134 | 135 | regl.frame(() => { 136 | regl.clear({ 137 | color: [0, 0, 0, 1] 138 | }) 139 | camera(() => { 140 | draw.unicorn() 141 | draw.wings() 142 | }) 143 | }) 144 | -------------------------------------------------------------------------------- /jellyfish/unicornwoo.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | const vec3 = require('gl-vec3') 4 | const glsl = require('glslify') 5 | const normals = require('angle-normals') 6 | 7 | const camera = require('regl-camera')(regl, { 8 | center: [0, 20, 0], 9 | distance: 50, 10 | theta: 1 11 | }) 12 | var suits = { single: [], many: [] } 13 | for (var i = 0; i < 20; i++) { 14 | var theta = Math.random() * 2 * Math.PI 15 | var phi = Math.random() * 2 * Math.PI 16 | var r = Math.random() * 10 + 3 17 | suits.many.push({ 18 | init: [ Math.cos(theta)*r, Math.sin(phi)*r, Math.sin(theta)*r ], 19 | rspeed: Math.exp(Math.random()*3-2), 20 | speed: Math.exp(Math.random()-4), 21 | vector: vec3.random([]), 22 | axis: vec3.random([]) 23 | }) 24 | } 25 | suits.single.push({ 26 | init: [4.6,-1,-2], 27 | rspeed: 2, 28 | speed: 0, 29 | vector: [0,0,-1], 30 | //axis: [1,0.1,0] 31 | axis: vec3.random([]) 32 | }) 33 | function unicorn (regl){ 34 | var model = [], vtmp = [] 35 | var mesh = require('./unicorn.json') 36 | var cells = []; 37 | for (var i = 0; i < mesh.cells.length; i++) { 38 | var c = mesh.cells[i]; 39 | for (var j = 2; j < c.length; j++) { 40 | cells.push([c[0],c[j-1],c[j]]) 41 | } 42 | } 43 | mesh.cells = cells 44 | return regl({ 45 | frag: ` 46 | precision mediump float; 47 | varying vec3 vnormal, vpos; 48 | varying float vtime; 49 | vec3 hsl2rgb(in vec3 hsl) { 50 | vec3 rgb = clamp(abs(mod(hsl.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,0.0,1.0); 51 | return hsl.z+hsl.y*(rgb-0.5)*(1.0-abs(2.0*hsl.z-1.0)); 52 | } 53 | void main () { 54 | vec3 c = abs(vnormal) * 0.3 55 | + vec3(10.0*sin(vtime - vpos.z/10.0 + 56 | vpos.y/200.0),1,1) * 0.4 57 | ; 58 | c.y = 1.0; 59 | gl_FragColor = vec4(hsl2rgb(c), 1.0); 60 | }`, 61 | vert: ` 62 | precision mediump float; 63 | uniform mat4 model, projection, view; 64 | uniform float t; 65 | uniform vec3 offset; 66 | attribute vec3 position, normal; 67 | varying vec3 vnormal, vpos; 68 | varying float vtime; 69 | void main () { 70 | vnormal = normal; 71 | vtime = t; 72 | gl_Position = projection * view * model * 73 | vec4(position+offset, 1.0); 74 | vpos = vec3(gl_Position); 75 | }`, 76 | attributes: { 77 | position: mesh.positions, 78 | normal: normals(mesh.cells, mesh.positions) 79 | }, 80 | elements: mesh.cells, 81 | uniforms: { 82 | t: function(context, props){ 83 | return context.tick/1000 84 | }, 85 | offset: function (context, props) { 86 | vec3.copy(vtmp, props.vector) 87 | vec3.scale(vtmp, vtmp, props.speed*context.time*20.0) 88 | vec3.add(vtmp, props.init, vtmp) 89 | return vtmp 90 | }, 91 | model: function(context, props){ 92 | var theta = context.tick/60 93 | mat4.identity(model) 94 | mat4.scale(model, model, [0.01, 0.01, 0.015]) 95 | mat4.rotate(model, model, props.rspeed * 96 | context.time * 0.1, props.axis) 97 | return model 98 | } 99 | }, 100 | primitive: "triangles" 101 | }) 102 | } 103 | function wings (regl){ 104 | var model = [] 105 | var mesh = require('../bits/jellydisplace.js') 106 | return regl({ 107 | frag: ` 108 | precision mediump float; 109 | varying vec3 vnorm; 110 | void main () { 111 | gl_FragColor = vec4(abs(vnorm), 1.0); 112 | }`, 113 | vert: glsl` 114 | precision mediump float; 115 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 116 | uniform mat4 model, projection, view; 117 | attribute vec3 position, normal; 118 | varying vec3 vnorm, vpos, dvpos; 119 | uniform float t; 120 | vec3 warp (vec3 p){ 121 | float r = length(p.x*sin(p.yz)); 122 | float theta = atan(p.z, p.x); 123 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 124 | } 125 | void main () { 126 | vnorm = normal; 127 | float dx = 128 | snoise(position+sin(t-position)); 129 | float dz = 130 | snoise(position+cos(t-position)); 131 | vpos = position; 132 | dvpos = position + vec3(dx,0,dz); 133 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 134 | }`, 135 | attributes: { 136 | position: mesh.positions, 137 | normal: normals(mesh.cells, mesh.positions) 138 | }, 139 | elements: mesh.cells, 140 | uniforms: { 141 | t: function(context, props){ 142 | return context.tick/100 143 | }, 144 | model: function(context, props){ 145 | var theta = context.tick/60 146 | mat4.identity(model) 147 | mat4.scale(model, model, [1.5, 1.3, 2.0]) 148 | mat4.rotateY(model, model, -1.5) 149 | mat4.translate(model, model, [0,13,-1.0]) 150 | return model 151 | } 152 | }, 153 | primitive: "triangles" 154 | }) 155 | } 156 | var draw = { 157 | unicorn: unicorn(regl), 158 | wings: wings(regl) 159 | } 160 | regl.frame(() => { 161 | regl.clear({ 162 | color: [0, 0, 0, 1] 163 | }) 164 | camera(() => { 165 | draw.unicorn(suits.many) 166 | draw.wings() 167 | }) 168 | }) 169 | -------------------------------------------------------------------------------- /jellyfish/wings.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x*sin(t*p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),6.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | return mat4.rotateY(rmat, mat4.identity(rmat), 1.5) 61 | //return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /jellyfish/wingsdiffmaybe.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | const dis = require('../bits/jellydisplace.js') 5 | const normals = require('angle-normals') 6 | const camera = require('../bits/camera')(regl, { 7 | center: [0, 5, 0], 8 | distance: 20, 9 | }) 10 | var glsl = require('glslify') 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnorm; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnorm)), 1.0); 22 | }`, 23 | vert: glsl` 24 | precision mediump float; 25 | #pragma glslify: snoise = require('glsl-noise/simplex/3d') 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnorm, vpos, dvpos; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.x*sin(t*p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y*r*0.5, p.z*sin(theta)); 34 | } 35 | void main () { 36 | vnorm = normal; 37 | float h = min( 38 | pow(abs(((position.y)-1.0)*0.5),5.0), 39 | 0.2 40 | ); 41 | float dx = 42 | snoise(position+sin(t))*h; 43 | float dz = 44 | snoise(position+cos(t))*h; 45 | vpos = position; 46 | dvpos = position + vec3(dx,0,dz); 47 | gl_Position = projection * view * model * vec4(warp(dvpos),1); 48 | }`, 49 | attributes: { 50 | position: dis.positions, 51 | normal: normals(dis.cells, dis.positions) 52 | }, 53 | elements: dis.cells, 54 | uniforms: { 55 | t: function(context, props){ 56 | return context.tick/100 57 | }, 58 | model: function(context, props){ 59 | var theta = context.tick/60 60 | //return mat4.rotateX(rmat, mat4.identity(rmat), theta) 61 | return mat4.identity(rmat) 62 | } 63 | }, 64 | primitive: "triangles" 65 | }) 66 | regl.frame(() => { 67 | regl.clear({ 68 | color: [0, 0, 0, 1] 69 | }) 70 | camera(() => { drawdis() }) 71 | }) 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "regls", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "angle-normals": "^1.0.0", 13 | "brfs": "^1.4.3", 14 | "budo": "^8.1.0", 15 | "bunny": "^1.0.1", 16 | "gl-mat4": "^1.1.4", 17 | "gl-vec2": "^1.0.0", 18 | "gl-vec3": "^1.0.3", 19 | "isosurface": "^1.0.0", 20 | "mouse-change": "^1.3.0", 21 | "mouse-wheel": "^1.2.0", 22 | "regl": "^1.1.1", 23 | "resl": "^1.0.3" 24 | }, 25 | "browserify": { 26 | "transform": [ 27 | "brfs" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | many [regl](http://regl.party) experiments. 2 | 3 | ###demos 4 | 5 | * [4x4](http://kitties.neocities.org/4x4.html) ([source code](https://github.com/mk30/reglexperiments/blob/master/4x4.js)) 6 | * [bluecyl](http://kitties.neocities.org/bluecyl.html) 7 | ([source code](https://github.com/mk30/reglexperiments/blob/master/bluecyl.js)) 8 | * [bye](http://kitties.neocities.org/bye.html)([source code](https://github.com/mk30/reglexperiments/blob/master/bye.js)) 9 | * [cactus](http://kitties.neocities.org/cactus.html) ([source code](https://github.com/mk30/reglexperiments/blob/master/cactus.js)) 10 | * [cyl](http://kitties.neocities.org/democyl.html) ([source code](https://github.com/mk30/regl-demo-reel/blob/master/shanicyl.js)) 11 | * [cylwarp](http://kitties.neocities.org/cylwarp.html) ([source code](https://github.com/mk30/reglexperiments/blob/master/cylwarp.js)) 12 | * [feedbackgalaxy](http://kitties.neocities.org/feedbackgalaxy.html) 13 | ([source code](https://github.com/mk30/reglexperiments/blob/master/feedbackgalaxy.js)) 14 | * [folding fan](http://kitties.neocities.org/foldingfan.html) ([source code](https://github.com/mk30/reglexperiments/blob/master/foldingfan.js)) 15 | * icecreamsandwich: in progress 16 | * jellyfish: in progress 17 | * [rotatypoints.js](http://kitties.neocities.org/rotatypoints.html) 18 | ([source code](https://github.com/mk30/reglexperiments/blob/master/rotatypoints.js)) 19 | * skellypuff: in progress 20 | * [skellyscissor](http://kitties.neocities.org/skellyscissor.html) 21 | ([source code](https://github.com/mk30/regl-demo-reel/blob/master/shaniskellyscissor.js)) 22 | * [swimmypuff](http://kitties.neocities.org/swimmypuff.html) 23 | ([source code](https://github.com/mk30/regl-demo-reel/blob/master/shaniswimmypuff.js)) 24 | * [wingpole](http://kitties.neocities.org/wingpole.html) ([source code](https://github.com/mk30/reglexperiments/blob/master/wingpole.js)) 25 | 26 | ###to run the examples on your own machine 27 | 28 | the below instructions are entered via command line (the 29 | "terminal"). you will need to have 30 | [node.js and npm](https://nodejs.org/en/download/) 31 | installed for this to work. 32 | 33 | first clone this repository to your own computer. 34 | 35 | then run `npm install` while you're in the repository directory. 36 | 37 | you'll be running each demo by entering into the terminal 38 | the command `budo` followed by the name of the demo you want 39 | to try. for example: 40 | 41 | ``` 42 | budo 4x4.js 43 | ``` 44 | 45 | hit enter and wait until you see some output that looks like 46 | this: 47 | 48 | `[0006] info Server running at http://192.168.2.12:9966/ (connect)` 49 | 50 | then point your browser to `localhost:9966`. 51 | 52 | ###Further info 53 | 54 | if any of this doesn't work for you, 55 | please [file an 56 | issue](https://github.com/mk30/reglexperiments/issues). this is a work in progress. 57 | -------------------------------------------------------------------------------- /rotatypoints.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const cone = require('./bits/rotatypointmodule.js') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, 2.5, 0] 10 | }) 11 | 12 | const drawCone = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( 18 | abs(mod(hsl.x*2.0+vec3(0.0,4.0,2.0)-hsl.z*5.0,6.0)-3.0)-1.0, 0.0, 1.0 ); 19 | return hsl.z - hsl.y * (rgb-0.5)*(10.0-abs(2.0*hsl.y-1.0)); 20 | } 21 | void main () { 22 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)).xz, 0.5, 1.0); 23 | }`, 24 | vert: ` 25 | precision mediump float; 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnormal; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.yz); 32 | float theta = atan(p.y, p.z); 33 | return vec3 (r*cos(theta), p.y, r*sin(theta*10.0)) + 34 | vnormal*(1.0+cos(10.0*t*r-p.y)); 35 | } 36 | void main () { 37 | vnormal = normal; 38 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 39 | gl_PointSize = 40 | (100.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 41 | }`, 42 | attributes: { 43 | position: cone.positions, 44 | normal: normals(cone.cells, cone.positions) 45 | }, 46 | elements: cone.cells, 47 | uniforms: { 48 | t: function(context, props){ 49 | return context.tick/1000 50 | }, 51 | model: function(context, props){ 52 | var theta = context.tick/60 53 | return mat4.rotateX(rmat, mat4.identity(rmat), theta) 54 | } 55 | 56 | }, 57 | primitive: "points" 58 | }) 59 | 60 | regl.frame(() => { 61 | regl.clear({ 62 | color: [0, 0, 0, 1] 63 | }) 64 | camera(() => { 65 | drawCone() 66 | }) 67 | }) 68 | -------------------------------------------------------------------------------- /skellypuff.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const skelly = require('./bits/skelly.json') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, 10, 0], 10 | distance: 10 11 | }) 12 | 13 | const drawskelly = regl({ 14 | frag: ` 15 | precision mediump float; 16 | varying vec3 vnormal; 17 | vec3 hsl2rgb(vec3 hsl) { 18 | vec3 rgb = clamp( abs(mod(hsl.x*2.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 19 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 20 | } 21 | void main () { 22 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 23 | }`, 24 | vert: ` 25 | precision mediump float; 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnormal; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.zx); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y, r*sin(theta)) + 34 | vnormal+(1.0+cos(40.0*t+p.z)); 35 | } 36 | void main () { 37 | vnormal = normal; 38 | gl_Position = projection * view * model * 39 | vec4(warp(position), 1.0); 40 | gl_PointSize = 41 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 42 | }`, 43 | attributes: { 44 | position: skelly.positions, 45 | normal: normals(skelly.cells, skelly.positions) 46 | }, 47 | elements: skelly.cells, 48 | uniforms: { 49 | t: function(context, props){ 50 | return context.tick/1000 51 | }, 52 | model: function(context, props){ 53 | var theta = context.tick/60 54 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 55 | } 56 | 57 | }, 58 | 59 | primitive: "triangles" 60 | }) 61 | 62 | regl.frame(() => { 63 | regl.clear({ 64 | color: [0, 0, 0, 1] 65 | }) 66 | camera(() => { 67 | drawskelly() 68 | }) 69 | }) 70 | -------------------------------------------------------------------------------- /skellyscissor.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const skelly = require('./bits/skelly.json') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, 0, 0] 10 | }) 11 | 12 | const drawskelly = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 v ) { 17 | vec3 rgb = clamp( abs(mod(v.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return v.z + v.y * (rgb-0.5)*(1.0-abs(2.0*v.z-1.0)); 19 | } 20 | vec3 warpcolor (vec3 rgb){ 21 | return vec3 (rgb.x+(rgb.x*rgb.y),rgb.y , rgb.z); 22 | } 23 | void main () { 24 | gl_FragColor = vec4(hsl2rgb(warpcolor(abs(vnormal))), 1.0); 25 | }`, 26 | vert: ` 27 | precision mediump float; 28 | uniform mat4 model, projection, view; 29 | attribute vec3 position, normal; 30 | varying vec3 vnormal; 31 | uniform float t; 32 | vec3 warp (vec3 p){ 33 | float r = length(p.zx); 34 | float theta = atan(p.z, p.x); 35 | return vec3 (r*r*cos(theta), p.y, r*sin(theta)) +(1.0+cos(40.0*t+p.y)); 36 | } 37 | void main () { 38 | vnormal = normal; 39 | gl_Position = projection * view * model * 40 | vec4(warp(position), 1.0); 41 | gl_PointSize = 42 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 43 | }`, 44 | attributes: { 45 | position: skelly.positions, 46 | normal: normals(skelly.cells, skelly.positions) 47 | }, 48 | elements: skelly.cells, 49 | uniforms: { 50 | t: function(context, props){ 51 | return context.tick/1000 52 | }, 53 | model: function(context, props){ 54 | var theta = context.tick/60 55 | var inmat = mat4.translate(rmat, mat4.identity(rmat), 56 | [-50.0, -22.0, 0.0]) 57 | return mat4.rotateY(rmat, inmat, theta) 58 | } 59 | 60 | }, 61 | 62 | primitive: "triangles" 63 | }) 64 | 65 | regl.frame(() => { 66 | regl.clear({ 67 | color: [0, 0, 0, 1] 68 | }) 69 | camera(() => { 70 | drawskelly() 71 | }) 72 | }) 73 | -------------------------------------------------------------------------------- /spinningtop.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const cream = require('./bits/implicitcream.js') 6 | const cone = require('./bits/implicitcone.js') 7 | const normals = require('angle-normals') 8 | 9 | const camera = require('./bits/camera.js')(regl, { 10 | center: [0, 2.5, 0] 11 | }) 12 | 13 | const drawcream = regl({ 14 | frag: ` 15 | precision mediump float; 16 | varying vec3 vnormal; 17 | vec3 hsl2rgb(vec3 hsl) { 18 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 19 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 20 | } 21 | void main () { 22 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 23 | }`, 24 | vert: ` 25 | precision mediump float; 26 | uniform mat4 model, projection, view; 27 | attribute vec3 position, normal; 28 | varying vec3 vnormal; 29 | uniform float t; 30 | vec3 warp (vec3 p){ 31 | float r = length(p.zx*sin(t*p.yz)); 32 | float theta = atan(p.z, p.x); 33 | return vec3 (r*cos(theta), p.y, r*sin(theta)); 34 | } 35 | void main () { 36 | vnormal = normal; 37 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 38 | gl_PointSize = 39 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 40 | }`, 41 | attributes: { 42 | position: cream.positions, 43 | normal: normals(cream.cells, cream.positions) 44 | }, 45 | elements: cream.cells, 46 | uniforms: { 47 | t: function(context, props){ 48 | return context.tick/1000 49 | }, 50 | model: function(context, props){ 51 | var theta = context.tick/60 52 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 53 | } 54 | 55 | }, 56 | primitive: "lines" 57 | }) 58 | 59 | 60 | const drawcone = regl({ 61 | frag: ` 62 | precision mediump float; 63 | varying vec3 vnormal; 64 | vec3 hsl2rgb(vec3 hsl) { 65 | vec3 rgb = clamp( abs(mod(hsl.x*10.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 66 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 67 | } 68 | void main () { 69 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 70 | }`, 71 | vert: ` 72 | precision mediump float; 73 | uniform mat4 model, projection, view; 74 | attribute vec3 position, normal; 75 | varying vec3 vnormal; 76 | uniform float t; 77 | vec3 warp (vec3 p){ 78 | float r = length(p.zx*sin(t*p.y)); 79 | float theta = atan(p.z, p.x); 80 | return vec3 (r*cos(theta), p.y, r*sin(theta*t*p.x)); 81 | } 82 | void main () { 83 | vnormal = normal; 84 | gl_Position = projection * view * model * vec4(5.0*sin(t)*warp(position), 1.0); 85 | gl_PointSize = 86 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 87 | }`, 88 | attributes: { 89 | position: cone.positions, 90 | normal: normals(cone.cells, cone.positions) 91 | }, 92 | elements: cone.cells, 93 | uniforms: { 94 | t: function(context, props){ 95 | return context.tick/1000 96 | }, 97 | model: function(context, props){ 98 | var theta = context.tick/60 99 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 100 | } 101 | 102 | }, 103 | primitive: "line loop" 104 | }) 105 | 106 | regl.frame(() => { 107 | regl.clear({ 108 | color: [0, 0, 0, 1] 109 | }) 110 | camera(() => { drawcream(); drawcone() }) 111 | }) 112 | -------------------------------------------------------------------------------- /swimmypuff.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const skelly = require('./bits/skelly.json') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera')(regl, { 9 | center: [0, 2.5, 0] 10 | }) 11 | 12 | const drawskelly = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*2.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 22 | }`, 23 | vert: ` 24 | precision mediump float; 25 | uniform mat4 model, projection, view; 26 | attribute vec3 position, normal; 27 | varying vec3 vnormal; 28 | uniform float t; 29 | vec3 warp (vec3 p){ 30 | float r = length(p.zx); 31 | float theta = atan(p.z, p.x); 32 | return vec3 (r-cos(theta), r, r*sin(theta)) + 33 | vnormal+(1.0+cos(40.0*t+p.z)); 34 | } 35 | void main () { 36 | vnormal = normal; 37 | gl_Position = projection * view * model * 38 | vec4(warp(position), 1.0); 39 | gl_PointSize = 40 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 41 | }`, 42 | attributes: { 43 | position: skelly.positions, 44 | normal: normals(skelly.cells, skelly.positions) 45 | }, 46 | elements: skelly.cells, 47 | uniforms: { 48 | t: function(context, props){ 49 | return context.tick/1000 50 | }, 51 | model: function(context, props){ 52 | var theta = context.tick/60 53 | return mat4.rotateX(rmat, mat4.identity(rmat), theta) 54 | } 55 | 56 | }, 57 | 58 | primitive: "triangles" 59 | }) 60 | 61 | regl.frame(() => { 62 | regl.clear({ 63 | color: [0, 0, 0, 1] 64 | }) 65 | camera(() => { 66 | drawskelly() 67 | }) 68 | }) 69 | -------------------------------------------------------------------------------- /wingpole.js: -------------------------------------------------------------------------------- 1 | const regl = require('regl')() 2 | const mat4 = require('gl-mat4') 3 | var rmat = [] 4 | 5 | const dis = require('./bits/displacementmodule.js') 6 | const normals = require('angle-normals') 7 | 8 | const camera = require('./bits/camera.js')(regl, { 9 | center: [0, 2.5, 0] 10 | }) 11 | 12 | const drawdis = regl({ 13 | frag: ` 14 | precision mediump float; 15 | varying vec3 vnormal; 16 | vec3 hsl2rgb(vec3 hsl) { 17 | vec3 rgb = clamp( abs(mod(hsl.x*5.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); 18 | return hsl.z - hsl.y * (rgb-0.5)*(3.0-abs(2.0*hsl.y-1.0)); 19 | } 20 | void main () { 21 | gl_FragColor = vec4(hsl2rgb(abs(vnormal)), 1.0); 22 | }`, 23 | vert: ` 24 | precision mediump float; 25 | uniform mat4 model, projection, view; 26 | attribute vec3 position, normal; 27 | varying vec3 vnormal; 28 | uniform float t; 29 | vec3 warp (vec3 p){ 30 | float r = length(p.zx*sin(t*p.yz)); 31 | float theta = atan(p.z, p.x); 32 | return vec3 (r*cos(theta), p.x*theta+r, r*sin(theta)); 33 | } 34 | void main () { 35 | vnormal = normal; 36 | gl_Position = projection * view * model * vec4(warp(position), 1.0); 37 | gl_PointSize = 38 | (64.0*(1.0+sin(t*20.0+length(position))))/gl_Position.w; 39 | }`, 40 | attributes: { 41 | position: dis.positions, 42 | normal: normals(dis.cells, dis.positions) 43 | }, 44 | elements: dis.cells, 45 | uniforms: { 46 | t: function(context, props){ 47 | return context.tick/1000 48 | }, 49 | model: function(context, props){ 50 | var theta = context.tick/60 51 | return mat4.rotateY(rmat, mat4.identity(rmat), theta) 52 | } 53 | 54 | }, 55 | primitive: "triangles" 56 | }) 57 | 58 | 59 | 60 | regl.frame(() => { 61 | regl.clear({ 62 | color: [0, 0, 0, 1] 63 | }) 64 | camera(() => { drawdis() }) 65 | }) 66 | --------------------------------------------------------------------------------