console.clear()
const snoiseStuff = `
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
`
class ShapeBase {
constructor (gl, props) {
this.gl = gl
this.position = props.position
this.radius = props.radius
this.segmentsLen = props.segmentsLen
this.index = props.index
this.targetScale = props.targetScale
let vertexShaderSource = `
uniform float u_time;
uniform float u_timeOffset;
uniform float u_offset;
uniform vec2 u_translate;
uniform vec2 u_scale;
uniform float u_sin;
uniform float u_cos;
attribute vec4 a_position;
attribute vec2 a_offset;
void main () {
float tX = u_translate.x;
float tY = u_translate.y;
mat4 translateMatrix = mat4(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
tX, tY, 0.0, 1.0
);
mat4 rotateMatrix = mat4(
u_cos, -u_sin, 0.0, 0.0,
u_sin, u_cos, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
);
float sX = u_scale.x;
float sY = u_scale.y;
mat4 scaleMatrix = mat4(
sX, 0.0, 0.0, 0.0,
0.0, sY, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
);
mat4 transformMatrix = translateMatrix * rotateMatrix * scaleMatrix;
vec4 new_position = transformMatrix * a_position;
new_position.y += (sin(u_time * u_timeOffset + new_position.x * u_offset) * 0.025) * u_scale.x;
gl_Position = new_position;
gl_PointSize = 6.0;
}
`
let fragmentShaderSource = `
precision highp float;
uniform vec4 u_color;
void main () {
gl_FragColor = u_color;
}
`
this.vertexShader = makeShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
this.fragmentShader = makeShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource)
this.program = makeProgram(gl, this.vertexShader, this.fragmentShader)
this.angle = Math.random() * (Math.random() > 0.5 ? -30 : 30)
this.angle = 0
this.modes = [
this.gl.TRIANGLES,
this.gl.LINE_LOOP,
this.gl.LINES,
this.gl.TRIANGLE_FAN,
this.gl.POINTS
]
this.modeCounter = 2
// this.mode = this.modes[2]
this.mode = 6
this.scale = {
x: 0,
y: 0
}
}
setUniforms () {
let { gl } = this
this.u_time = gl.getUniformLocation(this.program, 'u_time')
this.u_translate = gl.getUniformLocation(this.program, 'u_translate')
this.u_scale = gl.getUniformLocation(this.program, 'u_scale')
this.u_offset = gl.getUniformLocation(this.program, 'u_offset')
this.u_color = gl.getUniformLocation(this.program, 'u_color')
this.u_timeOffset = gl.getUniformLocation(this.program, 'u_timeOffset')
this.u_sin = gl.getUniformLocation(this.program, 'u_sin')
this.u_cos = gl.getUniformLocation(this.program, 'u_cos')
}
superBindUniforms (timeElapsed) {
let { gl } = this
gl.uniform1f(this.u_time, timeElapsed)
gl.uniform2f(this.u_translate, this.position.x, this.position.y)
gl.uniform2f(this.u_scale, this.scale.x, this.scale.y)
gl.uniform1f(this.u_offset, this.possibleOffset)
gl.uniform1f(this.u_timeOffset, this.timeOffset)
gl.uniform1f(this.u_sin, Math.sin(this.angle))
gl.uniform1f(this.u_cos, Math.cos(this.angle))
}
}
class Shape extends ShapeBase {
constructor (gl, props) {
super(gl, props)
this.color1 = props.color1
this.color2 = props.color2
this.color3 = Math.random() > 0.5 ? props.color1 : [ 0.1, 0.1, 0.1, 1.0 ]
this.timeOffset = (Math.random() * 2 - 1) * 2
this.possibleOffset = 2 + Math.random() * 8
gl.useProgram(this.program)
this.setUniforms()
this.setBufferAttributes()
}
renderFrame (timeElapsed) {
let { gl } = this
gl.useProgram(this.program)
this.bindUniforms(0, timeElapsed)
this.bindBufferAttributes(0)
gl.drawArrays(this.mode, 0, this.segmentsLen)
this.bindUniforms(1, timeElapsed)
this.bindBufferAttributes(1)
gl.drawArrays(this.mode, 0, this.segmentsLen)
this.bindUniforms(2, timeElapsed)
this.bindBufferAttributes(2)
gl.drawArrays(this.mode, 0, this.segmentsLen)
}
bindUniforms (type, timeElapsed) {
let { gl } = this
this.superBindUniforms(timeElapsed)
if (type === 0) {
gl.uniform4f(this.u_color, ...this.color1)
} else if (type === 1) {
gl.uniform4f(this.u_color, ...this.color2)
} else {
gl.uniform4f(this.u_color, ...this.color3)
}
}
bindBufferAttributes (type) {
let { gl } = this
if (type === 0) {
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 0, 0)
} else if (type === 1) {
gl.bindBuffer(gl.ARRAY_BUFFER, this.innerPositionBuffer)
gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 0, 0)
} else {
gl.bindBuffer(gl.ARRAY_BUFFER, this.innerMostPositionBuffer)
gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 0, 0)
}
}
setBufferAttributes () {
let { gl } = this
this.a_position = gl.getAttribLocation(this.program, 'a_position')
this.a_offset = gl.getAttribLocation(this.program, 'a_offset')
this.positions = new Float32Array(this.segmentsLen * 2)
this.innerPositions = new Float32Array(this.segmentsLen * 2)
this.innerMostPositions = new Float32Array(this.segmentsLen * 2)
this.offsets = new Float32Array(this.segmentsLen * 2)
let innerRadiusOffset = Math.random() * 0.4 + 0.4
let step = (Math.PI * 2) / this.segmentsLen
for (let i = 0; i <= this.segmentsLen; i += 1) {
this.positions[i * 2 + 0] = Math.sin(i * step) * this.radius
this.positions[i * 2 + 1] = Math.cos(i * step) * this.radius
this.innerPositions[i * 2 + 0] = Math.sin(i * step) * (this.radius * innerRadiusOffset)
this.innerPositions[i * 2 + 1] = Math.cos(i * step) * (this.radius * innerRadiusOffset)
this.innerMostPositions[i * 2 + 0] = Math.sin(i * step) * (this.radius * innerRadiusOffset * 0.5)
this.innerMostPositions[i * 2 + 1] = Math.cos(i * step) * (this.radius * innerRadiusOffset * 0.5)
this.offsets[i * 2 + 0] = this.positions[i * 2 + 0] + Math.random() * 0.01
this.offsets[i * 2 + 1] = Math.random() * 0.1
}
this.offsetBuffer = bindSingleBufferAttrib(gl, this.a_offset, this.offsets, 2)
this.positionBuffer = bindSingleBufferAttrib(gl, this.a_position, this.positions, 2)
this.innerPositionBuffer = bindSingleBufferAttrib(gl, this.a_position, this.innerPositions, 2)
this.innerMostPositionBuffer = bindSingleBufferAttrib(gl, this.a_position, this.innerMostPositions, 2)
}
shuffleMode () {
this.mode = this.modes[this.modeCounter]
this.modeCounter += 1
if (this.modeCounter === this.modes.length) this.modeCounter = 0
}
}
class Plane {
constructor (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
this.vertexShaderSource = `
uniform vec2 u_resolution;
attribute vec2 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
void main () {
vec2 clipSpace = vec2(a_position / u_resolution) * 2.0 - 1.0;
gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0);
v_texCoord = a_texCoord;
}
`
this.fragmentShaderSource = `
precision highp float;
uniform sampler2D u_texture;
uniform float u_time;
varying vec2 v_texCoord;
${snoiseStuff}
void main () {
vec2 offset = vec2(snoise(v_texCoord + u_time * 0.25) * 0.08, snoise(-v_texCoord + u_time * 0.25) * 0.08);
vec4 texColor = texture2D(u_texture, v_texCoord + offset);
gl_FragColor = texColor;
}
`
}
init (gl) {
let vertexShader = makeShader(gl, gl.VERTEX_SHADER, this.vertexShaderSource)
let fragmentShader = makeShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderSource)
this.program = makeProgram(gl, vertexShader, fragmentShader)
gl.useProgram(this.program)
this.a_position = gl.getAttribLocation(this.program, 'a_position')
this.a_texCoord = gl.getAttribLocation(this.program, 'a_texCoord')
let x1 = this.x
let y1 = this.y
let x2 = this.width
let y2 = this.height
let positions = new Float32Array([
x1, y1,
x2, y1,
x1, y2,
x1, y2,
x2, y1,
x2, y2
])
let texCoords = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
])
this.positionBuffer = bindSingleBufferAttrib(gl, this.a_position, positions, 2)
this.texCoordsBuffer = bindSingleBufferAttrib(gl, this.a_texCoord, texCoords, 2)
this.u_resolution = gl.getUniformLocation(this.program, 'u_resolution')
this.u_time = gl.getUniformLocation(this.program, 'u_time')
this.textureLocation = gl.getUniformLocation(this.program, 'u_texture')
gl.uniform2f(this.u_resolution, w, h)
return this
}
renderFrame (gl, texture, elapsedTime) {
elapsedTime /= 5
gl.useProgram(this.program)
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.uniform1i(this.textureLocation, 0)
gl.uniform1f(this.u_time, elapsedTime)
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 0, 0)
gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordsBuffer)
gl.vertexAttribPointer(this.a_texCoord, 2, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 6)
}
}
let w = window.innerWidth
let h = window.innerHeight
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
canvas.width = w
canvas.height = h
document.body.appendChild(canvas)
const renderTexture = makeTexture(gl, w, h, null)
const frameBuffer = makeFrameBuffer(gl, renderTexture)
gl.bindTexture(gl.TEXTURE_2D, null)
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
const plane = new Plane(-100, -100, w + 100, h + 100).init(gl)
let shapes = []
const shapeColors = [
[ 0.92, 0.77, 0.65, 1.0 ],
[ 0.1, 0.1, 0.1, 1.0 ],
[ 0.0, 0.22, 0.59, 1.0 ]
]
let colorCount = 0
let prevTime = 0
// setInterval(() => {
// shapes.forEach((shape, i) => {
// let timeout = setTimeout(() => {
// shape.shuffleMode()
// clearTimeout(timeout)
// timeout = null
// }, i * 20)
// })
// }, 3000)
makeShapes()
renderFrame(0)
function makeShapes () {
let gridX = -0.2
let gridY = -0.3
let colorCount = 0
let shapeIndex = 0
for (let y = 1; y >= -1; y += gridY) {
for (let x = 1; x >= -1; x += gridX) {
let shapeRadius = (w / 15) / w
let segmentsLen = 50
let secondColor = colorCount === 1 ? shapeColors[2] : shapeColors[2 - colorCount]
let shape = new Shape(gl, {
position: { x, y },
radius: shapeRadius,
segmentsLen: segmentsLen,
color1: shapeColors[colorCount],
color2: secondColor,
index: shapeIndex,
targetScale: {
x: 2 + Math.random(),
y: 3 + Math.random() * 1.5
}
})
shapes.push(shape)
shape.scale.x = shape.targetScale.x
shape.scale.y = shape.targetScale.y
colorCount += 1
if (colorCount === 3) colorCount = 0
shapeIndex += 1
}
}
shapes = reshuffleGrid(shapes)
}
function reshuffleGrid (a) {
for (let i = a.length; i; i--) {
let j = Math.floor(Math.random() * i);
[a[i - 1], a[j]] = [a[j], a[i - 1]]
}
return a
}
function renderFrame (elapsedTime) {
requestAnimationFrame(renderFrame)
elapsedTime /= 1000
let delta = elapsedTime - prevTime
prevTime = elapsedTime
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
gl.bindTexture(gl.TEXTURE_2D, renderTexture)
gl.viewport(0, 0, w, h)
gl.clearColor(1, 1, 1, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
shapes.forEach(shape => {
gl.useProgram(shape.program)
shape.renderFrame(elapsedTime)
})
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, w, h)
plane.renderFrame(gl, renderTexture, elapsedTime)
}
function makeTexture (gl, texWidth, texHeight, image) {
let texture = gl.createTexture()
let level = 0
let internalFormat = gl.RGBA
let border = 0
let format = gl.RGBA
let type = gl.UNSIGNED_BYTE
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, texWidth, texHeight, border, format, type, image)
return texture
}
function makeFrameBuffer (gl, texture) {
let framebuffer = gl.createFramebuffer()
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
return framebuffer
}
function bindSingleBufferAttrib (gl, attribLocation, data, count) {
let buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW)
gl.vertexAttribPointer(attribLocation, count, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(attribLocation)
return buffer
}
function makeShader (gl, type, source) {
let shader = gl.createShader(type)
gl.shaderSource(shader, source)
gl.compileShader(shader)
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
console.log(gl.getShaderInfoLog(shader))
gl.deleteShader(shader)
}
function makeProgram (gl, vertexShader, fragmentShader) {
let program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
console.log(gl.getProgramInfoLog(program))
gl.deleteProgram(program)
}
!
