Mandelbrot with three.js . – free-tutorials.org news free tutorials source code development scripts

The Mandelbrot set is the set of complex numbers c for which the function f c ( z ) = z 2 + c {\displaystyle f_{c}(z)=z^{2}+c} {\displaystyle f_{c}(z)=z^{2}+c} does not diverge when iterated from z = 0 {\displaystyle z=0} z=0, i.e., for which the sequence f c ( 0 ) {\displaystyle f_{c}(0)} {\displaystyle f_{c}(0)}, f c ( f c ( 0 ) ) {\displaystyle f_{c}(f_{c}(0))} {\displaystyle f_{c}(f_{c}(0))}, etc., remains bounded in absolute value. – wikipedia.org

You need to download the three.js – java script from threejs webpage.
The source code is simple. Come with default HTML5 page and javascript.
One part of this will make vertex-shader and fragment shader, both is 2D shader type.
You need the canvas tag with id=”canv”.
The last part of the source code is made to put all into one image processing by shaders.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="three.js"></script>
</head>
<body>

<canvas id="canv" width="640" height="480"></canvas>

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
</script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  #define PI 3.14159

float hash( float n ) { return fract(sin(n)*753.5453123); }

#define NUM_STEPS   50
  #define ZOOM_FACTOR 2.0
  #define X_OFFSET    0.5

  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  precision mediump int;

  void main() {
    vec2 z;
    float x,y;
    int steps;
    float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
                        (640.0 / 480.0) - X_OFFSET;
    float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;

    z.x = normalizedX;
    z.y = normalizedY;

    for (int i=0;i<NUM_STEPS;i++) {

    steps = i;

        x = (z.x * z.x - z.y * z.y) + normalizedX;
        y = (z.y * z.x + z.x * z.y) + normalizedY;

        if((x * x + y * y) > 4.0) {
          break;
        }

        z.x = x;
        z.y = y;

    }

    if (steps == NUM_STEPS-1) {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    } else {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  }
</script>
<script type="text/javascript">
var gl;
var canvas;
var buffer;
  window.onload = init;
 
  function init() {
 

    canvas        = document.getElementById('canv');
    gl            = canvas.getContext('experimental-webgl');
    canvas.width  = 640;
    canvas.height = 480;
 
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;

 buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  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
  );

    render();
 
  }
 
function render() {
 
    window.requestAnimationFrame(render, canvas);
 
    gl.clearColor(1.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

  shaderScript = document.getElementById("2d-vertex-shader");
  shaderSource = shaderScript.text;
  vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, shaderSource);
  gl.compileShader(vertexShader);

  shaderScript   = document.getElementById("2d-fragment-shader");
  shaderSource   = shaderScript.text;
  fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, shaderSource);
  gl.compileShader(fragmentShader);

  program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);  
  gl.useProgram(program);
  positionLocation = gl.getAttribLocation(program, "a_position");
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

  gl.drawArrays(gl.TRIANGLES, 0, 6);
  }
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

attribute vec2 a_position;

void main() {

gl_Position = vec4(a_position, 0, 1);

}

</script>

#ifdef GL_FRAGMENT_PRECISION_HIGH

precision highp float;

#else

precision mediump float;

#endif

#define PI 3.14159

float hash( float n ) { return fract(sin(n)*753.5453123); }

#define NUM_STEPS 50

#define ZOOM_FACTOR 2.0

#define X_OFFSET 0.5

#ifdef GL_FRAGMENT_PRECISION_HIGH

precision highp float;

#else

precision mediump float;

#endif

precision mediump int;

void main() {

vec2 z;

float x,y;

int steps;

float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *

(640.0 / 480.0) - X_OFFSET;

float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;

z.x = normalizedX;

z.y = normalizedY;

for (int i=0;i<NUM_STEPS;i++) {

steps = i;

x = (z.x * z.x - z.y * z.y) + normalizedX;

y = (z.y * z.x + z.x * z.y) + normalizedY;

if((x * x + y * y) > 4.0) {

break;

}

z.x = x;

z.y = y;

}

if (steps == NUM_STEPS-1) {

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

} else {

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);

}

</script>

var gl;

var canvas;

var buffer;

window.onload = init;

function init() {

canvas = document.getElementById('canv');

gl = canvas.getContext('experimental-webgl');

canvas.width = 640;

canvas.height = 480;

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

var shaderScript;

var shaderSource;

var vertexShader;

var fragmentShader;

buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

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]),

gl.STATIC_DRAW

);

render();

}

function render() {

window.requestAnimationFrame(render, canvas);

gl.clearColor(1.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

shaderScript = document.getElementById("2d-vertex-shader");

shaderSource = shaderScript.text;

vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, shaderSource);

gl.compileShader(vertexShader);

shaderScript = document.getElementById("2d-fragment-shader");

shaderSource = shaderScript.text;

fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, shaderSource);

gl.compileShader(fragmentShader);

program = gl.createProgram();

gl.attachShader(program, vertexShader);

gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

gl.useProgram(program);

positionLocation = gl.getAttribLocation(program, "a_position");

gl.enableVertexAttribArray(positionLocation);

gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 6);

}

</script>

</body>

</html>

Leave a Reply Cancel reply