ਆਓ ਸਿੱਖੀਏ ਕਿ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਵਿੱਚ ਇੱਕ ਬਿੰਦੂ ਕਿਵੇਂ ਖਿੱਚਣਾ ਹੈ.. ਇਹ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੈ, ਪਰ ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਲਈ ਜੋ ਗੜਬੜ ਕਰਦੇ ਹਨ, ਅਤੇ ਉਨ੍ਹਾਂ ਲਈ ਜੋ ਇੰਟਰਨੈੱਟ 'ਤੇ ਬਿੰਦੂ ਖਿੱਚਣ ਲਈ ਤਿਆਰ ਨਹੀਂ ਹਨ - ਇਹ ਇੱਕ ਪੂਰੀ ਪ੍ਰਾਪਤੀ ਹੈ।
ਬਿੰਦੂ ਖਿੱਚਣ ਦੇ ਬਹੁਤ ਸਾਰੇ ਤਰੀਕੇ ਹਨ, ਆਓ ਉਨ੍ਹਾਂ ਨੂੰ ਵੇਖੀਏ
ਯੂਨਿਟੀ/ਗੋਡੌਟ/ਮਾਈਕ੍ਰੋਸਟੂਡੀਓ ਜਾਂ ਹਜ਼ਾਰਾਂ ਗੇਮ ਬਿਲਡਰਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ.. ਉਹ ਸਾਰੇ ਇੱਕ ਜਾਂ ਦੂਜੇ ਤਰੀਕੇ ਨਾਲ ਕੁਝ ਕੋਡ ਬਣਾਉਣਗੇ ਜੋ JavaScript ਜਾਂ Webassembly ਹੋਵੇਗਾ, ਅਤੇ ਫਿਰ ਵੀ ਸਾਨੂੰ ਬਿੰਦੂ ਦਿਖਾਉਂਦੇ ਹਨ।ਸਾਨੂੰ ਇਸ ਮਾਰਗ ਵਿੱਚ ਕੋਈ ਦਿਲਚਸਪੀ ਨਹੀਂ ਹੈ।ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਇਹ ਨਹੀਂ ਸਮਝ ਸਕਾਂਗੇ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ, ਕੋਡ ਉੱਤੇ ਨਿਯੰਤਰਣ ਬਹੁਤ ਘੱਟ ਹੋਵੇਗਾ ਅਤੇ ਸਰੋਤ ਕੋਡ ਵਿੱਚ ਪੜ੍ਹਨਯੋਗ ਨਹੀਂ ਹੋਵੇਗਾ, ਇਸਦੇ ਇਲਾਵਾ ਇਹ ਬਹੁਤ ਵੱਡਾ ਹੈ।
ਜੇਡੀ ਦਾ ਇਹ ਮਾਰਗ ਸਾਡੇ ਲਈ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਨੇੜੇ ਹੈ, ਕਿਉਂਕਿ.ਸਾਡਾ ਕੋਡ ਦਿਨ ਵਾਂਗ ਵੱਡਾ ਅਤੇ ਸਪੱਸ਼ਟ ਨਹੀਂ ਹੋਵੇਗਾ, ਅਸੀਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੰਖੇਪ ਨਹੀਂ ਕਰਾਂਗੇ, ਅਸੀਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੇ ਨਾਲ ਆਪਣੇ ਕੋਡ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਹੀਂ ਵਧਾਵਾਂਗੇ।ਕੋਡ ਕੰਟਰੋਲ ਵੀ ਬਹੁਤ ਵਧੀਆ ਹੋਵੇਗਾ
ਇਹ ਬੇਸ਼ੱਕ ਜੇਡੀ ਦਾ ਤਰੀਕਾ ਹੈ।ਕੋਡ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਗੁੰਝਲਦਾਰ ਹੈ, ਚੀਜ਼ਾਂ ਦਾ ਵੱਧ ਤੋਂ ਵੱਧ ਨਿਯੰਤਰਣ, ਜਿਵੇਂ ਕਿ ਇਹ ਸੀ, ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ.ਸਰੋਤ ਕੋਡ ਸਭ ਤੋਂ ਘੱਟ ਹਨ ਅਤੇ ਗੋਲਮੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੇ ਗਿਆਨ ਦੇ ਨਾਲ, ਅਸੀਂ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਨੌਕਰੀ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਜਾ ਸਕਦੇ ਹਾਂ, ਕਿਉਂਕਿ.ਸਾਨੂੰ ਅਜਿਹੇ ਲੋਕਾਂ ਦੀ ਲੋੜ ਹੈ।
ਪਰ ਸਾਡਾ ਕੰਮ ਕੋਈ ਨੌਕਰੀ ਲੱਭਣਾ ਨਹੀਂ ਹੈ, ਸਗੋਂ ਸਧਾਰਨ ਅਤੇ ਆਸਾਨ ਤਰੀਕੇ ਨਾਲ ਬਿੰਦੀ ਖਿੱਚਣਾ ਹੈ।ਸਾਡਾ ਵੈਕਟਰ ਗਤੀ ਅਤੇ ਲਚਕਤਾ ਹੈ।
ਮੈਂ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਚੋਣ ਕੀਤੀ
p5js ਇੱਕ ਬਿੰਦੀ ਖਿੱਚਣ ਲਈ.ਇਹ ਸਿਰਫ ਇਹ ਨਹੀਂ ਹੈ, ਬੇਸ਼ਕ, ਜੇਕਰ ਕੰਮ ਇੱਕ ਬਿੰਦੂ ਖਿੱਚਣਾ ਸੀ ਅਤੇ ਇਹ ਹੈ, ਬੇਸ਼ਕ, ਸਭ ਕੁਝ ਨੰਗੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਮੈਂ ਇਹ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਿੱਚ ਕਰ ਰਿਹਾ ਹਾਂ, .k.ਫਿਰ ਤੁਸੀਂ ਅਤੇ ਮੈਂ ਹੋਰ ਚੀਜ਼ਾਂ ਕਰਾਂਗੇ ਜੋ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦੇਣਗੀਆਂ, ਅਤੇ ਇਸਦੇ ਲਈ ਸਾਨੂੰ ਇੱਕ ਚੰਗੇ ਸਾਧਨ ਦੀ ਲੋੜ ਹੈ।ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ p5js ਹੈ।Golim JavaScript ਵਿੱਚ, ਸਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਅਤੇ ਰੀਡਰਾਇੰਗ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਕੈਨਵਸ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ, p5 ਵਿੱਚ ਇਹ ਵੀ ਕੀਤਾ ਗਿਆ ਹੈ, ਪਰ ਬਹੁਤ ਸੰਖੇਪ ਰੂਪ ਵਿੱਚ।
ਪਰ ਪਹਿਲਾਂ..
JavaScript ਵਿਕਾਸ ਲਈ ਘੱਟੋ-ਘੱਟ ਵਾਤਾਵਰਨ ਸੈੱਟਅੱਪ
ਡਾਊਨਲੋਡ ਕਰੋ
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);
}
ਨਤੀਜੇ ਵਜੋਂ, ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਤਰ੍ਹਾਂ ਖੁੱਲ੍ਹੇਗਾ
ਠੀਕ ਹੈ, HTML ਸਮਝਣ ਯੋਗ ਹੈ, ਪਰ ਇਹ ਕਿਸ ਕਿਸਮ ਦਾ JavaScript ਕੋਡ ਹੈ?
ਸੈੱਟਅੱਪ ਫੰਕਸ਼ਨ ਸ਼ੁਰੂਆਤੀ ਹੈ, ਇਹ ਇੱਕ ਵਾਰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਕੈਨਵਸ ਬਣਾਉਂਦੇ ਹਾਂ, ਯਾਨੀ.ਖੇਤਰ ਜਿੱਥੇ ਅਸੀਂ ਇੱਕ ਬਿੰਦੂ ਖਿੱਚਾਂਗੇ.window.innerWidth, window.innerHeight
ਸਕਰੀਨ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਹੈ, ਯਾਨੀ.ਅਸੀਂ ਇੱਕ ਪੂਰੀ-ਸਕ੍ਰੀਨ ਕੈਨਵਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਹਾਂ, HTML ਵਿੱਚ ਇਸਦੇ ਲਈ ਵੀ ਇੱਕ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਸ਼ੈਲੀ ਹੈ
<body style="margin: 0px;">
ਸਾਨੂੰ ਹੋਰ ਕੁਝ ਵੀ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਬਿੰਦੀ ਖਿੱਚਣ ਦੀ ਲੋੜ ਹੈ।ਇੱਥੇ ਸਿਧਾਂਤ ਨੂੰ ਦੇਖੋ .. ਡਰਾਅ ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ, 60 ਵਾਰ ਪ੍ਰਤੀ ਸਕਿੰਟ, ਅਤੇ 60 ਵਾਰ ਪ੍ਰਤੀ ਸਕਿੰਟ ਅਸੀਂ ਆਪਣਾ ਬਿੰਦੂ ਖਿੱਚਾਂਗੇ .. ਅਜਿਹਾ ਲਗਦਾ ਹੈ ਕਿ ਇਹ ਬੇਵਕੂਫੀ ਹੈ, ਸਾਨੂੰ ਸਿਰਫ ਇੱਕ ਬਿੰਦੂ ਖਿੱਚਣ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਹ ਹੈ ਇਹ, ਪਰ ਭਵਿੱਖ ਵਿੱਚ ਇਹ ਆਮ ਸਾਰੇ ਐਨੀਮੇਸ਼ਨ ਲਈ ਆਧਾਰ ਹੋਵੇਗਾ।
ਆਮ ਤੌਰ 'ਤੇ, ਇੱਕ ਬਿੰਦੂ ਖਿੱਚਣ ਲਈ ਕੋਡ ਬਹੁਤ ਹੀ ਸਧਾਰਨ ਹੈ:
point(10,10)
ਅਤੇ ਸਾਰੇ!
ਹਾਲਾਂਕਿ, ਸਾਡਾ ਕੋਡ ਥੋੜ੍ਹਾ ਵੱਡਾ ਹੈ
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
ਪਿਛੋਕੜ ਕਾਲਾ
ਚਿੱਟਾ ਤਾਰਾ
ਬਿੰਦੀ ਮੋਟਾਈ 10
ਅਤੇ ਅਸੀਂ ਇਸਨੂੰ ਲੰਬਕਾਰੀ ਅਤੇ ਖਿਤਿਜੀ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਖਿੱਚਦੇ ਹਾਂ।
ਖੈਰ.. ਅਸੀਂ ਕੈਨਵਸ 'ਤੇ ਇੱਕ ਬਿੰਦੀ ਖਿੱਚੀ ਹੈ, ਸਭ ਕੁਝ ਜਿਵੇਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਅਸੀਂ ਇਸਨੂੰ ਬਿਨਾਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੇ ਸ਼ੁੱਧ HTML 'ਤੇ ਵੀ ਖਿੱਚ ਸਕਦੇ ਹਾਂ.. ਇਹ ਕਿਹੋ ਜਿਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ?
ਇਹ ਇਸਨੂੰ ਮੁਢਲੇ ਅਤੇ ਹੋਰ ਵੀ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ, ਪਰ ਸਿਧਾਂਤ ਬਿਲਕੁਲ ਵੱਖਰੇ ਹਨ, ਸਕ੍ਰੀਨ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਇੱਕ ਵਰਗ ਬਣਾਉਣ ਲਈ ਇਹ ਅੰਤਿਮ ਕੋਡ ਹੈ
<!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>
ਨਤੀਜਾ ਲਗਭਗ ਇੱਕੋ ਜਿਹਾ ਹੈ
ਹਾਂ, HTML ਵਿੱਚ ਕੇਂਦਰ ਵਿੱਚ ਕੁਝ ਖਿੱਚਣਾ ਕਾਫ਼ੀ ਆਸਾਨ ਹੈ, ਪਰ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ, ਅਤੇ ਇਸ ਤੋਂ ਵੀ ਵੱਧ ਇੱਕ ਸਮਝਦਾਰ ਇੰਟਰਐਕਟਿਵ, ਤੁਹਾਨੂੰ CSS ਦੇ ਸਿਧਾਂਤਾਂ ਦੇ ਅਨੁਸਾਰ ਸੋਚਣਾ ਪਏਗਾ.ਹਾਲਾਂਕਿ ਇਹ ਕਾਫੀ ਦਿਲਚਸਪ ਕੰਮ ਹੈ।ਸਿਰਫ ਇੱਕ ਮੁਢਲੀ ਚੀਜ਼ ਇਸ ਸਭ ਨੂੰ ਮਾਰਦੀ ਹੈ, CSS ਵਿੱਚ ਕੋਈ ਬੇਤਰਤੀਬ ਨੰਬਰ ਨਹੀਂ ਹਨ, ਇਹ ਭਵਿੱਖ ਵਿੱਚ ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕੋਸ਼ਿਸ਼ਾਂ ਨੂੰ ਖਤਮ ਕਰ ਦੇਵੇਗਾ, ਇਸ ਲਈ ਮੈਂ ਇਸ ਦਿਸ਼ਾ ਨੂੰ ਘੱਟ ਤਰਜੀਹ ਦੇਵਾਂਗਾ.
ਜੇ ਮੈਂ ਕਲਪਨਾ ਕਰਦਾ ਹਾਂ ਕਿ ਮੈਂ ਨੰਗੇ CSS 'ਤੇ ਤਾਰਿਆਂ ਵਾਲਾ ਅਸਮਾਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ, ਤਾਂ ਸਭ ਕੁਝ ਮੇਰੇ ਲਈ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ, ਕਿਉਂਕਿਤਾਰਿਆਂ ਨੂੰ ਬੇਤਰਤੀਬ ਸਥਿਤੀਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਜੇਕਰ ਉਹਨਾਂ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਬਣਾਏ ਗਏ ਕੋਆਰਡੀਨੇਟ ਹਨ, ਤਾਂ ਇਹ ਇੰਨਾ ਸੁੰਦਰ ਅਤੇ ਸਧਾਰਨ ਨਹੀਂ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਤੁਸੀਂ CSS ਵਿੱਚ ਇੱਕ ਬੇਤਰਤੀਬ ਨੰਬਰ ਜਨਰੇਟਰ ਲਿਖ ਸਕਦੇ ਹੋ, ਪਰ ਅਜਿਹਾ ਕੋਡ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਸੂਰਤ, ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਔਖਾ ਦਿਖਾਈ ਦੇਵੇਗਾ। ਸਮਝੋ!