• March 29, 2021
Javascript net

Cool Javascript example part – 1

Javascript একটি  Dynamic Scripting ল্যাংগুয়েজ। যেটা সাধারণত Dynamic website তৈরি এবং কন্ট্রোল করতে ব্যবহার করা হয়। Brendan Eich নামক একজন বিঙ্গানী 1995 সালে  এটি আবিস্কার করেন।আমরা সাধারণত জাভা এবং জাভাস্ক্রিপ্টের মধ্যে মিলিয়ে ফেলি। কিন্তু এই দুই প্রোগ্রামিং ল্যাংগুয়েজের মধ্যে যথেষ্ট পার্থক্য রয়েছে।

Javascript কোড কোথায় লিখবেন?

আমরা সাধারণত কোড লিখার জন্য যে গুলো ব্যবহার করে থাকি ওইগুলো ব্যবহার করলেই হবে।যেমনঃ

  1. Notepad
  2. Notepad++
  3. Visual Studio Code
  4. Sublime Text
  5. Atom
  6. etc.

কোড যেখানে রান করবেনঃ

  1. Google Chrome
  2. Firefox
  3. Microsoft Edge
  4. Internet Explorer
  5. etc.

 Playable net using Javascript

আমরা আজকে শিখব কিভাবে একটা Playable Net তৈরি করা যায়।

Html Code(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="c"></canvas>
    <div id="info">
        <div id="top">
            <a id="close" href="">&times;</a>
        </div>
        <p>
            <br>- Tear the cloth with your mouse
            <br>
            <br>- Right click and drag to cut
            <br>
            <br>
            <br>
            <div class="center">
                <a id="github" target="_blank" href="https://github.com/dissimulate/Tearable-Cloth">GitHub</a>&nbsp;
            </div>
            <br>
        </p>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS Code (style.css)

* {
    margin: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

body {
    background: #F2F2F2;
}

#c {
    display: block;
    margin: 20px auto 0;
}

#info {
    position: absolute;
    left: -1px;
    top: -1px;
    width: auto;
    max-width: 420px;
    height: auto;
    background: #f8f8f8;
    border-bottom-right-radius: 10px;
    border: 1px solid #ccc;
}

#top {
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #eee;
}

p {
    font-family: Arial, sans-serif;
    color: #666;
    text-align: justify;
    font-size: 16px;
    margin: 0px 16px;
}

#github,
#twitter {
    color: #3377ee;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}

.center {
    text-align: center;
}

#net {
    text-align: center;
    white-space: nowrap;
    font-size: 19px;
    background: rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    display: block;
    color: #888;
}

#net>span {
    color: #3377ee;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    display: block;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}

a {
    font-family: sans-serif;
    color: #444;
    text-decoration: none;
    font-size: 20px;
}

#site {
    float: left;
    margin: 10px;
    color: #ff9900;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 3px
}

#site:hover {
    color: #ffaa11;
}

#close {
    float: right;
    margin: 10px;
}

#p {
    font-family: Verdana, sans-serif;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #4099ff;
    border: 1px dashed #4099ff;
    padding: 4px 8px;
}

#new {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-family: Helvetica;
    margin-top: 12px;
}

#new a {
    font-size: 20px;
    color: #4099ff;
}

.bull {
    opacity: 0.3;
    margin: 0 6px;
    font-size: 14px;
}

Javascript Code(main.js)

document.getElementById('close').onmousedown = function(e) {
    e.preventDefault();
    document.getElementById('info').style.display = 'none';
    return false;
};

// settings

var physics_accuracy = 3,
    mouse_influence = 20,
    mouse_cut = 5,
    gravity = 1200,
    cloth_height = 30,
    cloth_width = 50,
    start_y = 20,
    spacing = 7,
    tear_distance = 60;


window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };

var canvas,
    ctx,
    cloth,
    boundsx,
    boundsy,
    mouse = {
        down: false,
        button: 1,
        x: 0,
        y: 0,
        px: 0,
        py: 0
    };

var Point = function(x, y) {
    this.x = x;
    this.y = y;
    this.px = x;
    this.py = y;
    this.vx = 0;
    this.vy = 0;
    this.pin_x = null;
    this.pin_y = null;

    this.constraints = [];
};

