{"version":3,"sources":["https://lively-kernel.org/lively4/BP2019RH1/scratch/individualsAsPoints/regl/regl-sprites.js"],"names":["regl","N","BLOCK_SIZE","SPRITES","Array","fill","map","framebuffer","radius","colorType","depthStencil","updateSprites","vert","frag","depth","enable","tick","uniforms","state","shapeX","context","shapeY","deltaT","gravity","attributes","position","primitive","elements","offset","count","drawSprites","sprite","_","i","x","y","reverse","prop","BLOCK","data","Float32Array","width","height","COUNT_DIV","document","createElement","Object","assign","style","color","left","top","body","appendChild","toScreen","size","pixelRatio","Math","min","max","frame","drawingBufferWidth","drawingBufferHeight","mouseX","mouse","mouseY","buttons","random","subimage","innerText","clear"],"mappings":"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","file":"regl-sprites.js","sourcesContent":["/*\n tags: advanced, fbo\n

This example shows how to update and render some simple particles on the GPU,\n creating a simple particle simulation.

\n */\n\n/*const regl = require('../regl')({\n extensions: 'OES_texture_float'\n})\nconst mouse = require('mouse-change')()*/\n\nimport regl from \"src/external/regl.js\"\n\nconst N = 512\nconst BLOCK_SIZE = 64\n\nconst SPRITES = Array(2).fill().map(() =>\n regl.framebuffer({\n radius: N,\n colorType: 'float',\n depthStencil: false\n }))\n\nconst updateSprites = regl({\n vert: `\n precision mediump float;\n attribute vec2 position;\n void main () {\n gl_Position = vec4(position, 0, 1);\n }\n `,\n\n frag: `\n precision highp float;\n uniform sampler2D state;\n uniform float shapeX, shapeY, deltaT, gravity;\n void main () {\n vec2 shape = vec2(shapeX, shapeY);\n vec4 prevState = texture2D(state,\n gl_FragCoord.xy / shape);\n vec2 position = prevState.xy;\n vec2 velocity = prevState.zw;\n position += 0.5 * velocity * deltaT;\n if (position.x < -1.0 || position.x > 1.0) {\n velocity.x *= -1.0;\n }\n if (position.y < -1.0 || position.y > 1.0) {\n velocity.y *= -1.0;\n }\n position += 0.5 * velocity * deltaT;\n velocity.y = velocity.y + gravity * deltaT;\n gl_FragColor = vec4(position, velocity);\n }\n `,\n\n depth: {enable: false},\n\n framebuffer: ({tick}) => SPRITES[(tick + 1) % 2],\n\n uniforms: {\n state: ({tick}) => SPRITES[(tick) % 2],\n shapeX: regl.context('viewportWidth'),\n shapeY: regl.context('viewportHeight'),\n deltaT: 0.1,\n gravity: -0.5\n },\n\n attributes: {\n position: [\n 0, -4,\n 4, 4,\n -4, 4\n ]\n },\n primitive: 'triangles',\n elements: null,\n offset: 0,\n count: 3\n})\n\nconst drawSprites = regl({\n vert: `\n precision highp float;\n attribute vec2 sprite;\n uniform sampler2D state;\n varying vec2 rg;\n void main () {\n vec2 position = texture2D(state, sprite).xy;\n gl_PointSize = 16.0;\n rg = sprite;\n gl_Position = vec4(position, 0, 1);\n }\n `,\n\n frag: `\n precision highp float;\n varying vec2 rg;\n void main () {\n gl_FragColor = vec4(rg, 1.0 - max(rg.x, rg.y), 1);\n }\n `,\n\n attributes: {\n sprite: Array(N * N).fill().map(function (_, i) {\n const x = i % N\n const y = (i / N) | 0\n return [(x / N), (y / N)]\n }).reverse()\n },\n\n uniforms: {\n state: ({tick}) => SPRITES[tick % 2]\n },\n\n primitive: 'points',\n offset: (context, {count}) => N * N - count,\n elements: null,\n count: regl.prop('count')\n})\n\nlet count = 0\nconst BLOCK = {\n data: new Float32Array(4 * BLOCK_SIZE),\n width: BLOCK_SIZE,\n height: 1\n}\n\nconst COUNT_DIV = document.createElement('div')\nObject.assign(COUNT_DIV.style, {\n color: 'white',\n position: 'absolute',\n left: '20px',\n top: '20px',\n 'z-index': 20\n})\ndocument.body.appendChild(COUNT_DIV)\n\nfunction toScreen (x, size, pixelRatio) {\n return Math.min(Math.max(2.0 * pixelRatio * x / size - 1.0, -0.999), 0.999)\n}\n\nregl.frame(({tick, drawingBufferWidth, drawingBufferHeight, pixelRatio}) => {\n const mouseX = toScreen(mouse.x, drawingBufferWidth, pixelRatio)\n const mouseY = -toScreen(mouse.y, drawingBufferHeight, pixelRatio)\n\n if (mouse.buttons) {\n for (let i = 0; i < BLOCK_SIZE; ++i) {\n BLOCK.data[4 * i] = mouseX\n BLOCK.data[4 * i + 1] = mouseY\n BLOCK.data[4 * i + 2] = 0.25 * (Math.random() - 0.5)\n BLOCK.data[4 * i + 3] = Math.random()\n }\n SPRITES[(tick) % 2].color[0].subimage(\n BLOCK, count % N, ((count / N) | 0) % N)\n count += BLOCK_SIZE\n COUNT_DIV.innerText = Math.min(count, N * N)\n }\n\n updateSprites()\n\n regl.clear({\n color: [0, 0, 0, 1],\n depth: 1\n })\n\n drawSprites({\n count: Math.min(count, N * N)\n })\n})"]}