Category Archives: javascript

WebGL – sound visualizer with Three.js .

First you need to create one html5 default webpage.
Also you need to add the three.js library to your file.
Add your MP3 file to your folder project.
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:
sounds
see the source code:
<!doctype html>
<html>
<head>
<script src=”js/three.min.js”></script>
</head>
<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 );
scene.add( line );
}

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();
}

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

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

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

function onError() {
console.log(‘error’)
}
}
Load(‘your_sound_file.mp3’);
</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;

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

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

This is the script:

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

window.onload = init;

function init() {
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;

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);

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);
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>
<script id=”2d-vertex-shader” type=”x-shader/x-vertex”>
attribute vec2 local_position;
void main() {
gl_Position = vec4(local_position, 0, 1);
}
</script>
<script id=”2d-fragment-shader” type=”x-shader/x-fragment”>
void main() {
gl_FragColor = vec4(gl_FragCoord.x / 640.0, gl_FragCoord.y / 480.0, 0, 1);
}
</script>
<canvas id=”glscreen”></canvas>
</body>
</html>
The result is this:

shader001

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

JavaScript – clickable area example.

This example use a simple way to see the mouse position.
The area where you make click with the mouse.
You have two variables: mouseXPos, mouseYPos.
The function(e) take the mouse position and show the result.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src=”../js/jquery-2.2.0.js”></script>
<style type=”text/css”>
html, body { text-align: center; }
div {
background: grey;
cursor: pointer;
display: inline-block;
font-size: 3em;
margin: 2em auto;
padding: 2em;
}
p {
background: grey;
padding: 1em;
}</style>
<script type=”text/javascript”>
window.mouseXPos = 0;
window.mouseYPos = 0;

$(function() {
$(document).on(‘click’, ‘#clickable_area’, function(e) {
mouseXPos = e.pageX;
mouseYPos = e.pageY;

$(‘p’).text(mouseXPos + ‘:’ + mouseYPos);
});
})
</script>
</head>
<body>
<p>Results</p>
<div id= “clickable_area”>a click area</div>
</body>
</html>

Posted in All, javascript, Programming. Tagged with , , , .

Make clock with animated SVG file.

This tutorial will be very simple and come with two files.
One of this file was a html file and also one SVG animated file.
First file just put the SVG file into html file, see:

<html>
<head>
<title>Clock with SVG – free-tutorials.org</title>
</head>
<body>
<embed src=”clock.svg” width=”150″ height=”150″ />
</body>
</html>

The next file was a file with svg tags, like type of svg file , tags to make the circles and ticks also one script to take the time and show the clock time.
Take a look and you will understand how is working.

<?xml version=”1.0″ encoding=”UTF-8″?>
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
width=”100%” height=”100%”
viewBox=”0 0 150 150″ version=”1.1″>

<!–  (c) free-tutorials.org –>

<g id=”clock” style=”fill: rgb(10%,10%,10%)” transform=”translate(75,75) rotate(-90)”>
<g id=”fata_ceas”>
<circle style=”fill: rgb(15%,15%,15%)” cx=”0″ cy=”0″ r=”70″    />
<circle style=”fill: rgb(30%,70%,90%)” cx=”0″ cy=”0″ r=”65″/>
<circle style=”fill: rgb(70%,70%,70%)” cx=”0″ cy=”0″ r=”60″/>
</g>

<g id=”minutare”>
<rect transform=”rotate( 0)” x=”42.5″ y=”-2″ width=”17.5″ height=”4″/>
<rect transform=”rotate( 6)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(12)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(18)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(24)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(30)” x=”45″   y=”-2″ width=”15″   height=”4″/>
<rect transform=”rotate(36)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(42)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(48)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(54)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(60)” x=”45″   y=”-2″ width=”15″   height=”4″/>
<rect transform=”rotate(66)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(72)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(78)” x=”55″   y=”-1″ width=”5″    height=”2″/>
<rect transform=”rotate(84)” x=”55″   y=”-1″ width=”5″    height=”2″/>
</g>

<use xlink:href=”#minutare” transform=”rotate(90)”/>
<use xlink:href=”#minutare” transform=”rotate(180)”/>
<use xlink:href=”#minutare” transform=”rotate(270)”/>

<path id=”hours”   d=”M -15 3.5 37.5 3.5 41 0 37.5 -3.5 -15 -3.5 Z” />
<path id=”minutes” d=”M -15 2   55   2   57 0 55   -2   -15 -2   Z” />
</g>
<script>
var minutehand = document.getElementById (“minutes”);
var hourhand   = document.getElementById (“hours”);

function updateTime () {
var date = new Date ();
var m = date.getMinutes() * 6 + date.getSeconds() / 10;
var h = date.getHours() * 30 + m / 12;

minutehand.setAttribute (“transform”, “rotate(” + m + “)”);
hourhand.setAttribute   (“transform”, “rotate(” + h + “)”);
window.setTimeout (“updateTime()”, 1000);
}

updateTime ();
</script>
</svg>

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

Random circles with jQuery.

If you don’t understand all of my tutorials then you need to take a look of this tutorial.
You need a default html5 template. Into this html5 will add the css – Cascading Style Sheets, link to jQuery, and our javascript.
You need to include into project the jQuery. Download the jQuery from internet and put into same folder with your html5 file.

You need to put css for each html tag and will do that with:

Into body tag will put the window canvas and the javascript to draw into canvas.
First after body tag will come with:

The next step is to draw into canvas with javascript by using canvas into 2D – dimensions:

The basic issue is to fill the webpage with circles. All circles will be make random with this parameters: color, x, y, radius, orbit and speed.

All circles will be make like one array:

You need also to make all vars and this functions: r256, reset, resize, render.
When you used render function then you need to put also this function: requestAnimationFrame(render);
The r256 is one function for random up to 256. Is used most for colors ( red – green – blue ) range.
The reset function will make 160 circles.
The resize will resize the canvas with circles.
The render function will clean, fill and move all circles and then will make another frame for us with requestAnimationFrame function.
All variables and math functions is used for draw and show the canvas, circles, move and color stuff.
I don’t want to explain this steps because is very simple and also the goal is to understand the basic structure of the script.
Let’s see the full source code.

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