Created
April 26, 2016 10:20
-
-
Save ikr7/c851463c48b2dd28bb71ef439a5abac8 to your computer and use it in GitHub Desktop.
アニメ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>WebGL でマンデルブロくん</title> | |
<style> | |
body { | |
margin:0; | |
overflow:hidden | |
} | |
</style> | |
</head> | |
<body> | |
<canvas></canvas> | |
<script id="fs" type="x-shader/x-fragment"> | |
precision highp float; | |
uniform vec2 res; | |
uniform vec2 view_pos; | |
uniform vec2 view_size; | |
uniform float m; | |
const int MAX = 512; | |
vec2 z; | |
vec2 z1; | |
int mand (vec2 p) { | |
z = vec2(0, 0); | |
z1 = vec2(0, 0); | |
for (int n = 0; n < MAX; n++) { | |
z1.x = pow(z.x, m) - pow(z.y, m); | |
z1.y = z.x * z.y * m; | |
z1 -= p; | |
if (length(z1.xy) > m) { | |
return n; | |
} | |
z = z1; | |
} | |
return 0; | |
} | |
vec3 hsv(float h, float s, float v){ | |
vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); | |
vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w)); | |
return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s); | |
} | |
void main(void) { | |
vec2 pos = gl_FragCoord.xy * (view_size.xy / res.xy) + view_pos.xy - view_size.xy / 2.0; | |
int n = mand(pos); | |
if (n == 0) { | |
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); | |
} else { | |
gl_FragColor = vec4( | |
hsv( | |
atan(z.x, z.y), | |
1.0, | |
1.0 | |
), | |
1.0 | |
); | |
} | |
} | |
</script> | |
<script> | |
var canvas = document.querySelector('canvas'); | |
var W = Math.max( | |
document.body.clientWidth, | |
document.body.scrollWidth, | |
document.documentElement.scrollWidth, | |
document.documentElement.clientWidth | |
); | |
var H = Math.max( | |
document.body.clientHeight, | |
document.body.scrollHeight, | |
document.documentElement.scrollHeight, | |
document.documentElement.clientHeight | |
); | |
canvas.width = W; | |
canvas.height = H; | |
var gl = canvas.getContext('experimental-webgl', { preserveDrawingBuffer: true }); | |
var vShaderSource = 'attribute vec2 a_position;void main(){gl_Position = vec4(a_position, 1.0, 1.0);}'; | |
var vertexShader = gl.createShader(gl.VERTEX_SHADER); | |
gl.shaderSource(vertexShader, vShaderSource); | |
gl.compileShader(vertexShader); | |
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); | |
gl.shaderSource(fragmentShader, document.getElementById('fs').textContent); | |
gl.compileShader(fragmentShader); | |
var program = gl.createProgram(); | |
gl.attachShader(program, vertexShader); | |
gl.attachShader(program, fragmentShader); | |
gl.linkProgram(program); | |
gl.useProgram(program); | |
var vertexBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0]), gl.STATIC_DRAW); | |
var a_position = gl.getAttribLocation(program, 'a_position'); | |
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0); | |
gl.enableVertexAttribArray(a_position); | |
var res = gl.getUniformLocation(program, 'res'); | |
var view_pos = gl.getUniformLocation(program, 'view_pos'); | |
var view_size = gl.getUniformLocation(program, 'view_size'); | |
var m = gl.getUniformLocation(program, 'm'); | |
var z = 5; | |
var view_w; | |
var view_h; | |
var view_x = 0; | |
var view_y = 0; | |
var update = function (c) { | |
console.clear(); | |
console.log(c); | |
view_w = z; | |
view_h = z * (H / W); | |
view_x = view_x + (W / 2) * (view_w / W) - view_w / 2; | |
view_y = view_y + (H / 2) * (view_h / H) - view_h / 2; | |
gl.uniform2fv(res, new Float32Array([ | |
W, | |
H | |
])); | |
gl.uniform2fv(view_pos, new Float32Array([ | |
view_x, | |
view_y | |
])); | |
gl.uniform2fv(view_size, new Float32Array([ | |
view_w, | |
view_h | |
])); | |
gl.uniform1f(m, c); | |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
gl.drawArrays(gl.TRIANGLES, 0, 6); | |
if (c < 3000) { | |
requestAnimationFrame(function () { | |
update(c * 1.01); | |
}); | |
} | |
}; | |
update(0.1); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment