OK.
Dus zoals ik al zei we gaan om een ​​snelle oefening te doen en het gaat om zo ver als het eindproduct gaat heel underwhelming, maar het is een goede gewoon om wat oefenen met Paperchase krijgen.
Dus eigenlijk heel simpel 4 ish regels code die je nodig hebt.
Het enige dat ik wil is een raster van cirkels en de exacte afmetingen niet uit wat ik hier heb is een cirkel te beginnen bij nul nul en elke 100 pixels.
Ik ben een andere cirkel tekenen.
Ik denk dat straal is 10 helemaal tot aan 1000.
Dus dit is 1000 1000 hier.
Dus het maakt eigenlijk niet uit gewoon 100 ish cirkels op het scherm uiteraard zonder dat deze handmatig degene die het doet op een tijdstip dat is het punt.
Dus hoe kun je dat doen.
Dat is aan jou.
Je moet om erachter te komen hoe je die coördinaten x en y-coördinaten die worden steeds meer genereren.
En voel je vrij om ze allemaal paars of elke kleur.
Het is niet echt het punt of ze een andere vorm.
Dus probeer het doen van een vierkant of een rechthoek of probeer iets meer plezier waar u de kleuren op een helling, zodat als X groter krijgt de kleur roder wordt.
Ik herinner me nog goed denk ik niet echt herinneren Ik heb niet verteld u dit, maar dat papier JSE u kunt RGV kleuren doen hexadecimaal.
Zo kunt u een kleur waar je het verhogen van de rode component of dat groene component te genereren.
Maar op zijn minst Ik ben gewoon op zoek naar een raster van cirkels ten minste 100.
En als je wilt.
Je zou ook kunnen willekeurig hen, zodat ze all over the place.
Ik wil gewoon dat je heel wat rondjes te krijgen op de pagina.
OK.
Dus neem een ​​moment pauzeren van een video.
Probeer deze op uw eigen.
Ik stel voor dat je de weg kwijt.
De documenten zijn een beetje.
Probeer wat dingen uit.
Kijk naar de voorbeelden en kom dan terug en we zullen meer dan oplossing gaan.
Okee.
Grote.
Dus dit is wat ik eerder had waar ik ben gebleven en ik ga om zich te ontdoen van bijna alle van deze code.
Dus we niet meer willen die lijn.
Elk van die.
Laten we kijken.
Wij lossen dat gigantische cirkel, die we niet echt nodig hebben.
We willen dat de code te houden, zodat we weten hoe we een kring te maken, maar we willen niet een gigantische één.
Dus wat we hier willen doen is gebruik maken van een lus.
Dus we willen een lus te gebruiken om hier en dan een cirkel een cirkel hier cirkel hier te maken zal in principe 10 of 100 toe te voegen daadwerkelijk aan de x-coördinaat, zodat we kunnen beginnen met dat te doen.
Dus we een lus maken en we beginnen bij nul lussen te ver.
Gelijk is aan nul.
Itis minder leuk en dit kan van alles zijn.
Ik deed het als 1000.
En eigenlijk is het laat me X, dus het is duidelijker.
En elke keer door.
In plaats van het doen van X plus plus die we konden gebruiken om een ​​cirkel elke pixel zal sprongen van 100 te maken en dan is alles wat zal doen, is deze code te kopiëren en maak een cirkel, maar we zullen het veranderen een beetje als we vertrokken.
Dit zou ons 10 rondjes op precies hetzelfde punt hetzelfde ras.
Dus het is niet wat we willen laten we het doen X komma en y zal worden vastgesteld als 0.
Dus dat moet ons een lijn van cirkels allemaal met een y-coördinaat van het nulpunt en radius zal 10 te maken.
En als we een kijkje nemen op die vernieuwen je hier kunt zien nemen krijgen we 10 cirkels gaan over elke 100 pixels krijgen we een nieuwe.
Dus wat we willen doen is in principe dat nog eens te herhalen.
Dus hebben we onze eerste keer door.
We moeten één van deze rijen 10 keer naar beneden gaat.
En de beste manier om dat te doen is met een andere lus.
Dus we willen nemen wat we hier hebben en herhaal dit alles, zodat we nog een lus te maken.
En deze keer zullen we het doen voor de y-coördinaat.
Dus waarom zouden opgaan en vertellen 1000 y plus gelijk is aan 100 ook.
En ik zal u door precies hoe dit werkt.
Ik denk dat geneste lussen kan een beetje verwarrend zijn als we verander gewoon 0 zijn y Nu dat is eigenlijk alles wat we moeten doen.
Dus laten we vernieuwen je zien als we dat net.
Dus niet de meest spannende ding, maar we heel snel een bos van cirkels toegevoegd.
Dus laten we een kijkje nemen op dit sub-lus.
Dus trok ik een beetje diagram de eerste keer door X begint bij nul.
Dus doe ik het als dit waar we x en y.
OK.
Laat ik het zo profiteren X begint bij nul.
En dan, terwijl X is 0 we doen dit loop woord Y begint bij nul.
Gewoon zo.
En dan de volgende keer via deze y lus X is nog steeds nul.
Maar deze keer waarom is 100.
Omdat we voegen honderd en dan x is nog steeds nul is en Y is 200.
Dan is X nul.
Daarom is 300 enzovoort.
Ik zal een dot dot dot te doen en vertellen X is nul.
Waarom is 1000 eigenlijk, omdat we minder dan zal alleen maar tot 900 en dan verandert X naar 100 en dan verandert Y op om terug te gaan naar nul.
Dus eigenlijk voor elke x we ​​het genereren van 10 j's.
Dus dat eindigt met ons te hebben van 100 of 100 iteraties.
Dus het is een beetje verwarrend, maar het helpt als je door deze X begint bij nul y begint bij nul maar dan X blijft op 0 en y gaat tot 100 dan 200.
En we tekenen van een cirkel aan elk van deze intel.
Waarom zet en dan gaat stappen en X.
OK.
Dus soort in mijn mening verwarrend.
Laatste ding dat we kunnen doen is een kleine verandering.
We hebben niet echt nodig om deze op te slaan in een variabele elke keer.
We kunnen dit alleen veranderen als deze en het is iets efficiënter, waar we een variabele niet constant zijn opnieuw toewijzen omdat we nooit meer iets doet met die kringen.
We zijn net waardoor ze een keer.
Dus in plaats van elke keer herschrijven en opnieuw initialiseren van een variabele door de lus maken we gewoon een nieuwe kring geef het een opvulkleur van paars of laten we het doen geel sparen refresh.
Daar gaan we.
OK.
Dus dit was een beetje een afleiding hier, maar nog steeds erg belangrijk.
Opnieuw is de motivatie achter je aan het doen dat.
Hopelijk heb je het deed.
Maar de motivatie was voor u om gewoon de praktijk combineren javascript vaardigheden loops met papier ja en te zien dat alles wat je hoeft te doen is bellen u weet dat een korte lijn van de code en het zou een bos van code uit te voeren achter de schermen om daadwerkelijk die kring OK in de volgende video ook daadwerkelijk te krijgen op met de show en gaan echt werken aan onze pad aanval kloon.