3D Fractal from JS1k

3D Fractal from JS1k.carbide.md

3D Fractal from JS1k

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

animate.js

import {program, gl} from './init.js'
import {x,y} from './mouse.js'
import './audio.js'

var x0  = 7.875
var y0  = 0

var usemouse = true

var frame;
function animate(e){
	gl.canvas.width = innerWidth;
	gl.canvas.height = innerHeight;
		
	gl.uniform2f(gl.getUniformLocation(program,"R"), gl.canvas.width, gl.canvas.height)
	gl.uniform1f(gl.getUniformLocation(program,"T"), e/1000)
	if(usemouse){
		gl.uniform2f(gl.getUniformLocation(program,"M"), x, y)
	} else {
		gl.uniform2f(gl.getUniformLocation(program,"M"), x0, y0)
	}
	
	
   	gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
	gl.drawArrays(6,0,3);

	frame = requestAnimationFrame(animate)
}

animate()

export function __unload(){
	cancelAnimationFrame(frame)
}

audio.js

import {x} from './mouse.js'
import a from './audio_init.js'

// var A = 0;

var k = 157
var wolo = 70

var attenuation = 0.9063

a.onaudioprocess = function(e){
	// A+=.01
	var A = Date.now() / 1000
  	var q = e.outputBuffer.getChannelData(0);
  
  	for(var i=8192;i--;){
    	q[i] *= attenuation
    	for(var j=7;--j;){
			q[i] += Math.sin(i*(A*wolo%j) * Math.floor(x/k)*j/326)
				  * Math.sin(i/2606)
				  * Math.sin(A)/j/4;
		}
  	}
}

audio_init.js

var f = new AudioContext();
var a = f.createScriptProcessor(8192,1,1);
a.connect(f.destination);

export default a

init.js

// gl.VERTEX_SHADER = gl.VERTEX_SHADER
// gl.FRAGMENT_SHADER = gl.FRAGMENT_SHADER
// gl.STATIC_DRAW = gl.STATIC_DRAW
// gl.ARRAY_BUFFER = gl.ARRAY_BUFFER
// gl.BYTE = gl.BYTE
// gl.TRIANGLE_FAN = gl.TRIANGLE_FAN

/// Adapted from http://js1k.com/2016-elemental/details/2552



/// Original by Elias Schütt & HellMood

var canvas = document.createElement('canvas')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

export var gl = canvas.getContext('webgl')

document.getElementById('root').appendChild(canvas)

export var program = gl.createProgram()
var vertex_shader = gl.createShader(gl.VERTEX_SHADER)

gl.shaderSource(vertex_shader, `

attribute vec2 P;
void main() {
	gl_Position = vec4(P,0,1);
}

`)


gl.compileShader(vertex_shader);
gl.attachShader(program,vertex_shader)

var fragment_shader=gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragment_shader,`

precision mediump float;
uniform vec2 R,M;
uniform float T;
float t=5e-3;
void main(){
	for( float i=0.; i<64.; i++){
		vec3 p=vec3((2.*gl_FragCoord.xy-R)/R.yy,t-1.),b=vec3(.707,.707,0);
		float a=T;
		p.xz*=mat2(cos(a),-sin(a),sin(a),cos(a));
		for( float i=0.; i<20.; i++){
			a=(M/R*6.).x;
			p.xz*=mat2(cos(a),-sin(a),sin(a),cos(a));
			a=(M/R*6.).y;
			p.xy*=mat2(cos(a),-sin(a),sin(a),cos(a));
			p-=min(0.,dot(p,b))*b*2.;
			b=b.zxx;
			p-=min(0.,dot(p,b))*b*2.;
			b=b.zxz;
			p-=min(0.,dot(p,b))*b*2.;
			b=b.xxy;
			p=p*1.5-.25;
		}
		t+=length(p)/3325.;
		if(length(p)/3325.<5e-3||t>2.){
			b=vec3(1);
			p*=.5;
			gl_FragColor=vec4(p/length(p)*(t<2.?5./i:i/64.),dot(p,b));
			break;
		}
	}
}

`)

gl.compileShader(fragment_shader)
gl.attachShader(program,fragment_shader)
gl.linkProgram(program)
gl.useProgram(program)

var A = 0
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
gl.bufferData(gl.ARRAY_BUFFER, new Int8Array([-3,1,1,-3,1,1]), gl.STATIC_DRAW)

gl.enableVertexAttribArray(0)
gl.vertexAttribPointer(0,2,5120,0,0,0)

gl.uniform2f(gl.getUniformLocation(program,"M"),0,0)

mouse.js

export var x = 0;
export var y = 0;

document.onmousemove=function(e){
	x = e.pageX
	y = e.pageY
};

welcome.js

import {say} from 'cowsay'
say({text: "hello there! \n\nWelcome to the Carbide Alpha\nRelease 3D Fractal Example\nNotebook! (adapted from \nhttp://js1k.com\n  /2016-elemental\n  /details\n  /2552)\n\nRun animate.js, open\nthe external window\nand move your mouse around!\n\nSend bugs to\nbugs@trycarbide.com!\n\nSend hellos to\nhello@trycarbide.com!" || ' '})