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">  
 <head>  
  <title>Three.js test</title>  
  <meta charset = "UTF-8" />  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>  
 </head>  
 <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 );  
     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 );  
     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;
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.
   


 

30 September 2017

Top 3 Halloween video effects editable projects for 2017


Winter is ... here - but Halloween is coming. If you wondered how to scare someone in this 2017. here are my top 3 suggestions, Top 3 Halloween video effects editable projects for 2017.

Number 3 :: The Grindhouse Collection


https://videohive.net/item/the-ultimate-grindhouse-collection-v1/1335948/?ref=flanture

#Halloween #grunge #grit #dirty

Number 2 :: Dark Matters: HauntedWorx



 
#Halloween #HauntedHouse #Horror

Number 1 :: Halloween Production Pack


https://videohive.net/item/halloween-production-pack/671061/?ref=flanture

 #Halloween #Video

*_*

10 November 2016

JavaScript Spiderweb Generator now on GitHub

Previously released open source JavaScript application > Spiderweb Generator 

is now also hosted on GitHub

There are currently few items on to do list >

TODO:

v 1.1 - image save option [Save SpiderWeb] button, up to six memory slots
v 1.2 - color choosers for web and background
v 1.3 - skew web option
v 1.4 - effects option, custom backrounds, spiders, web holes
v 1.5 - ...

Since it is HTML5 Canvas, there is already option to save image by right click, save as png.
V1.1 will have memory slots inside app so user can temporary preview different spiderwebs.





*_*

20 February 2015

Phaser example: simple RoadMap function

RoadMap function is basically object chain tween movement where different tween points are user defined. This has been previously done in ActionScript on this blog, see here, example here and more code here. This function has been written in 2009 and now Phaser comes along ...

How it works. Click few times on the screen to create some object diamonds. When done with it press spacebar on keyboard to create and start object star animation. Object star will follow road of diamonds in order user created them - that is why it is called RoadMap function.



You can change the object's speed which is actually time between two diamond points.

Here is the JavaScript Phaser code:

Game.js


window.onload = function() {

    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update});

    function preload () {

        game.load.image('diamond', 'diamond.png');
        game.load.image('star', 'star.png');

    }

    function create () {

        // starting game physics    
        game.physics.startSystem(Phaser.Physics.ARCADE);    
    
        // enabling spacebar keyboard button
        fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);
    }
    
    // Container Array for all diamonds / path points
    var pointsContainer = new Array();
    
    // If new star / bullet can fire or not
    var canFireBullet = true;

    function update () {
    
        handleClick();
        
        if (fireButton.isDown)
        {
            fireBullet();
        }
    
    }
    
    // Every mouse click sets new object diamond on stage
    function handleClick() {
    
        game.input.mouse.onMouseUp = function (evt) {
        
            var myPointX = game.input.activePointer.x-16;
            var myPointY = game.input.activePointer.y-14;
            
            var d = game.add.sprite(myPointX, myPointY, 'diamond');
            
            // we must remember diamonds positions
            pointsContainer.push([myPointX, myPointY]);

        };            
    }
    
    function fireBullet() {
        
            // if there are points to follow 
            if (pointsContainer.length > 1 && canFireBullet) {
            
                var starCounter = 1;
                
                // set object star speed
                var speed = 500;
                
                // disable new object star creation until last tween is complete
                canFireBullet = false;
            
                // create star on location of first object
                var s = game.add.sprite(pointsContainer[0][0], pointsContainer[0][1], 'star');
                
                // create tweens chain         
                var tween = game.add.tween(s);
                while (starCounter < pointsContainer.length) {
                    tween.to({ x: pointsContainer[starCounter][0], y: pointsContainer[starCounter][1] }, speed);
                    starCounter ++;
                }
                
                // enable new object star creation
                tween._lastChild.onComplete.add(canFire, this);
                tween.start();    
            };
    };
    
    function canFire() {
    
        canFireBullet = true;
    }

};


You will also need some graphics diamond.png and star.png to see this works. Ask questions if you have any. I remember there was another function where star speed was same despite of distances between diamonds.

Now, we can play with it a little bit more. It can be useful to group diamonds together and change alpha to entire group. At start we define new variable:

var diamondsGroup;

We have two new lines inside create function:

diamondsGroup = this.add.group();
diamondsGroup.enableBody = true;

Inside handleClick function instead of adding sprite line we have:

var d = diamondsGroup.create(myPointX, myPointY, 'diamond');

After if line in fireBullet function we set new alpha value, which can be anything, for example, lets subtract half of alpha for every new bullet:

diamondsGroup.alpha -= 0.5;

which makes our diamonds disappear very fast.

*_*

 

template by blogger templates