JavaScript: ایک نقطہ کھینچیں۔

آئیے سیکھتے ہیں کہ براؤزر میں جاوا اسکرپٹ میں پوائنٹ کس طرح کھینچنا ہے.. یہ تکنیکی طور پر مشکل نہیں ہے، لیکن صرف ان لوگوں کے لیے جو گڑبڑ کرتے ہیں، اور ان لوگوں کے لیے جو انٹرنیٹ پر پوائنٹ کھینچنے کے لیے تیار نہیں ہیں - یقیناً یہ ایک پوری کامیابی ہے۔

نقطہ کھینچنے کے بہت سے طریقے ہیں، آئیے ان کو دیکھتے ہیں۔

گیم کنسٹرکٹرز



Unity/Godot/microStudio یا ہزاروں گیم بلڈرز میں سے کسی کا استعمال کرتے ہوئے.. وہ سب کسی نہ کسی طریقے سے کوئی نہ کوئی کوڈ بنائیں گے جو JavaScript یا Websembly ہو گا، اور پھر بھی ہمیں نقطہ دکھائیں گے۔ہمیں اس راستے میں کوئی دلچسپی نہیں ہے۔ہم واقعی سمجھ نہیں پائیں گے کہ کیا ہو رہا ہے، کوڈ پر کنٹرول کم سے کم ہو گا اور سورس کوڈ میں پڑھا نہیں جا سکتا، اس کے علاوہ یہ بہت بڑا ہے۔

جاوا اسکرپٹ فریم ورکس

جیدی کا یہ راستہ ہمارے لیے جتنا ممکن ہو قریب ہے، کیونکہ۔ہمارا کوڈ دن کی طرح بڑا اور واضح نہیں ہوگا، ہم زیادہ خلاصہ نہیں کریں گے، ہم لائبریریوں کے ساتھ اپنے کوڈ میں بہت زیادہ اضافہ نہیں کریں گے۔کوڈ کنٹرول بھی بہت اچھا ہوگا۔

خالص جاوا اسکرپٹ

یہ یقیناً جیدی کا طریقہ ہے۔کوڈ جتنا ممکن ہو اتنا ہی پیچیدہ ہے، چیزوں کا زیادہ سے زیادہ کنٹرول جو، جیسا کہ تھا، کو کنٹرول کرنے کی ضرورت نہیں ہے۔سورس کوڈز سب سے کم ہیں اور جاوا اسکرپٹ کے علم کے ساتھ، ہم محفوظ طریقے سے نوکری حاصل کرنے کے لیے جا سکتے ہیں، کیونکہ۔ہمیں ایسے لوگوں کی ضرورت ہے۔

لیکن ہمارا کام نوکری تلاش کرنا نہیں ہے، بلکہ آسان اور آسان طریقے سے ڈاٹ کھینچنا ہے۔ہمارا ویکٹر رفتار اور لچک ہے۔

میں نے لائبریری کا انتخاب کیا۔

p5js ایک نقطہ کھینچنا۔یہ صرف اتنا ہی نہیں ہے، یقیناً، اگر کام ایک نقطہ کھینچنا تھا اور بس، یقیناً، سب کچھ ننگے جاوا اسکرپٹ میں کرنا پڑے گا، لیکن میں اسے تناظر میں کر رہا ہوں، .k.پھر آپ اور میں دوسری چیزیں کریں گے جو حیرت انگیز نظر آئیں گے، اور اس کے لیے ہمیں ایک اچھے آلے کی ضرورت ہے۔ان میں سے ایک p5js ہے۔

گولم جاوا اسکرپٹ میں، ہمیں ابتدا اور دوبارہ ڈرائنگ کے افعال کی وضاحت کرنے کے لیے ایک کینوس بنانے کی ضرورت ہے، p5 میں یہ بھی کیا گیا ہے، لیکن بہت مختصر طور پر۔

لیکن پہلے..

جاوا اسکرپٹ کی ترقی کے لیے کم از کم ماحولیات کا سیٹ اپ

ڈاؤن لوڈ کریں

p5.min.js اور ساتھ ساتھ رکھیں.

اس طرح

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

sketch.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

    function draw() {
    background(0);
    stroke('white');
    strokeWeight(10);
    point(window.innerWidth/2,window.innerHeight/2);
    }

