Add rotating color cycle and expanded quad to fill screen.

Author: Dylan McGannon

js/gl.js

@@ -27,6 +27,7 @@ export class GL {
  this.zoom_target = new Vector(0, 0, 0, 1);
  this.zoom_speed = 0;
  this.zoom_level = 1;
+ this.color_cycle = 0;
 
  // Add resize listener
  window.addEventListener('resize', () => {
@@ -260,7 +261,7 @@ export class GL {
  render() {
  this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
 
- this.gl.clearColor(58 / 255, 0, 2 / 15, 1);
+ this.gl.clearColor(0, 0, 0, 0);
  this.gl.clear(this.gl.COLOR_BUFFER_BIT);
 
  this.gl.useProgram(this.get_shader_program().ref());
@@ -318,6 +319,22 @@ export class GL {
  return true;
  }
 
+ /**
+ * Cycle the color rotation float.
+ *
+ * @param {integer} frame_delta
+ */
+ cycle(frame_delta) {
+ this.color_cycle = (this.color_cycle + frame_delta / 200) % 1024.0;
+
+ this.get_shader_program().set_uniform_float(
+ 'continuous_cycle',
+ this.color_cycle
+ );
+
+ return true;
+ }
+
  /**
  * The event loop executed for each tick.
  */
@@ -335,6 +352,7 @@ export class GL {
 
  scene_dirty |= this.resize();
  scene_dirty |= this.zoom(frame_delta);
+ scene_dirty |= this.cycle(frame_delta);
 
  if (scene_dirty) {
  this.render();

js/main.js

@@ -17,7 +17,7 @@ async function mandelbrot(canvas) {
 
  gl.set_shader_program(shader_program);
 
- const quad = gl.create_quad(-2, -1, 3, 2);
+ const quad = gl.create_quad(-5, -3, 10, 6);
  const mesh = gl.create_mesh([quad]);
  gl.add_object_to_scene(mesh);
 

js/shader.js

@@ -83,6 +83,18 @@ export class ShaderProgram {
  this.gl.uniformMatrix4fv(location, false, value);
  }
 
+ /**
+ * Set a float uniform value.
+ *
+ * @param {string} name
+ * @param {float} value
+ */
+ set_uniform_float(name, value) {
+ const location = this.gl.getUniformLocation(this.program, name);
+ this.gl.useProgram(this.program);
+ this.gl.uniform1f(location, value);
+ }
+
  /**
  * @return {WebGLProgram}
  */

shaders/fragment.glsl

@@ -4,19 +4,23 @@ precision highp float;
 
 in vec4 vertex;
 out vec4 output_colour;
+uniform float continuous_cycle;
 
 void main() {
  vec2 p = vertex.xy;
  vec2 c = p;
 
- vec3 color=vec3(0.0,0.0,0.0);
+ vec3 color = vec3(0.0, 0.0, 0.0);
 
- for(int i=0;i<512;i++){
- p= vec2(p.x*p.x-p.y*p.y,2.0*p.x*p.y)+c;
+ for(int i=0;i<1024;i++){
+ p = vec2(
+ p.x * p.x - p.y * p.y,
+ 2.0 * p.x * p.y
+ ) + c;
 
- if (dot(p,p)>4.0){
- float colorRegulator = float(i-1)-log(((log(dot(p,p)))/log(2.0)))/log(2.0);
- color = vec3(0.95 + .012*colorRegulator , 1.0, .2+.4*(1.0+sin(.3*colorRegulator)));
+ if (dot(p, p) > 4.0) {
+ float regulator = float(i) - continuous_cycle - log(log(dot(p, p)) / log(2.0)) / log(2.0);
+ color = vec3(0.95 + .012 * regulator, 1.0, .1 + .4 * (1.0 + sin(.3 * regulator)));
  break;
  }
  }