29:null 2a:["$","title",null,{"children":"GPU SEP | ObeyMyGH | Observable"}] 2f:T1f14,iterate = { let mouseX = 0.0; let mouseY = 0.5; let mouseAvoidanceStrength = avoidance; // Параметры препятствия const obstacle = { x: 0.5, y: 0.5, r: 0.1 }; // Препятствие с центром в (0.5, 0.5) и радиусом 0.1 // Обработчик событий для обновления позиции мыши document.addEventListener("mousemove", (event) => { const rect = regl._gl.canvas.getBoundingClientRect(); mouseX = (event.clientX - rect.left) / rect.width; mouseY = 1 - (event.clientY - rect.top) / rect.height; // обратная ось Y }); // Шейдер для рисования препятствия const drawObstacle = regl({ frag: ` precision highp float; varying vec2 uv; uniform vec2 obstaclePosition; uniform float obstacleRadius; void main() { float dist = length(uv - obstaclePosition); if (dist < obstacleRadius) { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // Красный цвет препятствия } else { discard; // Убираем пиксели вне радиуса } } `, vert: ` precision highp float; attribute vec2 position; varying vec2 uv; void main() { uv = 0.5 * (position + 1.0); // Преобразуем координаты в диапазон [0, 1] gl_Position = vec4(position, 0, 1); } `, attributes: { position: [ [-1, -1], [1, -1], [1, 1], [-1, 1] ] }, elements: [ [0, 1, 2], [0, 2, 3] ], uniforms: { obstaclePosition: () => [obstacle.x, obstacle.y], // Центр препятствия obstacleRadius: () => obstacle.r // Радиус препятствия }, depth: { enable: false } }); let iterate = regl({ frag: ` precision highp float; varying vec2 uv; uniform vec2 inverseResolution; uniform sampler2D src, position, densityVelocity; uniform float dt; uniform float turn; uniform float uRand, uRandomness; uniform float uCohesion, uSeparation, uAlignment, uVelocityEnforcement, uLeading; uniform vec2 mouse; uniform float mouseAvoidanceStrength; uniform vec2 obstaclePosition; // Позиция препятствия uniform float obstacleRadius; // Радиус препятствия uniform float obstacleAvoidanceStrength; // Сила отталкивания от препятствия float random(vec2 co) { return fract(sin(dot(co.xy,vec2(12.9898,78.233))) * 43758.5453); } // Логика отталкивания от препятствия vec2 avoidObstacle(vec2 statePos, vec2 obstaclePos, float radius, float strength) { vec2 toObstacle = statePos - obstaclePos; float distToObstacle = length(toObstacle); if (distToObstacle < radius) { float force = strength * (radius - distToObstacle) / radius; return normalize(toObstacle) * force; // Сила отталкивания } return vec2(0.0, 0.0); // Нет силы, если частица далеко от препятствия } vec4 derivative (vec4 state) { vec2 xy1 = state.xy + uLeading * dt * state.zw; // Sample the blurred density and velocity vec3 densityVelocitym = texture2D(densityVelocity, xy1).xzw; xy1 = state.xy + dt * 2.0 * uLeading * densityVelocitym.yz / densityVelocitym.x; // Сохраняем выборку в переменной, чтобы избежать повторных выборок vec4 densityVelocity0 = texture2D(densityVelocity, state.xy); float density0 = densityVelocity0.x; vec2 avgVelocity = densityVelocity0.zw / max(density0, 1.0); // Предварительное вычисление значений для текстурных выборок vec2 offsetX = vec2(inverseResolution.x, 0); vec2 offsetY = vec2(0, inverseResolution.y); // Sample neighboring texels to compute the density gradient float densityE = texture2D(densityVelocity, state.xy + offsetX).x; float densityW = texture2D(densityVelocity, state.xy - offsetX).x; float densityN = texture2D(densityVelocity, state.xy + offsetY).x; float densityS = texture2D(densityVelocity, state.xy - offsetY).x; vec2 densityGradient = vec2(densityE - densityW, densityN - densityS) / inverseResolution; vec4 avgPositionValues = texture2D(position, xy1); float density1 = texture2D(densityVelocity, xy1).x; // Divide the sum of velocities by the sum of masses to compute a mass-weighted // local average position vec2 avgPosition = vec2( state.x < 0.5 ? avgPositionValues.x : avgPositionValues.z, state.y < 0.5 ? avgPositionValues.y : avgPositionValues.w ) / max(density1, 1e-8); // The magic numbers! float repulsion = (0.2 * 2.0) * uSeparation; float follow = (2500.0 * 2.0) * uAlignment; float cohesion = (850000.0 * 2.0) * uCohesion; float velocityEnforcement = (190.0 * 2.0) * uVelocityEnforcement; float vmag = length(state.zw); vec2 turn = 50.0 * normalize(densityGradient.yx) * pow(density0, 1.0) * vec2(-1.0, 1.0); vec2 randLoc = gl_FragCoord.xy + uRand * 100.0; vec2 rand = vec2(random(randLoc), random(randLoc + 0.5)) - 0.5; // Отталкивание от мыши vec2 toMouse = state.xy - mouse; float distToMouse = length(toMouse); vec2 mouseAvoidanceForce = mouseAvoidanceStrength * normalize(toMouse) / max(distToMouse, 0.01); // Отталкивание от препятствия vec2 obstacleAvoidanceForce = avoidObstacle(state.xy, obstaclePosition, obstacleRadius, obstacleAvoidanceStrength); return vec4(state.zw, -densityGradient * repulsion + (avgVelocity - state.zw) * follow + (avgPosition - state.xy) * cohesion / max(0.01, uLeading) + state.zw * (5.0 - vmag) * velocityEnforcement + 20000.0 * rand * uRandomness - 1000.0 * length(state.xy - 0.5) * (state.xy - 0.5) + mouseAvoidanceForce + obstacleAvoidanceForce // Добавляем отталкивание от препятствия ); } void main () { vec4 yn = texture2D(src, uv); gl_FragColor = yn + dt * derivative(yn); float velocity = length(gl_FragColor.zw); const float maxVelocity = 10.0; if (velocity > maxVelocity) gl_FragColor.zw *= maxVelocity / velocity; gl_FragColor.xy = fract(gl_FragColor.xy); }`, uniforms: { uRandomness: regl.prop("randomness"), uRand: () => Math.random(), uCohesion: regl.prop("cohesion"), uSeparation: regl.prop("separation"), uVelocityEnforcement: regl.prop("velocityEnforcement"), uAlignment: regl.prop("alignment"), uLeading: regl.prop("leading"), turn: (ctx, props) => Math.sin(props.time * 0.5) * 30.0, inverseResolution: [1 / gridSize, 1 / gridSize], src: regl.prop("src"), position: regl.prop("position"), densityVelocity: regl.prop("densityVelocity"), dt: regl.prop("dt"), mouse: () => [mouseX, mouseY], // Передача позиции мыши в шейдер mouseAvoidanceStrength: () => mouseAvoidanceStrength, // Сила отталкивания от мыши obstaclePosition: () => [obstacle.x, obstacle.y], // Позиция препятствия obstacleRadius: () => obstacle.r, // Радиус препятствия obstacleAvoidanceStrength: () => avoidance // Сила отталкивания от препятствия } }); return (props) => { // Выполняем симуляцию blit(() => iterate(props)); // Рисуем препятствие drawObstacle(); }; }30:Td33,simulationLoop = { restart; let gif; let width = regl._gl.canvas.width; let height = regl._gl.canvas.height; if (saveGIF) gif = new GIF({ width, height }); var gifTick = 0; var gifDone = false; let tick = 0; let frame = regl.frame(() => { if (!simulate || (saveGIF && gifDone)) return; offscreenFBO.resize(width, height); if (simulate) { [0, 1].forEach((i) => { positionAccumulationFBO[i].use(() => regl.clear({ color: [0, 0, 0, 0] }) ); densityVelocityAccumulationFBO[i].use(() => regl.clear({ color: [0, 0, 0, 0] }) ); }); configureAccumulation({ count: n, src: stateFBO[0] }, () => { if (regl.hasExtension("WEBGL_draw_buffers")) { positionDensityVelocityFBO[0].use(accumulatePositionAndVelocity); } else { positionAccumulationFBO[0].use(accumulatePosition); densityVelocityAccumulationFBO[0].use(accumulateDensityVelocity); } }); blit(() => { if (regl.hasExtension("WEBGL_draw_buffers")) { blur[blurStencil]([ { src1: positionAccumulationTexture[0], src2: densityVelocityAccumulationTexture[0], dst: positionDensityVelocityFBO[1], direction: [1, 0] }, { src1: positionAccumulationTexture[1], src2: densityVelocityAccumulationTexture[1], dst: positionDensityVelocityFBO[0], direction: [0, 1] } ]); } else { blur[blurStencil]([ { src1: positionAccumulationTexture[0], dst: positionAccumulationFBO[1], direction: [1, 0] }, { src1: positionAccumulationTexture[1], dst: positionAccumulationFBO[0], direction: [0, 1] } ]); } }); stateFBO[1].use(() => { iterate({ randomness, alignment, velocityEnforcement, separation, cohesion, leading, time: (tick * 1) / 60, src: stateFBO[0], dt, position: positionAccumulationTexture[0], densityVelocity: densityVelocityAccumulationTexture[0] }); }); swap(stateFBO); } offscreenFBO.use(() => { regl.clear({ color: [0, 0, 0, 1] }); drawBoids({ src: stateFBO[0], velocities: velocityFBO.color[0], // Передаем текстуру скоростей ɑ, count: n, color1: [form.rr, form.gg, form.bb], // Красный цвет color2: [form.r, form.g, form.b] // Синий цвет }); }); copy({ src: offscreenFBO, γ, offset: 0, scale: 1 }); if (saveGIF && tick++ % gifFrameStride === 0) { console.log("tick!", gifTick); regl.poll(); gif.addFrame(regl._gl.canvas, { copy: true, delay: 16 }); if (gifTick++ === gifFrames) { console.log("GIF capture complete. Beginning conversion…"); gif.render(); frame.cancel(); frame = null; } } }); invalidation.then(() => { frame && frame.cancel(); if (saveGIF) gif.abort(); }); if (saveGIF) gif.on("finished", (blob) => saveFile(blob, "boids.gif")); }31:T754,drawBoids = regl({ vert: ` precision highp float; attribute vec2 uv; uniform sampler2D positions; void main () { vec2 state = texture2D(positions, uv.xy).xy; gl_Position = vec4(state * 2.0 - 1.0, 0, 1); gl_PointSize = 1.0; } `, frag: ` precision highp float; uniform float alpha; uniform vec3 color1; uniform vec3 color2; uniform vec2 canvasCenter; // Центр канваса uniform float canvasRadius; // Радиус для нормализации void main () { // Координаты текущего пикселя vec2 fragCoord = gl_FragCoord.xy; // Вычисляем расстояние от центра float distToCenter = length(fragCoord - canvasCenter); // Нормализуем расстояние float t = clamp(distToCenter / canvasRadius, 0.0, 1.0); // Интерполяция цветов vec3 color = mix(color1, color2, t); // Устанавливаем итоговый цвет gl_FragColor = vec4(color, alpha); } `, count: regl.prop("count"), primitive: "points", depth: { enable: false }, uniforms: { alpha: (ctx, props) => ((80000 * props.ɑ) / Math.pow(textureSize, 2)) * (width / 600), positions: regl.prop("src"), color1: regl.prop("color1"), color2: regl.prop("color2"), canvasCenter: (ctx) => [ctx.viewportWidth / 2.0, ctx.viewportHeight / 2.0], // Центр канваса canvasRadius: (ctx) => Math.min(ctx.viewportWidth, ctx.viewportHeight) / 2.0 // Радиус для нормализации }, attributes: { uv: { buffer: lookupBuffer } }, blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: 1, dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } } })32:T1008,blur = [ /* * https://github.com/Jam3/glsl-fast-gaussian-blur * * The MIT License (MIT) * Copyright (c) 2015 Jam3 * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE * OR OTHER DEALINGS IN THE SOFTWARE. */ `vec4 blur(sampler2D image, vec2 uv, vec2 inverseResolution, vec2 direction) { vec4 color = vec4(0.0); vec2 off1 = vec2(1.3333333333333333) * direction; color += texture2D(image, uv) * 0.29411764705882354; color += texture2D(image, uv + (off1 * inverseResolution)) * 0.35294117647058826; color += texture2D(image, uv - (off1 * inverseResolution)) * 0.35294117647058826; return color; }`, `vec4 blur(sampler2D image, vec2 uv, vec2 inverseResolution, vec2 direction) { vec4 color = vec4(0.0); vec2 off1 = vec2(1.3846153846) * direction; vec2 off2 = vec2(3.2307692308) * direction; color += texture2D(image, uv) * 0.2270270270; color += texture2D(image, uv + (off1 * inverseResolution)) * 0.3162162162; color += texture2D(image, uv - (off1 * inverseResolution)) * 0.3162162162; color += texture2D(image, uv + (off2 * inverseResolution)) * 0.0702702703; color += texture2D(image, uv - (off2 * inverseResolution)) * 0.0702702703; return color; }`, `vec4 blur(sampler2D image, vec2 uv, vec2 inverseResolution, vec2 direction) { vec4 color = vec4(0.0); vec2 off1 = vec2(1.411764705882353) * direction; vec2 off2 = vec2(3.2941176470588234) * direction; vec2 off3 = vec2(5.176470588235294) * direction; color += texture2D(image, uv) * 0.1964825501511404; color += texture2D(image, uv + (off1 * inverseResolution)) * 0.2969069646728344; color += texture2D(image, uv - (off1 * inverseResolution)) * 0.2969069646728344; color += texture2D(image, uv + (off2 * inverseResolution)) * 0.09447039785044732; color += texture2D(image, uv - (off2 * inverseResolution)) * 0.09447039785044732; color += texture2D(image, uv + (off3 * inverseResolution)) * 0.010381362401148057; color += texture2D(image, uv - (off3 * inverseResolution)) * 0.010381362401148057; return color; }` ].map(kernel => regl({ frag: ` ${ regl.hasExtension('WEBGL_draw_buffers') ? `#extension GL_EXT_draw_buffers : require` : '' } precision highp float; varying vec2 uv; uniform sampler2D src1, src2; uniform vec2 direction, inverseResolution; ${kernel} void main () { ${ regl.hasExtension('WEBGL_draw_buffers') ? ` gl_FragData[0] = blur(src1, uv, inverseResolution, direction); gl_FragData[1] = blur(src2, uv, inverseResolution, direction); ` : ` gl_FragColor = blur(src1, uv, inverseResolution, direction); ` } } `, uniforms: { inverseResolution: ctx => [1 / gridSize, 1 / gridSize], src1: regl.prop('src1'), src2: regl.prop('src2'), direction: regl.prop('direction') }, framebuffer: regl.prop('dst') }) )33:[] 2d:{"id":"4bf257a83ef89e45","slug":null,"title":"GPU SEP","thumbnail":"3680fe02f18b26c1bd85c27d08c130887f8a2d910a2704e7b6ac893ade8872f4","access_level":"public","create_time":"$D2025-01-04T02:05:21.105Z","update_time":"$D2025-01-15T15:13:18.604Z","view_time":null,"first_public_time":"$D2025-09-06T22:13:04.466Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0354938a5dd10c5f","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":"starter_2024"},"version":3965,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null}],"members":[{"type":"team","id":"0354938a5dd10c5f","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":"starter_2024","role":"editor"},{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GPU SEP","cells":[{"id":2301,"value":"md`# GPU SEP`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"dataType === 'half float'\n ? html`Your device appears unable to write to floating point framebuffer attachments. Unfortunately, this implementation is not tuned well for half float precision, but we'll do our best!`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3800,"value":"import { viewof controller } from \"8e41ed5a10248e12\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3915,"value":"import { viewof bR } from \"8e41ed5a10248e12\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3909,"value":"controller","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3517,"value":"html`

Color

\n ${viewof form}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3364,"value":"// Получаем ссылку на канвас\ncanvas = regl._gl.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2441,"value":"configureAccumulation = regl({\n vert: `\n precision highp float;\n attribute vec2 uv;\n uniform sampler2D positions;\n varying vec4 state;\n void main () {\n state = texture2D(positions, uv.xy);\n gl_Position = vec4(state.xy * 2.0 - 1.0, 0, 1);\n gl_PointSize = 1.0;\n }\n `,\n count: regl.prop('count'),\n primitive: 'points',\n depth: { enable: false },\n uniforms: {\n positions: regl.prop('src'),\n scale: () => (1e6 / n) * Math.pow(gridSize / 512, 1) * 8.0\n },\n attributes: { uv: { buffer: lookupBuffer } },\n blend: {\n enable: true,\n func: { srcRGB: 1, srcAlpha: 1, dstRGB: 1, dstAlpha: 1 },\n equation: { rgb: 'add', alpha: 'add' }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"initialState = {\n let v = 0.5;\n var x = new Float32Array(n * 4);\n for (var i4 = 0; i4 < n * 4; i4 += 4) {\n const theta = Math.random() * Math.PI * 2;\n const r = 0.285 * Math.pow(Math.random(), 0.1);\n x[i4 + 0] = 0.5 + r * Math.cos(theta);\n x[i4 + 1] = 0.5 + r * Math.sin(theta);\n x[i4 + 2] = (Math.random() * 2 - 1) * v;\n x[i4 + 3] = (Math.random() * 2 - 1) * v;\n }\n return x;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3918,"value":"viewof bR","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"viewof restart = button({ value: \"Restart\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"blit = regl({\n vert: `\n precision highp float;\n varying vec2 uv;\n attribute vec2 xy;\n void main () {\n uv = 0.5 + 0.5 * xy;\n gl_Position = vec4(xy, 0, 1);\n }\n `,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3805,"value":"viewof controller","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"viewof simulate = checkbox({ options: ['simulate'], value: 'simulate' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"viewof textureSize = slider({\n min: 0,\n max: 4096,\n step: 16,\n value: 672,\n description: tex`\\mathit{Texture\\;size}\\;(\\sqrt{\\mathit{boid\\;count}})`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2415,"value":"viewof blurStencil = select({\n options: [\n { label: '5px', value: 0 },\n { label: '9px', value: 1 },\n { label: '13px', value: 2 }\n ],\n value: 2,\n description: 'Blur stencil size'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"gridSize = 512\n\n// (power of two)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2354,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"regl = {\n var canvas = document.createElement(\"canvas\");\n var pixelRatio = Math.min(devicePixelRatio, 1);\n var w = width; //Math.min(640, width);\n var h = w;\n canvas.style.width = `${w}px`;\n canvas.style.height = `${h}px`;\n canvas.width = w * pixelRatio;\n canvas.height = h * pixelRatio;\n let regl = createREGL({\n optionalExtensions: [\n \"OES_texture_float\",\n \"OES_texture_half_float\",\n \"OES_texture_half_float_linear\",\n \"OES_texture_float_linear\",\n \"WEBGL_draw_buffers\"\n ],\n canvas,\n pixelRatio: pixelRatio,\n attributes: {\n antialias: true,\n preserveDrawingBuffer: true\n }\n });\n return regl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2889,"value":"velocityFBO = regl.framebuffer({\n color: regl.texture({\n width: gridSize,\n height: gridSize,\n format: \"rgba\",\n type: \"float\"\n }),\n depthStencil: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"onRestart = {\n // Restart when you toggle saving or when you click restart.\n saveGIF;\n restart;\n\n // Necessary whenever you do something outside of regl.frame\n regl.poll();\n\n // Write positions to state framebuffer #0\n stateFBO.forEach(f =>\n f.use(() => {\n initialize({\n count: n,\n state: initialStateBuffer\n });\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"lookupTable = createTextureLookupTable(textureSize, textureSize, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"initialStateBuffer = {\n var b = regl.buffer(initialState);\n invalidation.then(() => b.destroy());\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"lookupBuffer = {\n var b = regl.buffer(lookupTable);\n invalidation.then(() => b.destroy());\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"n = textureSize * textureSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"stateFBO = {\n var fbos = [0, 1].map(() =>\n regl.framebuffer({\n radius: textureSize,\n colorType: dataType,\n depth: false,\n stencil: false\n })\n );\n invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return fbos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"positionAccumulationTexture = {\n var textures = [0, 1].map(() =>\n regl.texture({\n width: gridSize,\n height: gridSize,\n type: dataType,\n wrapS: 'repeat',\n wrapT: 'repeat',\n min: hasLinearExt ? 'linear' : 'nearest',\n mag: hasLinearExt ? 'linear' : 'nearest'\n })\n );\n //invalidation.then(textures.forEach(t => t.destroy()));\n return textures;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"densityVelocityAccumulationTexture = {\n var textures = [0, 1].map(() =>\n regl.texture({\n width: gridSize,\n height: gridSize,\n type: dataType,\n wrapS: 'repeat',\n wrapT: 'repeat',\n min: hasLinearExt ? 'linear' : 'nearest',\n mag: hasLinearExt ? 'linear' : 'nearest'\n })\n );\n //invalidation.then(textures.forEach(t => t.destroy()));\n return textures;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"positionAccumulationFBO = positionAccumulationTexture.map(t =>\n regl.framebuffer({ color: t, depthStencil: false })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"densityVelocityAccumulationFBO = densityVelocityAccumulationTexture.map(t =>\n regl.framebuffer({ color: t, depthStencil: false })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"positionDensityVelocityFBO = regl.hasExtension(\"WEBGL_draw_buffers\")\n ? [0, 1].map((i) => {\n var framebuffer = regl.framebuffer({\n colorCount: 2,\n colors: [\n positionAccumulationTexture[i],\n densityVelocityAccumulationTexture[i]\n ],\n depthStencil: false\n });\n invalidation.then(() => framebuffer.destroy());\n return framebuffer;\n })\n : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"offscreenFBO = regl.framebuffer({\n radius: width,\n colorType: canWriteToFloat ? \"float\" : \"half float\",\n depth: false,\n stencil: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"initialize = regl({\n vert: `\n precision highp float;\n attribute vec2 aUV;\n attribute vec4 aInitialState;\n varying vec4 state;\n void main () {\n state = aInitialState;\n gl_Position = vec4(aUV * 2.0 - 1.0, 0, 1);\n gl_PointSize = 1.0;\n }`,\n frag: `\n precision highp float;\n varying vec4 state;\n void main () {\n gl_FragColor = vec4(state);\n }`,\n count: regl.prop(\"count\"),\n primitive: \"points\",\n attributes: {\n aUV: lookupBuffer,\n aInitialState: regl.prop(\"state\")\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2326,"value":"md`The following shader draws the position and velocity onto a texture. This serves as our communication mechanism instead of direct nearest-neighbor lookups.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2440,"value":"accumulatePosition = regl({\n frag: `\n precision highp float;\n uniform float scale;\n varying vec4 state;\n void main () {\n gl_FragColor = vec4(\n fract(state.xy + 0.25) - 0.25,\n fract(state.xy - 0.25) + 0.25\n ) * scale;\n }`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2439,"value":"accumulateDensityVelocity = regl({\n frag: `\n precision highp float;\n uniform float scale;\n varying vec4 state;\n void main () {\n gl_FragColor = vec4(1, 0, state.zw) * scale;\n }`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"accumulatePositionAndVelocity = regl.hasExtension(\"WEBGL_draw_buffers\")\n ? regl({\n frag: `\n #extension GL_EXT_draw_buffers : require\n precision highp float;\n uniform float scale;\n varying vec4 state;\n void main () {\n gl_FragData[0] = vec4(\n fract(state.xy + 0.25) - 0.25,\n fract(state.xy - 0.25) + 0.25\n ) * scale;\n gl_FragData[1] = vec4(1, 0, state.zw) * scale;\n }\n `\n })\n : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2330,"value":"md`The following shader performs the main simulation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"copy = {\n let copy = regl({\n frag: `\n precision highp float;\n varying vec2 uv;\n uniform sampler2D src;\n uniform float gamma, offset, scale;\n void main () {\n vec3 color = max(offset + scale * texture2D(src, uv).rgb, vec3(0));\n gl_FragColor = vec4(\n 1.0 - pow(color.r, gamma),\n 1.0 - pow(color.g, gamma), // Save some 'pow' calls since only grayscale right now\n 1.0 - pow(color.b, gamma),\n 1.0);\n }`,\n uniforms: {\n src: regl.prop(\"src\"),\n gamma: (ctx, props) => 1 / props.γ,\n scale: regl.prop(\"scale\"),\n offset: regl.prop(\"offset\")\n },\n blend: {\n enable: false,\n func: { srcRGB: \"src alpha\", srcAlpha: 1, dstRGB: 1, dstAlpha: 1 },\n equation: { rgb: \"reverse subtract\", alpha: \"add\" }\n }\n });\n return props => blit(() => copy(props));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"function swap(obj, a, b) {\n a = a === undefined ? 0 : a;\n b = b === undefined ? 1 : b;\n let tmp = obj[a];\n obj[a] = obj[b];\n obj[b] = tmp;\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"canWriteToFloat = canWriteToFBOOfType(regl, 'float')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"canWriteToHalfFloat = canWriteToFBOOfType(regl, 'half float')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2463,"value":"dataType = {\n if (canWriteToFloat) return 'float';\n if (canWriteToHalfFloat) return 'half float';\n throw new Error(\n 'Unable to write to either floating point or half floating point framebuffer attachments.'\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2450,"value":"hasLinearExt = {\n if (canWriteToFloat) return regl.hasExtension('OES_texture_float_linear');\n if (canWriteToHalfFloat)\n return regl.hasExtension('OES_texture_half_float_linear');\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3450,"value":"// Создаём форму\nviewof form = Inputs.form({\n r: Inputs.range([0, 1], { label: \"R (Color 1)\", step: 0.01, value: 0 }),\n g: Inputs.range([0, 1], { label: \"G (Color 1)\", step: 0.01, value: 1 }),\n b: Inputs.range([0, 1], { label: \"B (Color 1)\", step: 0.01, value: 0 }),\n rr: Inputs.range([0, 1], { label: \"R (Color 2)\", step: 0.01, value: 1 }),\n gg: Inputs.range([0, 1], { label: \"G (Color 2)\", step: 0.01, value: 0 }),\n bb: Inputs.range([0, 1], { label: \"B (Color 2)\", step: 0.01, value: 0 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2341,"value":"// Dynamically initialize the cohesion slider with `getController20Value()`\nviewof cohesion = slider({\n value: controller.cohesion,\n description: \"Cohesion\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2337,"value":"viewof separation = slider({\n value: controller.separation,\n description: \"Separation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2825,"value":"viewof avoidance = slider({\n min: -80,\n max: 50,\n step: 1,\n value: controller.avoidance,\n description: \"Avoidance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2360,"value":"viewof alignment = slider({\n value: controller.alignment,\n description: \"Alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2357,"value":"viewof velocityEnforcement = slider({\n value: controller.velocityEnforcement,\n description: \"Velocity enforcement\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2429,"value":"viewof leading = slider({\n value: controller.leading,\n description: \"Leading (bias toward sampling in front of each bird)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3367,"value":"// Функция для изменения стиля курсора, когда мышь над канвасом\nfunction changeCursorOnCanvas(event) {\n // Проверяем, находится ли мышь в пределах канваса\n const rect = canvas.getBoundingClientRect();\n const mouseX = event.clientX;\n const mouseY = event.clientY;\n\n // Проверяем, внутри ли канваса\n if (\n mouseX >= rect.left &&\n mouseX <= rect.right &&\n mouseY >= rect.top &&\n mouseY <= rect.bottom\n ) {\n // Если мышь внутри канваса, меняем курсор на что-то интерактивное (например, pointer)\n canvas.style.cursor = \"crosshair\";\n } else {\n // Если мышь выходит за пределы канваса, восстанавливаем стандартный курсор\n canvas.style.cursor = \"default\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3370,"value":"canvas.addEventListener(\"mousemove\", changeCursorOnCanvas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"viewof dt = slider({\n min: 0.00001,\n max: 0.0005,\n value: controller.dt,\n step: 0.0001,\n precision: 5,\n description: tex`\\Delta t`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2802,"value":"viewof randomness = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0,\n description: \"Random deviation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2347,"value":"md`### Gif output\nCheck the following box to save a gif using gif.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"viewof saveGIF = checkbox({ options: ['save GIF'] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"viewof gifFrames = slider({\n min: 1,\n max: 2000,\n value: 500,\n step: 1,\n description: 'Number of frames in gif'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1501,"value":"viewof gifFrameStride = slider({\n min: 1,\n max: 4,\n value: 3,\n step: 1,\n description: 'GIF frame stride'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`The GIF takes a while to encode. You may open up the inspector to get some indication of progress. GIFs may be encoded to mp4 via:\n\\`\\`\\`\nffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf \"scale=trunc(iw/2)*2:trunc(ih/2)*2\" output.mp4\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"GIF = {\n const gif = await require(\"gif.js@0.2\");\n const workerScript = await fetch(\n \"https://unpkg.com/gif.js@0.2/dist/gif.worker.js\"\n )\n .then(response => response.blob())\n .then(blob => URL.createObjectURL(blob, { type: \"text/javascript\" }));\n function GIF(options) {\n gif.call(this, { workerScript, ...options });\n }\n GIF.prototype = Object.create(gif.prototype);\n return GIF;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"function saveFile(blob, filename) {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveOrOpenBlob(blob, filename);\n } else {\n const a = document.createElement('a');\n document.body.appendChild(a);\n const url = window.URL.createObjectURL(blob);\n a.href = url;\n a.download = filename;\n a.click();\n setTimeout(() => {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(a);\n }, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {\n createTextureLookupTable,\n canWriteToFBOOfType\n} from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"import { checkbox, button, slider, select, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"viewof γ = slider({\n min: 0.5,\n max: 2.5,\n value: 1.0,\n step: 0.01,\n description: tex`\\mathit{Gamma},\\;\\gamma`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"viewof ɑ = slider({\n min: -1,\n max: 3,\n value: 0.8,\n description: tex`\\mathit{Opacity},\\;\\alpha`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"