Sunday, August 20, 2017

BabylonJS Solar System or at least a sun with some planets


Recently I've started to experiment a bit with BabylonJS. Its nice WebGL framework for web. As an exercise I made this small example - moving and rotating solar system.

You can check the working example here - WebGL Solar System



Here is the full source code of the example: solar.js
var canvas;
var engine;
var scene;

var sun;
var planet1;
var planet2;
var planet2Moon;

function start() {
    canvas = document.getElementById("renderCanvas");
        
    engine = new BABYLON.Engine(canvas, true);    
    
    scene = createScene();
    
    engine.runRenderLoop(function () {
        scene.render();
    });
    
    var c = 0;
    var i = 0;
    scene.beforeRender = function () {
  planet1.position = new BABYLON.Vector3(20 * Math.sin(c), 0, 20 * Math.cos(c));
                
                planet2.position = new BABYLON.Vector3(30 * Math.sin(i), 3 * Math.cos(i), 30 * Math.cos(i));
  moon.position = new BABYLON.Vector3(5 * Math.sin(c), moon.parent.position.y, 5 * Math.cos(c));
    
  c += 0.005;
                i += 0.008;     
    };
    
    window.addEventListener("resize", function () {
        engine.resize();
    });
}

var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0, 0.1, 0.1);

   var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 50, new BABYLON.Vector3(0, 0, 0), scene);
   camera.attachControl(canvas, false);
    
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);    
    light.intensity = 0.5;
    light.diffuse = new BABYLON.Color3(1, 1, 1);
    
    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
    light0.diffuse = new BABYLON.Color3(1, 0.5, 0);
    light0.specular = new BABYLON.Color3(1, 1, 1);
        
    sun = BABYLON.Mesh.CreateSphere("sun", 20.0, 20.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);
    
    var sunmaterial = new BABYLON.StandardMaterial('sunmaterial', scene);    
    sunmaterial.diffuseColor = new BABYLON.Color3(1.00, 1.00, 1.00);
    sunmaterial.emissiveColor = new BABYLON.Color3(1.00, 0.72, 0.00);
    sunmaterial.ambientColor = new BABYLON.Color3(0.94, 0.85, 0.36);
    sunmaterial.specularColor = new BABYLON.Color3(1.00, 1.00, 1.00);
    sun.material = sunmaterial;
    
    planet1 = BABYLON.Mesh.CreateSphere("planet1", 10.0, 3.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);            
    var planet1mat = new BABYLON.StandardMaterial('planet1mat', scene);    
    var planet1mat_diffuseTexture = new BABYLON.Texture('assets/planet1.png', scene); 
    planet1mat.diffuseTexture = planet1mat_diffuseTexture;
    planet1mat.specularColor = new BABYLON.Color3(0, 0, 0);
    planet1.material = planet1mat;
    
    var frameRate = 10;
    var yRotate = new BABYLON.Animation("yRotate", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    var keyFramesR = []; 
    keyFramesR.push({
        frame: 0,
        value: 0
    });
    keyFramesR.push({
        frame: frameRate,
        value: Math.PI
    });
    keyFramesR.push({
        frame: 2 * frameRate,
        value: 2 * Math.PI
    });
    yRotate.setKeys(keyFramesR);
    scene.beginDirectAnimation(planet1, [yRotate], 0, 2 * frameRate, true);   
    
    planet2 = BABYLON.Mesh.CreateSphere("planet2", 10.0, 5.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);        
    moon = BABYLON.Mesh.CreateSphere("moon", 3.0, 1.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);
    moon.translate(planet2.position, 5, BABYLON.Space.WORLD);
    moon.parent = planet2;
    
    var planet2mat = new BABYLON.StandardMaterial('planet2mat', scene);    
    var planet2mat_diffuseTexture = new BABYLON.Texture('assets/planet2.jpg', scene); 
    planet2mat.diffuseTexture = planet2mat_diffuseTexture;    
    planet2mat.specularColor = new BABYLON.Color3(0, 0, 0);
    
    planet2.material = planet2mat;
    
    var yRotate = new BABYLON.Animation("yRotate", "rotation.y", frameRate/2, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    yRotate.setKeys(keyFramesR);
    scene.beginDirectAnimation(planet2, [yRotate], 0, 2 * frameRate, true);   
    
    return scene;

  };

Thursday, August 17, 2017

Pyramid Solitaire

Fun and easy solitaire game for your free time. Pyramid Solitaire is easy to master and fun to play solitaire game.
Use this link to play Pyramid Solitaire

Tuesday, August 8, 2017

Word Search game for Android

Word Search is one of the latest game I made with html5 and cordova. Its published on Android Store here - Word Search.
Word Search game

Its nice little word game where you have to discover and mark words. The levels are made with different topics - fantasy creatures, vehicles, sports, martial arts, biology and more. There are 18 levels as of now and I plan to expand it a bit more.

The game offers hints and scores and several hours mind challenge. The levels are dynamic and you can play them several times with different settings.
If you don't like to play the levels you can select the option of fast game and you will play one separate round with random words.

Word Search is developed with my favorite Phaser game engine and then its packed with Cordova for Android. In few weeks it will be available for playing as a html5 game without installation on another site and I will add a link to it here.