ইউজার ইন্টারঅ্যাকশন (কী-বোর্ড, মাউস ইভেন্টস)

ইউজার ইন্টারঅ্যাকশন কি?

ওয়েবজিএল (WebGL) ব্যবহার করে তৈরি করা থ্রি-ডি (3D) বা ২-ডি (2D) গ্রাফিক্সে ইউজার ইন্টারঅ্যাকশন (User Interaction) একটি অত্যন্ত গুরুত্বপূর্ণ দিক। ইউজার ইন্টারঅ্যাকশন হল সেই প্রক্রিয়া যার মাধ্যমে ব্যবহারকারী কী-বোর্ড বা মাউসের মাধ্যমে গ্রাফিক্সের সাথে যোগাযোগ করে, যেমন একটি অবজেক্ট ঘোরানো, স্কেল করা, প্যান করা বা মুভ করা। ওয়েবজিএল এই ধরনের ইন্টারঅ্যাকশনকে সমর্থন করে, যা ব্যবহারকারীদের একটি ইন্টারঅ্যাকটিভ এবং প্রফেশনাল গ্রাফিক্স অভিজ্ঞতা প্রদান করে।

এই ইন্টারঅ্যাকশনগুলি ওয়েবপেজের HTML, CSS, এবং JavaScript-এর মাধ্যমে পরিচালিত হয়, এবং গ্রাফিক্স রেন্ডারিংয়ের জন্য ওয়েবজিএল ব্যবহার করা হয়। সাধারণত কী-বোর্ড এবং মাউস ইভেন্টস ওয়েবজিএল অ্যাপ্লিকেশনগুলির সাথে যোগাযোগ করার জন্য ব্যবহৃত হয়।

কী-বোর্ড ইভেন্টস (Keyboard Events)

কী-বোর্ড ইভেন্টস ব্যবহারকারী কী-বোর্ডের কীগুলির সাথে সম্পর্কিত ইভেন্টগুলো ট্র্যাক করে। এটি একটি ওয়েবজিএল অ্যাপ্লিকেশনে ব্যবহারকারীকে অবজেক্টের অবস্থান পরিবর্তন, ঘোরানো বা স্কেল করার মত কার্যক্রম সম্পাদন করতে সহায়তা করে।

কী-বোর্ড ইভেন্ট পরিচালনা

ওয়েবজিএল অ্যাপ্লিকেশনটিতে কী-বোর্ডের ইভেন্টগুলি keydown, keyup ইভেন্টের মাধ্যমে ট্র্যাক করা যায়। এভাবে আপনি ব্যবহারকারীর ইনপুট অনুযায়ী অ্যাপ্লিকেশনটি রেসপন্ড করতে পারেন।

উদাহরণস্বরূপ:

window.addEventListener("keydown", function(event) {
    if (event.key === "ArrowUp") {
        // Up arrow key pressed
        // অবজেক্ট উপরে move করার কোড
    }
    if (event.key === "ArrowDown") {
        // Down arrow key pressed
        // অবজেক্ট নিচে move করার কোড
    }
});

এখানে, keydown ইভেন্ট ব্যবহার করে আপনি ব্যবহারকারীর কী-বোর্ড ইনপুট সনাক্ত করতে পারেন এবং সেই অনুযায়ী ওয়েবজিএল গ্রাফিক্সে পরিবর্তন আনতে পারেন।

কী-বোর্ড ইভেন্টস এর ব্যবহার:

• মুভিং অবজেক্টস: কোনো অবজেক্টকে উপরে, নিচে, ডানে বা বামে সরানো।
• জুম ইন ও আউট: স্কেলিং বা zooming ইন/আউট করার জন্য।
• ক্যামেরা নিয়ন্ত্রণ: 3D ভিউ বা ক্যামেরার পজিশন পরিবর্তন করার জন্য।

মাউস ইভেন্টস (Mouse Events)

মাউস ইভেন্টস ওয়েবজিএল-এ একটি অত্যন্ত গুরুত্বপূর্ণ দিক, কারণ এটি ব্যবহারকারীর মাউসের মাধ্যমে অবজেক্টের সাথে ইন্টারঅ্যাকশনকে ট্র্যাক করতে ব্যবহৃত হয়। মাউস ইভেন্টস ব্যবহার করে ব্যবহারকারী একটি অবজেক্টে ক্লিক, ড্র্যাগ, স্ক্রল অথবা হোভার করতে পারেন। ওয়েবজিএল গ্রাফিক্সে এই ধরনের ইন্টারঅ্যাকশন ব্যবহারকারীর জন্য অনেক ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সক্ষম।

