# Category Archives: HTML 5

## 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 , , , , , , , .

This is the most simple example with HTML5. The result is one radial effect background blue.
I add some text with style color white over this background.
First create one file and named my_test.html. Then you can add this source code:
<!DOCTYPE html>
<html>
<meta charset=”UTF-8″>
<title>Title of the document</title>
<style type=”text/css”>
*{
margin:0;
}

html,body{
width:100%;
height:100%;
}
body{
overflow:hidden;
}</style>
<body>
<p style=’color:white’>free-tutorials.org – some text over background!</p>
</body>
</html>

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

## Simple button shadow with css and webkit filter.

If you like it this simple shadow text with css with webkit filter then today I will show you how to make one simple shadow button.
Is a basic html5 with css style and show with class button.
<!DOCTYPE html>
<html>
<style>
.button{
color: #555;
text-decoration:none;text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #888;

linear,
left bottom,
left top,
color-stop(0, rgb(194,194,195)),
color-stop(0.8, rgb(200,200,200)),
color-stop(1, rgb(250,250,250))
);

center bottom,
rgb(194,194,195) 0%,
rgb(200,200,200) 80%,
rgb(250,250,250) 100%
);
}
.button:hover{
}
</style>
<meta charset=”UTF-8″>

<body>
</body>

</html>

Posted in All, HTML 5, 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 , , , , , , .