نتیجے کے طور پر، آپ کا براؤزر اس طرح کھل جائے گا۔

ٹھیک ہے، ایچ ٹی ایم ایل سمجھ میں آتا ہے، لیکن یہ کس قسم کا جاوا اسکرپٹ کوڈ ہے؟

سیٹ اپ فنکشن ابتداء ہے، یہ ایک بار عمل میں آتا ہے، اس میں ہم ایک کینوس بناتے ہیں، یعنیوہ علاقہ جہاں ہم ایک نقطہ کھینچیں گے۔window.innerWidth، window.innerHeight

اسکرین کی چوڑائی اور اونچائی ہے، یعنیہم ایک فل سکرین کینوس کی وضاحت کرتے ہیں اور ہاں، ایچ ٹی ایم ایل کا اس کے لیے بھی بہت اہم انداز ہے

<body style="margin: 0px;">

ہمیں کسی اور چیز کو شروع کرنے کی ضرورت نہیں ہے، ہمیں صرف ایک نقطہ کھینچنے کی ضرورت ہے۔یہاں اصول کو دیکھیں.. ڈرا فنکشن پر عمل کیا جاتا ہے، مثال کے طور پر، 60 بار فی سیکنڈ، اور 60 بار فی سیکنڈ ہم اپنا نقطہ کھینچیں گے.. ایسا لگتا ہے کہ یہ احمقانہ ہے، ہمیں صرف ایک نقطہ کھینچنا ہے اور وہ ہے یہ، لیکن مستقبل میں یہ عام تمام حرکت پذیری کی بنیاد ہو گی۔

عام طور پر، نقطہ ڈرائنگ کا کوڈ انتہائی آسان ہے:

point(10,10)

اور تمام!

تاہم، ہمارا کوڈ تھوڑا بڑا ہے۔

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

پس منظر سیاہ

سفید ستارہ

نقطے کی موٹائی 10

اور ہم اسے عمودی اور افقی کے بیچ میں کھینچتے ہیں۔

ٹھیک ہے.. ہم نے کینوس پر ایک نقطہ کھینچا، سب کچھ ویسا ہی ہے جیسا کہ ہونا چاہیے، لیکن ہم اسے بغیر کسی جاوا اسکرپٹ کے خالص ایچ ٹی ایم ایل پر بھی کھینچ سکتے ہیں.. یہ کیسا لگے گا؟

یہ اسے ابتدائی اور آسان بھی بناتا ہے، لیکن اصول بالکل مختلف ہیں، یہاں سکرین کے بیچ میں مربع کھینچنے کا حتمی کوڈ ہے۔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
    <div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>

نتیجہ تقریباً ایک جیسا ہے۔

جی ہاں، ایچ ٹی ایم ایل میں بیچ میں کچھ کھینچنا بہت آسان ہے، لیکن اینیمیشنز اور اس سے بھی زیادہ سمجھدار انٹرایکٹو کو شامل کرنے کے لیے، آپ کو سی ایس ایس کے اصولوں کے مطابق سوچنا پڑے گا۔اگرچہ یہ کافی دلچسپ کام ہے۔صرف ایک ابتدائی چیز اس سب کو ختم کر دیتی ہے، CSS میں کوئی بے ترتیب نمبر نہیں ہیں، یہ مستقبل میں ہماری تمام کوششوں کو ختم کر دے گا، اسی لیے میں اس سمت کو کم ترجیح دوں گا۔

اگر میں تصور کرتا ہوں کہ میں ننگے سی ایس ایس پر ستاروں سے بھرا آسمان بنانا چاہتا ہوں، تو میرے لیے سب کچھ کام نہیں کرے گا، کیونکہستاروں کو بے ترتیب پوزیشن میں ظاہر ہونا چاہئے، اور اگر ان کے پہلے سے بنائے گئے نقاط ہوں گے، تو یہ اتنا خوبصورت اور آسان نہیں ہوگا، کیونکہ آپ سی ایس ایس میں ایک بے ترتیب نمبر جنریٹر لکھ سکتے ہیں، لیکن ایسا کوڈ بالکل بدصورت، ناقابل پڑھنے اور مشکل نظر آئے گا۔ سمجھو!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese