## 28 February 2018

### Simple orbital movement on Canvas

In this tutorial you can learn how to create simple orbital movement using HTML Canvas and JavaScript.

This is very basic step-by-step guide, so everyone can understand it without any previous experience with programming.

Create new folder anywhere on your computer where you will place your files. You can create this folder on Desktop also. Rename it as "Orbit example". Inside "Orbit example" folder create new text file and rename it as "index.html".

Open this file with your favorite text editing program and paste code which follows.

``````
<html>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script src="orbit.js"></script>
</html>
``````

This is main HTML file and as you can see after closing body tag we linked to orbit.js JavaScript file. This file is next for you to create and place inside same "Orbit example" folder.

Here is the code:

`````` // canvas size is 500x500
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Object orbit settings
// alpha is starting angle
var alpha = 0;
// center of rotation position
var center = 250;
// rotation speed
var freq = 1/200;
// distance from rotation center
setInterval(function(){
ctx.clearRect(0,0,500,500); // clear canvas
//Draw orbit path
ctx.beginPath();
ctx.arc(center,center,100,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
// draw object
alpha += freq;
if(alpha >= 2*Math.PI)
alpha = 0;
var objectX = center + (radius * Math.cos(alpha));
var objectY = center + (radius * Math.sin(alpha));
drawCircle(objectX,objectY,20,"blue");
}, 10);
// drawing function
ctx.beginPath();
ctx.fillStyle = color;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
``````

First we set some object orbit settings like alpha angle, center, frequency and radius.

Function setInterval will redraw Canvas every 10 milliseconds. It will draw orbit path every time and after calculation new object position it will draw it on Canvas, which will make animation.

Function drawCircle is outside of setInterval so we can reuse it later.

This is result image.

You can, for example double orbiting speed with var freq = 1/100; Experiment with other settings.

Next time I will show you how to attach a satellite to this orbiting object.

o_O

## 10 February 2018

### Making charts with Three.js

If you are someone who makes presentations and data visualizations on daily basis, you will be pleasantly surprised to see your static charts come alive using Three.js JavaScript library.

Actually, you don't even need to do any coding, because, like most things today, someone has already done that for you. So, visit threegraphs website and start making your awesome charts right now.

How it works? Choose one of the options for your new chart.

Let me show you how to get Bar Chart, others are similar. Click on Edit button (you have only two buttons available export and edit) and enter some data, like I did on image bellow. Choose chart Title, something like Sales or similar. Choose background color and text colors. Use green plus buttons to add new columns and rows. Enter values. Finally click on Generate Chart.

That's it, your chart is ready. Now, you can export it as image or embed it within your website using iFrame. Here is my example, use mouse to move around.

## 08 February 2018

### Introduction to Three.js JavaScript library

If you want to create animated 3D graphics and display them in browser, you need to know WebGL, which stands for Web Graphics Library. It is JavaScript API for rendering graphics and it is built over web page canvas. However, using WebGL API may not be for everyone, but with help of available frameworks and libraries built on top of it, coding 3D animations is much easier.

One of those libraries is three.js, which allows creation of GPU-accelerated 3D animations. There is no plugins browser involved, just pure JavaScript programming language. You can do a lot with it like scenes, effects, cameras, animations, data loaders and much more. There is support for JSON export/import if you wish to connect with other software like Blender or 3D Studio Max.

`````` <!DOCTYPE HTML>
<html lang = "en">
<title>Three.js test</title>
<meta charset = "UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<body>
</body>
<script>
// set variables to use
var camera, scene, renderer, geometry, material, mesh;
// call functions
init();
animate();
// define init function
function init() {
// create new Scene
scene = new THREE.Scene();
// create new perspective camera with starting parameters (see docs)
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
// create new box and set material color and wireframe option
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
// add box and material to mesh and place mesh to scene
mesh = new THREE.Mesh( geometry, material );
// define new renderer and set size
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// append renderer to html file
document.body.appendChild( renderer.domElement );
}
// set animation by increasing x and y rotation by small amount for every render call
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
</html>  ``````

When you run this simple file you will see wireframed box rotating in your browser. Something like this image below. Nice.

Now, let's change some parameters. Set camera.position.z = 500 to get closer to the box.
Set mesh.rotation.x += 0.1 to get the box rotate 10 times faster.
Set MeshBasicMaterial color to blue, 0x0000ff.
Simple changes but fast results.

To add another box to the Scene, insert next lines after scene.add(mesh);

mesh2 = new THREE.Mesh( geometry, material );
mesh2.position.x = -350;

If we want our second box to rotate, insert next line inside render function:

mesh2.rotation.x += 0.01;

Now we have two rotating boxes. Let's change color to green, blue is too dark.

Using same logic we add as many objects as we want to the Scene. Off course, using loops is preferred.

template by blogger templates