03 March 2018

Adding more objects to orbit on Canvas

In the prevoius post you have learned how to make some object move in circular motion around given point on Canvas. Object in this case is simple circle image with radius = 20 pixels and blue color. It orbits around canvas center point. Since in given example canvas dimensions are 500 x 500 pixels, imaginery orbiting point for this blue circle is x = 250 and y = 250. Orbit distance is 100 pixels.

Now, if you want to add another circle to orbit around same point, but at some different distance you can easily do so. Just above setInterval function definition add next two lines:

``````// second object distance
var radius2 = 150;
``````

This new radius2 variable will orbit new object slightly further from the first blue circle. Below these two lines add code to set second object angle and speed.

``````// second object angle and speed
var alpha2 = 0;
var freq2 = 1/75;
``````

Next copy and paste below // draw object section, but change variable names to match second object variables. like so:

``````// draw second object
alpha2 += freq2;
if(alpha2 >= 2*Math.PI)
alpha2 = 0;
var object2X = center + (radius2 * Math.cos(alpha2));
var object2Y = center + (radius2 * Math.sin(alpha2));
drawCircle(object2X,object2Y,10,"green");
``````

As you can see from the last line, this new satellite will be green with 10 pixels radius. One other note, since we set frequency variable to 1/75, green circle will be slower than blue one. You can change this value to experiment further.

If you repeat this process described above, you can add as many objects as you like with different colors, radius and speed. If you include black background and check Wikipedia or NASA for data on planets like distance from the Sun and color, you can easily simulate Solar system using this code. It will not be too precise since some planets have their own satellites.

Next time you will learn how to include those satellites and make them part of the system.

*_*

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
var radius = 100;
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.

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

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

// add another box
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