Point.prototype.update = function(delta) {
    if (mouse.down) {
        var diff_x = this.x - mouse.x,
            diff_y = this.y - mouse.y,
            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

        if (mouse.button == 1) {
            if (dist < mouse_influence) {
                this.px = this.x - (mouse.x - mouse.px) * 1.8;
                this.py = this.y - (mouse.y - mouse.py) * 1.8;
            }

        } else if (dist < mouse_cut) this.constraints = [];
    }

    this.add_force(0, gravity);

    delta *= delta;
    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

    this.px = this.x;
    this.py = this.y;

    this.x = nx;
    this.y = ny;

    this.vy = this.vx = 0
};

Point.prototype.draw = function() {
    if (!this.constraints.length) return;

    var i = this.constraints.length;
    while (i--) this.constraints[i].draw();
};

Point.prototype.resolve_constraints = function() {
    if (this.pin_x != null && this.pin_y != null) {
        this.x = this.pin_x;
        this.y = this.pin_y;
        return;
    }

    var i = this.constraints.length;
    while (i--) this.constraints[i].resolve();

    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};

Point.prototype.attach = function(point) {
    this.constraints.push(
        new Constraint(this, point)
    );
};

Point.prototype.remove_constraint = function(constraint) {
    this.constraints.splice(this.constraints.indexOf(constraint), 1);
};

Point.prototype.add_force = function(x, y) {
    this.vx += x;
    this.vy += y;

    var round = 400;
    this.vx = ~~(this.vx * round) / round;
    this.vy = ~~(this.vy * round) / round;
};

Point.prototype.pin = function(pinx, piny) {
    this.pin_x = pinx;
    this.pin_y = piny;
};

var Constraint = function(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
    this.length = spacing;
};

Constraint.prototype.resolve = function() {
    var diff_x = this.p1.x - this.p2.x,
        diff_y = this.p1.y - this.p2.y,
        dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
        diff = (this.length - dist) / dist;

    if (dist > tear_distance) this.p1.remove_constraint(this);

    var px = diff_x * diff * 0.5;
    var py = diff_y * diff * 0.5;

    this.p1.x += px;
    this.p1.y += py;
    this.p2.x -= px;
    this.p2.y -= py;
};

Constraint.prototype.draw = function() {
    ctx.moveTo(this.p1.x, this.p1.y);
    ctx.lineTo(this.p2.x, this.p2.y);
};

var Cloth = function() {
    this.points = [];

    var start_x = canvas.width / 2 - cloth_width * spacing / 2;

    for (var y = 0; y <= cloth_height; y++) {
        for (var x = 0; x <= cloth_width; x++) {
            var p = new Point(start_x + x * spacing, start_y + y * spacing);

            x != 0 && p.attach(this.points[this.points.length - 1]);
            y == 0 && p.pin(p.x, p.y);
            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

            this.points.push(p);
        }
    }
};

Cloth.prototype.update = function() {
    var i = physics_accuracy;

    while (i--) {
        var p = this.points.length;
        while (p--) this.points[p].resolve_constraints();
    }

    i = this.points.length;
    while (i--) this.points[i].update(.016);
};

Cloth.prototype.draw = function() {
    ctx.beginPath();

    var i = cloth.points.length;
    while (i--) cloth.points[i].draw();

    ctx.stroke();
};

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    cloth.update();
    cloth.draw();

    requestAnimFrame(update);
}

function start() {
    canvas.onmousedown = function(e) {
        mouse.button = e.which;
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
            mouse.y = e.clientY - rect.top,
            mouse.down = true;
        e.preventDefault();
    };

    canvas.onmouseup = function(e) {
        mouse.down = false;
        e.preventDefault();
    };

    canvas.onmousemove = function(e) {
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
            mouse.y = e.clientY - rect.top,
            e.preventDefault();
    };

    canvas.oncontextmenu = function(e) {
        e.preventDefault();
    };

    boundsx = canvas.width - 1;
    boundsy = canvas.height - 1;

    ctx.strokeStyle = '#888';

    cloth = new Cloth();

    update();
}

window.onload = function() {
    canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');

    canvas.width = 560;
    canvas.height = 350;

    start();
};

Right click on the net and drag to cut the net.

Output

Javascript example netJavascript example net

Bootstrap Accordion(Collapse Data)

Bootstrap Basics Part-I (বুটস্ট্রাপ বেসিকস পার্ট -১)

Flutter App Development Introduction

One thought on “Cool Javascript example part – 1

Leave a Reply

Your email address will not be published. Required fields are marked *