মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
ত্রিমাত্রিক (3D) আকৃতি তৈরি করা
এখন আমাদের একটি ঘনক আছে, কিন্তু এটার অবস্থান বা মাপ পরিবর্তন করতে চাইলে কি করবো? অথবা যদি আয়তাকার ছয়তল বিশিষ্ট ঘনবস্তু (cuboid) বা বহুতলবিশিষ্ট ঘনবস্তু তৈরি করতে চাই? বর্তমান কোডে, প্রত্যেকটি নোডকে বদলাতে হবে, যা একেবারেই একটি অমূলক ব্যাপার। এখন আমাদের নির্দিষ্ট অবস্থান ও মাত্রার ছয়তল বিশিষ্ট ঘনবস্তু তৈরি করার জন্য একটি সহজ মেথড লাগবে। অন্যভাবে বলতে হলে, আমাদের একটি ফাংশন দরকার যা অবস্থান ও মাত্রাকে নোড (node) ও প্রান্তের (edge) অ্যারেতে নেয়।
ছয়তল বিশিষ্ট ঘনবস্তু (cuboid) সংজ্ঞায়িত করা
একটি cuboid এর তিনটি মাত্রা আছে: width (প্রস্থ), height (উচ্চতা) এবং depth (গভীরতা):
এটার 3D (ত্রিমাত্রিক) জগতে অবস্থানও রয়েছে, যা আমাদের ছয়টি প্যারামিটার দেয়। আমরা কয়েকটি উপায়ে ঘনকের অবস্থান সংজ্ঞায়িত করতে পারি: আমরা এটার কেন্দ্র অথবা যে কোন কোণাকে সংজ্ঞায়িত করতে পারি। আগের উপায়টি বেশি প্রযোজ্য, কিন্তু আমার মনে হয় পরেরটি সহজ হবে।
আমাদের ফাংশনকে nodes (নডগুলো) এবং edges (প্রান্তগুলো) অ্যারেতে রিটার্ন করতে হবে। দুইটি চলক রিটার্ন করার একটি উপায় হল চলকগুলো নিয়ে অবজেক্ট তৈরি করা, যার মধ্যে একটি key (অ্যারেতে নির্দিষ্ট অবস্থানের সংখ্যামান)
nodes
(নডগুলো) এবং আরেকটি key edges
(প্রান্তগুলো) এর জন্য থাকে। লক্ষ্য করা উচিত, যে কোন স্ট্রিং চলকের জন্য ব্যবহার করা যায়, একই শব্দ ব্যবহার করাই আমার কাছে সহজ বলে মনে হয়।// একটি cuboid তৈরি করা (x, y, z) প্রান্ত নিয়ে
// width (প্রস্থ), w, height (উচ্চতা), h এবং depth (গভীরতা), d.
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [];
var edges = [];
var shape = { 'nodes': nodes, 'edges': edges };
return shape;
};
এই ফাংশন দিয়ে একটি cuboid তৈরি করার সময়, প্রথম node (নোড) কে নিয়ে এভাবে কাজ করবোঃ
var object = createCuboid(0, 0, 0, 100, 160, 50);
var node0 = shape.nodes[0];
এর ফলে
node0
এর মান nodes
(নোডগুলোর) অ্যারের প্রথম মান হবে। কিন্তু এসময় nodes (নোডগুলো) বা edges (প্রান্তগুলোর) অ্যারেতে কোন মান থাকবে না।আমরা nodes (নোডগুলো) অবস্থানকে মাত্রা সহ বা ছাড়াই সংজ্ঞায়িত করি। Edges (প্রান্তগুলো) আগের মতই সংজ্ঞায়িত করা হয়েছে (একটি একটি করে সংজ্ঞায়িত না করে, আমি একবারেই সব করেছি)। লক্ষ্য করতে হবে যে, এই ফাংশনটি cuboid এর জন্য ঋণাত্মক মাত্রা নিতে দেয়।
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [[x, y, z ], [x, y, z+d], [x, y+h, z ], [x, y+h, z+d], [x+w, y, z ], [x+w, y, z+d], [x+w, y+h, z ], [x+w, y+h, z+d]];
var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6], [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
return { 'nodes': nodes, 'edges': edges};
};
তারপর আমরা width (প্রস্থ) 100, height (উচ্চতা) 160, depth (গভীরতা) 50 এবং মূলবিন্দুতে (origin) আরেকটি নোড (node) নিয়ে একটি cuboid তৈরি করতে পারিঃ
var shape = createCuboid(0, 0, 0, 100, 160, 50);
যেহেতু আমাদের আগের কোডটি সার্বজনীন
nodes
(নোডগুলো) এবং edges
(প্রান্তগুলোর) চলকের, আমাদের বৈশিষ্ট্যগুলোকে ওই সকল চলকে রাখতে হবে:var nodes = shape.nodes; var edges = shape.edges;
সম্পূর্ণ কোডটি নিচে দেওয়া হল।
বিভিন্ন আকৃতি নিয়ে কাজ করা
আমরা বিভিন্ন মাত্রার আকৃতি তৈরি করতে পারি, কিন্তু আমরা যদি একাধিক তৈরি করতে চাই তাহলে কি হবে? যখনই কোন কিছু একের অধিক দরকার, তখন অ্যারে খুবই কার্যকরী, এজন্য আমরা এখন বিভিন্ন আকৃতির অ্যারে তৈরি করবো।
var shape1 = createCuboid(-120, -20, -20, 240, 40, 40);
var shape2 = createCuboid(-120, -50, -30, -20, 100, 60);
var shape3 = createCuboid( 120, -50, -30, 20, 100, 60);
var shapes = [shape1, shape2, shape3];
এখন অ্যারের জন্য আমাদের display (আঁকানো) এবং rotate (ঘূর্ণনের) ফাংশন পরিবর্তন করতে হবে। সবগুলো আকৃতির (edges) প্রান্তগুলো আঁকানোর জন্য লুপের কোডটি নিম্নরূপঃ
// Draw edges
stroke(edgeColor);
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
var edges = shapes[shapeNum].edges;
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var node0 = nodes[n0];
var node1 = nodes[n1];
line(node0[0], node0[1], node1[0], node1[1]);
}
}
একই রকম আরেকটি লুপের কোডঃ
// Draw nodes
fill(nodeColor);
noStroke();
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n]; ellipse(node[0], node[1], nodeSize, nodeSize);
}
}
প্রতিটি rotate ফাংশনের জন্য আমরা একই লুপ ব্যবহার করতে পারি, কিন্তু আমার মনে হয় প্রতিটি ফাংশনে অ্যারের nodes (নোডগুলো) পাঠানো বেশি উপকারী - কারণ আমরা এর ফলে প্রত্যেকটি আকৃতিকে আলাদাভাবে ঘোরাতে পারি। উদাহরণস্বরূপ, rotateZ3D() ফাংশনটি এমন হবে:
var rotateZ3D = function(theta, nodes) { ... };
এখন মাউস ব্যবহার করে ঘোরানোর জন্য প্রত্যেকটি আকৃতি, লুপ করে বের করতে হবে এবং প্রত্যেকটির জন্য ফাংশন কল করতে হবে:
mouseDragged = function() {
var dx = mouseX - pmouseX;
var dy = mouseY - pmouseY;
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
rotateY3D(dx, nodes);
rotateX3D(dy, nodes);
}
};
লক্ষ্য রাখতে হবে যে, কোন নোড নেই এমন rotate ফাংশনে কল বাদ দিতে হবে। নিচে সম্পূর্ণ কোড দেওয়া হল।
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।