28 February 2018

Simple orbital movement on Canvas

download  Tutorial PDF  

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. 

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

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  
 var radius = 100;  
   ctx.clearRect(0,0,500,500); // clear canvas  
   //Draw orbit path  
   // 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));  
 }, 10);  
 // drawing function  
 function drawCircle(objectX,objectY,radius,color) {  
   ctx.fillStyle = color;  

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.


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.

Basic example is available on Wikipedia, I have added only comments.

 <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>  
   // set variables to use  
   var camera, scene, renderer, geometry, material, mesh;  
   // call functions   
   // 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 );  
     scene.add( mesh );  
     // 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 );  
   function render() {  
     mesh.rotation.x += 0.01;  
     mesh.rotation.y += 0.02;  
     renderer.render( scene, camera );  

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

// add another box
mesh2 = new THREE.Mesh( geometry, material );
mesh2.position.x = -350;
scene.add( mesh2 );

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