# Category Archives: javascript

## Mandelbrot with three.js .

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 javascripts.
You need the canvas tag with id=”canv”.
The last part of source code is make to put all into one image processing by shaders.

Posted in All, HTML 5, javascript, Programming, WebGL, Windows 10. Tagged with , , , , , , , , .

## WebRTC – First steps – part 001.

The official website tells us:
WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
First I will come with one simple example into this tutorial.
Will make one webcam into webpage.
Make one index.html file and add this source code:

Posted in All, HTML 5, javascript, Programming, web. Tagged with , , , , , , , .

## Shader x-ray effect with Three.js .

This source code running with Three.js javascript library.

I load one 3d object and using vertex and fragment shaders I rendered it.

The object is a castle and is named: cube2.dae.

Then all steps come to show this object using shaders.

<!DOCTYPE html>
<html>

<script src=”three.min.js”></script>

uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
intensity = pow(1.0 – abs(dot(vNormal, vec3(0, 0, 1))), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
<body>
<script>
var human;

var \$ = document.querySelector.bind(document);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 30);
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

renderer.setClearColor(0x000000, 1.0);

lookAt = scene.position;
lookAt.y = 10;
camera.lookAt(lookAt);

document.body.appendChild(renderer.domElement);

uniforms: {
p: { type: “f”, value: 3 },
glowColor: { type: “c”, value: new THREE.Color(0x84ccff) },
},
side: THREE.DoubleSide,
transparent: true,
depthWrite: false
});

dae.traverse( function ( child ) {

if (child instanceof THREE.Mesh) {
child.material = customMaterial;
}

} );

dae.position.y = 0;
dae.scale.x = 1;
dae.scale.y = 1;
dae.scale.z = 1;
human = dae;
});

function resize() {
var canvas = renderer.domElement;
var width  = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}

function render(time) {
time *= 0.001;

resize();

camera.position.x = -20 * (Math.cos(time));
camera.position.z = (20 * (Math.sin(time)));
camera.position.y = 20;

camera.lookAt(lookAt);

renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);

});
</script>
</body>

</html>

The result is this:

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .

## WebGL – sound visualizer with Three.js .

First you need to create one html5 default webpage.
I named my mp3 file with your_sound_file.mp3.
Because you used three.js javascript file you need to have this functions:init, animate, onError.
To used the audio file you need to have this functions: Play and Load.
The visualizer is make with NewLine function.
This function make one material with one line with green color: 0x00ff00.
If you take a look to the source code will see is simple.
… and result is this:

see the source code:
<!doctype html>
<html>
<script src=”js/three.min.js”></script>
<body>
<script>

var scene, camera, renderer, line;
var geometry, material, mesh, array;

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

}

function NewLine() {

scene.remove(line);

var material = new THREE.LineBasicMaterial({
color: 0x00ff00
});

var geometry = new THREE.Geometry();

array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array)

var Ypoints = array;
var xPoint = -2048;
for(var i=0;i<Ypoints.length;i++) {
geometry.vertices.push( new THREE.Vector3( xPoint, Ypoints[i], 0 ) );
xPoint = xPoint + 4;
}

line = new THREE.Line( geometry, material );
}

function animate() {

requestAnimationFrame( animate );
NewLine();
renderer.render( scene, camera );

}

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

function Play(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);

analyser = context.createAnalyser();
source.connect(analyser);
analyser.connect(context.destination);

source.start(0);

init();
animate();
}

var request = new XMLHttpRequest();
request.open(‘GET’, url, true);
request.responseType = ‘arraybuffer’;

context.decodeAudioData(request.response, function(buffer) {
Play(buffer)

}, onError);
}
request.send();

function onError() {
console.log(‘error’)
}
}
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .

## WebGL – simple shader example.

This is a simple webgl shader example.
I used a simple HTML5 example with one canvas.
The canvas has named glscreen. The next step is to put one java script with one var named buffer.
The buffer var is used for one array. The Float32Array typed array represents an array of 32-bit floating point numbers.
This var come with this source code into init function.

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
);
We can see also we have two functions: init and render and this:

var gl;
var canvas;
var buffer;

I put also two default shaders for vertex and fragment.
I use some vars for this into init function:

This is the script:

<!DOCTYPE html>
<title>WebGL – Hello World!</title>
<body>
<script type=”text/javascript”>
var gl;
var canvas;
var buffer;

function init() {

canvas        = document.getElementById(‘glscreen’);
gl            = canvas.getContext(‘experimental-webgl’);
canvas.width  = 640;
canvas.height = 480;

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
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);

program = gl.createProgram();
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

positionLocation = gl.getAttribLocation(program, “local_position”);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
attribute vec2 local_position;
void main() {
gl_Position = vec4(local_position, 0, 1);
}
</script>