`, { inline: true })
]
const particles = Particles(gl, {
shape: [64, 64],
logic: logics[0],
vert: `
precision mediump float;
uniform sampler2D data;
uniform vec2 resolution;
attribute vec2 uv;
void main() {
vec4 tData = texture2D(data, uv);
vec2 position = tData.xy;
position.x *= resolution.y / resolution.x;
gl_PointSize = 5.0;
gl_Position = vec4(position, 1, 1);
}
`,
frag: `
precision mediump float;
void main() {
vec2 p = (gl_PointCoord.xy - 0.5) * 2.0;
float d = 1.0 - length(p);
gl_FragColor = vec4(d * vec3(1.0, 1.0, 1.0), 1);
}
`
})
particles.populate(function(u, v, data) {
var a = Math.random() * Math.PI * 2
const glslify = require('glslify')
const start = Date.now()
const registry = Geom(gl)
.attr('position', icosphere(3))
const shaders = {
registry: Shader(gl
, glslify('./shaders/registry.vert')
, glslify('./shaders/registry.frag')
)
}
const particles = Particles(gl, {
shape: [128, 256],
logic: glslify('./shaders/particles.glsl'),
vert: glslify('./shaders/particles.vert'),
frag: glslify('./shaders/particles.frag')
})
particles.populate(function(u, v, data) {
data[0] = (Math.random() - 0.5) * 0.1
data[1] = (Math.random() - 0.5) * 0.1
data[2] = (Math.random() - 0.5) * 0.1
data[3] = 0
})
const model = new Float32Array(16)
const view = new Float32Array(16)
const proj = new Float32Array(16)
const eye = new Float32Array(3)
export default function(gl) {
const quadShader = createShader(gl, quadVert, quadFrag)
const particles = Particles(gl, {
shape: [500, 500],
logic: logic,
vert: pointVert,
frag: pointFrag
})
const r = [0, 0]
const mouseVec = [0, 0]
let time = 0
let motion
let resolution
particles.populate(repopulate)
Object.defineProperties(render, {
motion: {
get() {
return motion
},
set(tex) {
motion = tex
}
},
resolution: {
get() {
return resolution
},
set(res) {
resolution = res
}
}
})
return render
function repopulate(u, v, data) {
random(r, Math.random())
data[0] = r[0]
data[1] = r[1]
}
function render(dt) {
time += dt / 1000
const width = gl.drawingBufferWidth
const height = gl.drawingBufferHeight
const deviceResolution = [width, height]
gl.disable(gl.BLEND)
if (motion)
motion.bind(1)
const midx = window.innerWidth/2
const midy = window.innerHeight/2
mouseVec[0] = ((mouse[0] - midx) / (resolution[0]/2))
mouseVec[1] = ((mouse[1] - midy) / (-resolution[1]/2))
// mouseVec[0] = (((mouse[0] + window.innerWidth/2) / resolution[0]) * 2 - 1)
// mouseVec[0] += (deviceResolution[0]/deviceResolution[1])
// mouseVec[1] = (mouse[1] / window.innerHeight) * -2 + 1
// mouseVec[0] *=
// uv.x -= aspect/2.0 - 0.5;
// mouseVec[1] *= 2
particles.step(function(uniforms) {
uniforms.motion = 1
uniforms.mouse = mouseVec
uniforms.motionResolution = particles.shape
uniforms.resolution = deviceResolution
uniforms.time = time
})
gl.enable(gl.BLEND)
gl.blendFunc(gl.ONE, gl.ONE)
gl.viewport(0, 0, width, height)
clear(gl)
quadShader.bind()
quadShader.uniforms.time = time
quadShader.uniforms.motion = 1
quadShader.uniforms.resolution = deviceResolution
triangle(gl)
particles.draw(function(uniforms) {
uniforms.mouse = mouseVec
uniforms.motion = 1
uniforms.time = time
uniforms.resolution = deviceResolution
})
}
}