মাউস ইভেন্ট পরিচালনা

মাউস ইভেন্টগুলো ট্র্যাক করতে mousedown, mouseup, mousemove, click, mouseover, mouseout ইত্যাদি ইভেন্টগুলো ব্যবহার করা হয়। ওয়েবজিএল অ্যাপ্লিকেশনে এগুলি ব্যবহার করা হয় মাউসের অবস্থান, ক্লিক বা ড্র্যাগ করার সময় গ্রাফিক্সের পরিবর্তন পরিচালনার জন্য।

উদাহরণস্বরূপ, একটি 3D অবজেক্টে মাউসের ক্লিক বা ড্র্যাগ দ্বারা ঘোরানো:

var isMouseDown = false;
var lastX = 0;
var lastY = 0;

canvas.addEventListener("mousedown", function(event) {
    isMouseDown = true;
    lastX = event.clientX;
    lastY = event.clientY;
});

canvas.addEventListener("mousemove", function(event) {
    if (isMouseDown) {
        var deltaX = event.clientX - lastX;
        var deltaY = event.clientY - lastY;

        // মাউস ড্র্যাগ করলে অবজেক্টের ঘূর্ণন
        rotateObject(deltaX, deltaY);
        
        lastX = event.clientX;
        lastY = event.clientY;
    }
});

canvas.addEventListener("mouseup", function() {
    isMouseDown = false;
});

এখানে, mousedown এবং mousemove ইভেন্ট ব্যবহার করা হয়েছে, যেখানে মাউস ড্র্যাগ করলে অবজেক্টের রোটেশন কন্ট্রোল করা হচ্ছে।

মাউস ইভেন্টস এর ব্যবহার:

• ড্র্যাগ এবং ড্রপ: 3D অবজেক্টকে মাউসের মাধ্যমে ঘোরানো বা স্থানান্তরিত করা।
• ক্লিক ইভেন্ট: অবজেক্টে ক্লিক করলে কোনো আ্যাকশন (যেমন ইনফরমেশন শো করা) ট্রিগার করা।
• স্ক্রল ইভেন্ট: স্ক্রল করার মাধ্যমে জুম ইন বা আউট করা।

কী-বোর্ড এবং মাউস ইভেন্টস একসাথে ব্যবহার

ওয়েবজিএল অ্যাপ্লিকেশনে ব্যবহারকারী কী-বোর্ড এবং মাউস ইভেন্টস একসাথে ব্যবহার করে আরও উন্নত ইন্টারঅ্যাকটিভিটি তৈরি করতে পারে। যেমন, আপনি মাউস দিয়ে অবজেক্ট ঘোরাতে পারেন এবং কী-বোর্ড দিয়ে স্কেল করতে পারেন অথবা ক্যামেরার পজিশন নিয়ন্ত্রণ করতে পারেন।

উদাহরণ:

// কী-বোর্ড ইভেন্ট
window.addEventListener("keydown", function(event) {
    if (event.key === "ArrowUp") {
        zoomIn();
    }
});

// মাউস ইভেন্ট
canvas.addEventListener("mousedown", function(event) {
    isMouseDown = true;
    lastX = event.clientX;
    lastY = event.clientY;
});

canvas.addEventListener("mousemove", function(event) {
    if (isMouseDown) {
        var deltaX = event.clientX - lastX;
        var deltaY = event.clientY - lastY;
        
        rotateObject(deltaX, deltaY); // মাউস ড্র্যাগ দ্বারা রোটেট
        lastX = event.clientX;
        lastY = event.clientY;
    }
});

এখানে, ব্যবহারকারী কী-বোর্ডের মাধ্যমে অবজেক্টের আকার পরিবর্তন (zoom in) করতে পারবেন, এবং মাউসের মাধ্যমে অবজেক্ট ঘোরাতে পারবেন।

সারাংশ

ওয়েবজিএল অ্যাপ্লিকেশনগুলিতে ইউজার ইন্টারঅ্যাকশন অত্যন্ত গুরুত্বপূর্ণ, যা ব্যবহারকারীদের অভিজ্ঞতা ইন্টারঅ্যাকটিভ এবং উদ্ভাবনী করতে সাহায্য করে। কী-বোর্ড এবং মাউস ইভেন্টস সঠিকভাবে ব্যবহৃত হলে ওয়েবজিএল গ্রাফিক্সের সাথে ব্যবহারকারীর যোগাযোগকে আরও মসৃণ এবং কার্যকরী করা সম্ভব হয়।