Using very few lines of code and just geometric shapes, you can make beautiful designs.

Ashwani Kumar — Fri, 19 Jun 2020 15:36:56 +0000

Hi Guys! I have made a quick tutorial on how to make animated designs using just circles. I have used Javascript for this.

Artificial intelligence can be implemented through Javascript. An example is the snake A.I.

Ashwani Kumar — Wed, 17 Jun 2020 10:13:56 +0000

Satisfaction as a Programmer

Ashwani Kumar — Sat, 23 May 2020 08:54:11 +0000

Whenever I looked at awesome graphic animation videos or posters, I felt a desire to make it by myself. I wanted to feel the satisfaction by making something so beautiful. But I never could because I am not a graphic designer. I am a Developer.

I have never worked with photoshop or adobe illustrator or any other tools like that. I do not even know other names. I guess I wanted to make those beautiful posters and animations but I did not want to use those tools. They never felt fun. I do not know why. Maybe because I am a programmer.

Ever since I started to learn programming, I have worked on different languages and have made tons of projects. Now I think that maybe it’s time to make something visually beautiful.
So yeah I can make animation because I am a programmer.

How to create a Snake Game in Javascript

Ashwani Kumar — Tue, 19 May 2020 07:37:47 +0000

Everyone played a lot of games on their computers or mobile phones. And, I feel so proud that I can play the games and being a programmer I can even make one.

Although there are many frameworks out there using which one can make games very quickly, I prefer to make things by scratch. You see, it's not about the final product for me, it's about the happiness that I get while coding. I love to code.

Recently, I have started playing around with Canvas and Javascript. And, yesterday I created from scratch, in Javascript, The Snake Game.

Check out this video to look at my version of the classic Snake Game, And step by step process to make it.

First, we need a canvas. for this, we will need an HTML file where we can create a canvas with a little bit of styling as mentioned below

<!DOCTYPE html>
<html>
    <head>
        <style>
            canvas {
                display: block;
                border: 1px solid black;   
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
        <script src="index.js"></script>
    </body>
</html>

After the initial setup for the game, the time was to have some fun with Javascript. Below is the complete javascript code of the game

const cvs = document.getElementById("myCanvas");
const ctx = cvs.getContext("2d");


cvs.width = 400;
cvs.height = 400;

let frames = 0;

let foodEaten = false;

const direction = {
    current : 0,
    idle : 0,
    right : 1,
    down : 2,
    left : 3,
    up : 4
}

document.addEventListener("keydown", function(evt){
    switch(evt.keyCode){
        case 37:
            //move left
            if(direction.current != direction.left && direction.current != direction.right) direction.current = direction.left;
            break;
        case 38:
            //move up
            if(direction.current != direction.up && direction.current != direction.down) direction.current = direction.up;
            break;
        case 39:
            //move right
            if(direction.current != direction.right && direction.current != direction.left) direction.current = direction.right;
            break;
        case 40:
            //move down
            if(direction.current != direction.down && direction.current != direction.up) direction.current = direction.down;
            break;
    }

});

function getDistance(pointX1, pointY1, pointX2, pointY2) {
    let distanceX = pointX2 - pointX1;
    let distanceY = pointY2 - pointY1;

   return Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2));
}

const food = {
    x : cvs.width/4,
    y : cvs.height/4,
    r : 10,

    draw : function(){
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(this.x, this.y, this.r, 0 , 2*Math.PI);
        ctx.fill();
        ctx.closePath();
    }  
}
const snake = {
    radius : 10,
    position : [{ x : cvs.width/2, y : cvs.height/2}],

    draw : function() {
        ctx.fillStyle = "black";
        for( let i = 0; i< this.position.length; i++){
            let p = this.position[i];
            ctx.beginPath();
            ctx.arc(p.x, p.y, this.radius, 0, 2*Math.PI);
            ctx.fill();
            ctx.closePath();
        }
    },

    update : function() {
        if(frames % 6 == 0){
            if(foodEaten == true){

                this.position.push({
                    x : this.position[this.position.length -1].x,
                    y : this.position[this.position.length -1].y                   
                });
                foodEaten = false;
            }

            if(this.position[0].x < 0 ) this.position[0].x = cvs.width - 10;
            if(this.position[0].x > cvs.width ) this.position[0].x = 10;
            if(this.position[0].y < 0 ) this.position[0].y = cvs.height - 10;
            if(this.position[0].y > cvs.height ) this.position[0].y = 10;

            for( let i = this.position.length -1; i > 0;  i--){
                    if(this.position[0].x == this.position[i].x && this.position[0].y == this.position[i].y && this.position.length > 2) {
                        this.position.splice(1);
                        break;
                    }
                    this.position[i].x = this.position[i-1].x; 
                    this.position[i].y = this.position[i-1].y; 
                }
            if(direction.current == direction.right) {

                this.position[0].x += 20;
            }
            if(direction.current == direction.left) {
                this.position[0].x -= 20;
            }
            if(direction.current == direction.up) {
                this.position[0].y -= 20;
            }
            if(direction.current == direction.down) {
                this.position[0].y += 20;
            }; 
            if(getDistance(food.x,food.y,this.position[0].x, this.position[0].y) <= 2*food.r){
                food.x = Math.random() * cvs.width;
                food.y = Math.random() * cvs.height;
                foodEaten = true;
            }
        }

    }
}

function main() {

    ctx.clearRect(0, 0, cvs.width, cvs.height);
    snake.update();
    snake.draw();
    food.draw();
    frames ++;
    requestAnimationFrame(main);

}
requestAnimationFrame(main);

Suggest few small projects for Javascript.

Ashwani Kumar — Fri, 15 May 2020 09:31:48 +0000

How to create a Fractal Tree