JavaScript: એક બિંદુ દોરો

ચાલો જાણીએ કે બ્રાઉઝરમાં JavaScript માં પોઈન્ટ કેવી રીતે દોરવો.. તે તકનીકી રીતે મુશ્કેલ નથી, પરંતુ ફક્ત તે લોકો માટે કે જેઓ ગડબડ કરે છે અને જેઓ ઈન્ટરનેટ પર કોઈ બિંદુ દોરવા માટે તૈયાર નથી તેમના માટે - અલબત્ત આ એક સંપૂર્ણ સિદ્ધિ છે.

બિંદુ દોરવાની ઘણી રીતો છે, ચાલો તેમને જોઈએ

ગેમ કન્સ્ટ્રક્ટર



યુનિટી/ગોડોટ/માઈક્રોસ્ટુડિયો અથવા હજારો ગેમ બિલ્ડરોમાંથી કોઈપણનો ઉપયોગ કરીને.. તેઓ બધા એક યા બીજી રીતે અમુક કોડ બનાવશે જે JavaScript અથવા વેબસેમ્બલી હશે, અને હજુ પણ અમને મુદ્દો બતાવશે.અમને આ માર્ગમાં રસ નથી.અમે ખરેખર સમજી શકતા નથી કે શું થઈ રહ્યું છે, કોડ પર નિયંત્રણ ન્યૂનતમ હશે અને સ્રોત કોડમાં વાંચી ન શકાય તેવું હશે, ઉપરાંત તે વિશાળ છે.

જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક

જેઈડીઆઈનો આ માર્ગ આપણા માટે શક્ય તેટલો નજીક છે, કારણ કે.અમારો કોડ દિવસની જેમ મોટો અને સ્પષ્ટ રહેશે નહીં, અમે વધુ અમૂર્ત નહીં કરીએ, અમે પુસ્તકાલયો સાથે અમારા કોડને મોટા પ્રમાણમાં વધારીશું નહીં.કોડ નિયંત્રણ પણ મહાન હશે

શુદ્ધ જાવાસ્ક્રિપ્ટ

આ અલબત્ત જેઈડીઆઈનો માર્ગ છે.કોડ શક્ય તેટલો જટિલ છે, વસ્તુઓનું મહત્તમ નિયંત્રણ, જે તે હતું, તેને નિયંત્રિત કરવાની જરૂર નથી.સ્ત્રોત કોડ સૌથી ઓછા છે અને ગોલિમી જાવાસ્ક્રિપ્ટના જ્ઞાન સાથે, અમે સલામત રીતે નોકરી મેળવવા માટે જઈ શકીએ છીએ, કારણ કે.આપણને આવા લોકોની જરૂર છે.

પરંતુ અમારું કાર્ય નોકરી શોધવાનું નથી, પરંતુ સરળ અને સરળ રીતે બિંદુ દોરવાનું છે.આપણું વેક્ટર ઝડપ અને સુગમતા છે.

મેં પુસ્તકાલય પસંદ કર્યું

p5js એક બિંદુ દોરવા માટે.તે માત્ર એટલું જ નથી, અલબત્ત, જો કાર્ય એક બિંદુ દોરવાનું હતું અને તે જ છે, અલબત્ત, બધું એકદમ જાવાસ્ક્રિપ્ટમાં કરવું પડશે, પરંતુ હું આ પરિપ્રેક્ષ્યમાં કરી રહ્યો છું, .k.પછી તમે અને હું અન્ય વસ્તુઓ કરીશું જે અદ્ભુત દેખાશે, અને આ માટે અમને એક સારા સાધનની જરૂર છે.તેમાંથી એક p5js છે.

ગોલીમ જાવાસ્ક્રિપ્ટમાં, આપણે આરંભ અને રીડ્રોઈંગ ફંક્શનને વ્યાખ્યાયિત કરવા માટે કેનવાસ બનાવવાની જરૂર છે, 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માં રેન્ડમ નંબર જનરેટર લખી શકો છો, પરંતુ આવા કોડ સંપૂર્ણપણે બિહામણું, વાંચી ન શકાય તેવા અને મુશ્કેલ દેખાશે. સમજવું!



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