Category Archives: javascript

Firebug tool – part 001.

This tool help you to see and change online your webpage.
You can download it from firebug tool.
The official site tells us about the most popular and powerful web development tool:

  • Inspect HTML and modify style and layout in real-time
  • Use the most advanced JavaScript debugger available for any browser
  • Accurately analyze network usage and performance
  • Extend Firebug and add features to make Firebug even more powerful
  • Get the information you need to get it done with Firebug.

Today I will show you one simple example about how to use this tool.
The issue is: get the information you need to get it done with Firebug.
First you need to add this extension to your firefox browser.
Open google.com website to test it.
Then press the F12 key to open the firebug window and press Enable button.
Select the Console tab. The window is change with two areas.
One to see the result of output command and one with editbox to write your commands.
Let’s start with some commands:

This command will get infos from browser and websites.

Posted in All, Commands, javascript, web. Tagged with , , , , , , , , , .

WebSocket – First steps – part 001.

I do not think that is so sought after. Most people prefer products WebRTC.
Also on good reason of using WebRTC instead of Websocket is latency of streaming.
Is the protocol for two-way communication with a remote host.
The WebSocket interface and defines a full-duplex communication channel and operates through a single socket over the Web. The WebSocket detects the presence of a proxy server.
The next step is to automatically sets up a tunnel to pass through the proxy.
The tunnel is established by issuing an HTTP CONNECT statement to the proxy server.
Let’s see one simple example:

It is one simple open, close and sending message with websocket and javascript show events.
The most important part is to define the websocket:

The next steps is to use it with default javascript event system and window show message.

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

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.
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 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:
Continue reading

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 used just three.min.js, OBJLoader.js and ColladaLoader.js to make the x-ray effect.

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

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

This object is loaded with load function from OBJLoader.js.

Then all steps come to show this object using shaders.

<!DOCTYPE html>
<html>

<head>
<title>shaders x-ray effect</title>
<script src=”three.min.js”></script>
<script src=”OBJLoader.js”></script>
<script src=”ColladaLoader.js”></script>

<script id=”vertexShader” type=”x-shader/x-vertex”>
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>

<script id=”fragmentShader” type=”x-shader/x-vertex”>
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>
</head>
<body>
<script>
window.addEventListener(‘load’, function () {
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);

var customMaterial = new THREE.ShaderMaterial({
uniforms: {
p: { type: “f”, value: 3 },
glowColor: { type: “c”, value: new THREE.Color(0x84ccff) },
},
vertexShader: $(‘#vertexShader’).text,
fragmentShader: $(‘#fragmentShader’).text,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
});

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(‘cube2.dae’, function (collada) {
dae = collada.scene;

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;
scene.add(human);
});

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:
x-ray_effect

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