Inhoudsopgave:

Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één): 16 stappen
Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één): 16 stappen

Video: Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één): 16 stappen

Video: Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één): 16 stappen
Video: Fata Morgana, Making of: De Verboden Stad | Deel 1 2024, Juli-
Anonim
Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één)
Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel één)

Loop! Loop! Loop!

Programmeren is niet zo moeilijk. Het belangrijkste punt is om je ritme te vinden en het een voor een te doen.

Voordat u dit hoofdstuk leest, hoop ik dat u al bekend bent met de basisfunctie voor tekenen, anders wordt u duizelig en verward door twee grote hoofdfuncties: instellen en tekenen.

Omdat we bewegende beelden willen maken, moeten we weten hoe animatie tot stand komt.

De bovenstaande afbeelding lijkt behoorlijk aantrekkelijk en onthult visueel het implementatieprincipe van animatie.

Animatie is magisch. Het is een magie over visueel bedrog. Echter, in deze informatie explodeerde, video overstromingen leeftijd, we zijn er al aan gewend. Het zal weinig mensen verbazen dat het geweldig is om de animatie te kunnen zien.

Hetzelfde principe kan worden toegepast op tekenanimatie met programma. We moeten bedenken hoe we verschillende afbeeldingen in elk frame kunnen tekenen, en het programma zal automatisch pagina's omslaan terwijl we een voltooide animatie in ons hoofd aanvullen. In het volgende hoofdstuk zullen we het hebben over het realiseren van grafische basisbewegingen. Daarvoor moeten we enige basiskennis over variabelen kennen.

Stap 1: Variabele

Variabele is de container voor gegevens. Het kan herhaaldelijk binnen een programma worden gebruikt.

Bijvoorbeeld:

[cceN_cpp thema = "dageraad"] grootte (500, 500); ellips(100, 250, 50, 50); ellips(200, 250, 50, 50); ellips(300, 250, 50, 50); ellips(400, 250, 50, 50);

[/cceN_cpp]

Dit gedeelte van de code heeft geen variabelen gebruikt. Het tekent vier cirkels in het scherm. We kunnen zien dat ze dezelfde breedte en hoogte hebben. Nu het hetzelfde is, kunnen we, om herhaalde gegevensinvoer te minimaliseren, een teken definiëren om het weer te geven. Dit teken is variabel.

Hier is de code na het toevoegen van een variabele:

[cceN_cpp thema = "dageraad"] grootte (500, 500); int a = 50; ellips(100, 250, a, a); ellips(200, 250, a, a); ellips(300, 250, a, a); ellips(400, 250, a, a);

[/cceN_cpp]

We krijgen een totaal hetzelfde resultaat!

Omdat we variabele a hebben gedefinieerd, kunnen we parameters gemakkelijk wijzigen. Als we a=50 veranderen in a=100, dan worden de breedte en hoogte van alle cirkels gelijkmatig 100. We hoeven de parameters dus niet één voor één te wijzigen. Variabel is echt een goede uitvinding.

Stap 2: Het creëren van variabelen

Voordat we variabele gebruiken, moeten we een statement maken en het gegevenstype ervan aangeven.

int ik;

ik 50;

De eerste zin van de code heeft een statement gemaakt voor een variabele i. int is een symbool dat voornamelijk wordt gebruikt om variabelen te declareren. Bij het declareren zal het een ruimte in het computergeheugen sparen, wat gelijk staat aan het genereren van een "box", speciaal gebruikt om integer-gegevens te herstellen. De tweede zin staat voor het uitvoeren van opdracht 50 door variabele i. Na de implementatie van deze zin worden gegevens stabiel opgeslagen in variabele i. Of je kunt luier zijn om de bovenstaande twee zinnen in één te combineren en de opdracht te voltooien terwijl je een verklaring aflegt.

int i = 50;

Het is relatief vrij om een variabele een naam te geven. Maar soms moeten we ergens op letten.

Stap 3: Regelgeving van variabele een naam geven

• Het moet de combinatie zijn van alfabet en onderstrepen. Het kan een symbool of een woord zijn.

• Hoofdlettergevoelig. Naam en naam kunnen voor verschillende variabelen staan.

• Probeer het zo gemakkelijk mogelijk te benoemen zodat u het in één oogopslag kunt begrijpen. Het beginteken moet een alfabet zijn in plaats van een cijfer of een speciaal teken.

• Geen trefwoorden zoals int, float

De volgende zijn enkele verkeerde uitspraken.

int $a;

int 89b;

Dit zijn de juiste uitspraken:

int r;

int super_24;

int openTheDoor;

Stap 4: Variabel type

Behalve voor het declareren van integer data, kunnen we voor decimale data (ook wel floating point data genoemd) declareren met het sleutelwoord float.

vlotter b = 0,5

We moeten rekening houden met wat voor soort gegevenstype we voor onze verklaring hebben gebruikt. Als we het sleutelwoord int hebben gebruikt, kan de laatste opdracht i=0.5 of iets dergelijks niet schrijven, anders wordt het programma een fout. Maar als we het tegenovergestelde schrijven, is het goed. Float i=5 is bijvoorbeeld de juiste grammatica, maar het programma zal het herkennen als decimaal getal.

Sommige variabelen zijn al per systeem gedefinieerd. We hoeven ze niet zelf aan te geven. Net als de eerder genoemde "breedte, hoogte", krijgt deze automatisch de breedte en hoogte van het computerscherm. Zo'n hoge frequentie in gebruik dat de ontwerper het direct als een standaardvariabele definieert om het voor ons gemakkelijker te maken om te gebruiken.

Stap 5: Operator

De volgende zijn exploitanten van verwerking:

+ plus

- min

* vermenigvuldigen

verdeling

% Restmodulus

U moet bekend zijn met al deze operatoren behalve %. Het lijkt nogal raar omdat het resultaat rest is. 9%3 is 0. Terwijl 9%5 4 is.

Operators kunnen worden gebruikt tussen toewijzingen en variabelen.

[cceN_cpp thema="dageraad"] int a = 1; //declare integer variabele a, toewijzing is 1. int b = 2; //Declareer integer-variabele b, toewijzing is 2. int c; //Declareer integer variabele c. c = een + b; // Plus twee toewijzing en wijs het resultaat toe aan c. afdrukken (c); //Uitvoervariabele c.

[/cceN_cpp]

Stap 6: Operatie Resultaat:

Het uitvoerresultaat wordt niet weergegeven in het venster, maar in de console onderaan.

De schrijfwijze van de vierde regel ziet er nogal vreemd uit. Maar het is een veelgebruikt formaat dat vaak wordt gebruikt tijdens computeropdrachten. De linkerkant van het gelijk-symbool moet de laatste toegewezen variabele zijn, terwijl de rechterkant het bewerkingsproces moet zijn.

De afdrukfunctie in de vijfde regel kan variabelen in de console afdrukken, wat vaak wordt gebruikt om de toestand van de gegevensuitvoer te testen.

Stap 7: Bedieningsregeling

Een lastig punt in Processing is dat we het type variabele moeten verduidelijken. We moeten speciale aandacht besteden aan het proces van floating point number en integer type.

afdrukken(6 / 5); // resultaat 1

Een bewerking tussen gehele getallen zal een nieuw geheel getal hebben. 6 gedeeld door 5 is 1,2. Maar het resultaat van de programma-uitvoer is 1. Dit is in strijd met onze intuïtie. Programma zal niet omgaan met ronde maar het nummer achter de komma verwijderen.

afdrukken (6.0 / 5.0); // resultaat 1.2

Bewerking tussen drijvende komma's resulteert in een nieuw getal met drijvende komma. Als het werkelijke resultaat 1.2 is, zal het uitvoerresultaat van het programma hetzelfde zijn.

afdrukken (6 / 5.0); // resultaat 1.2

afdrukken (6.0 / 5); // resultaat 1.2

Ten slotte is het de combinatie van integer en floating point number. Het uiteindelijke uitvoerresultaat is 1.2.

• Eigenlijk moet je er rekening mee houden dat het doel van dit regelgevingsontwerp is om de nauwkeurigheid van gegevens niet te verliezen. Dus als een element een getal met drijvende komma is, is het resultaat ook een getal met drijvende komma.

Stap 8: Setup-functie & Draw-functie

Eerder hebben we gesproken over een stapel grondkennis. Nu komen we eindelijk om iets interessants te spelen. Functie-instellingen en tekenen zijn gelijk aan de belangrijkste functies van verwerking. Deze twee functies zijn heel bijzonder. Het kan de procedure van het programma controleren. Relatief gecompliceerde programma's zullen deze twee functies bevatten omdat ze het basisframe voor het programma vormen. Formaat:

ongeldige setup(){

}

nietig tekenen(){

}

Het speciale gebruik maakt hun aanroepformaat anders dan de andere functies. We moeten "void" toevoegen voor de functienaam, wat staat voor no "returned value". Achter de functienaam moeten we haakjes en accolades toevoegen.

[cceN_cpp theme="dawn"] void setup(){ print(1); } void draw(){ print(2); } [/cceN_cpp]

Laten we een voorbeeld bekijken:

Wanneer u op de bedieningsknop drukt, zal de console eerst "1" uitvoeren en vervolgens constant "2" uitvoeren totdat u de stopknop hebt ingedrukt of het venster hebt gesloten.

Code tussen haakjes in de setup-functie wordt slechts één keer geïmplementeerd. Terwijl code binnen de functie-trekking constant in omloop is (standaardimplementatie 60 keer/seconde).

Vanwege dit karakter wordt setup meestal gebruikt om omgevingseigenschappen te initialiseren, zoals de breedte en hoogte van het scherm, de achtergrondkleur en de toewijzing van allerlei variabelen. Terwijl we vaak tekenfuncties in functie tekenen plaatsen om continu veranderende afbeeldingen te genereren.

Stap 9: Cirkel in horizontale beweging

Met functie tekenen kunnen we beginnen met het maken van onze animaties. De methode voor het schrijven van een animatie-effect door Processing is behoorlijk "onhandig". Het heeft geen bestaand commando. Wijs bijvoorbeeld een bepaalde vorm aan om kromlijnig te doen.

Deze details moeten we zelf bepalen. Je moet het programma vertellen wat voor soort afbeeldingen elk frame absoluut nodig heeft.

Schrijf de volgende code erin (laten we het nu met de hand doen):

[cceN_cpp thema="dageraad"] int x; int y; void setup(){ size(300, 300); x = 0; y = hoogte/2; } void draw(){ background(234, 113, 107); geen slag(); ellips(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Dit codegedeelte geeft een bewegende cirkel weer. De eerder gedeclareerde variabele x, y wordt gebruikt om de positie van de coördinaat op te slaan. De toewijzingen worden uitgevoerd in functie-instellingen. De sleutelcode is de volgende binnen functie tekenen:

x = x + 1

Zie het niet als wiskundige vergelijking, anders wordt het heel vreemd. Hier is "=" een symbool voor toewijzing. Het staat voor het plaatsen van de juiste getallen in de linkervariabele. Stel dat x 50 is, als de code eenmaal actief is, is de rechterkant van "=" gelijk aan 50+1, d.w.z. 51. Het uiteindelijke resultaat wordt toegewezen aan variabele x. Dus de waarde van x wordt 51.

Volg de procedure van het programma, elke keer dat de functie tekenen een keer werkt, zal de waarde van x toenemen 1. Dus elke keer dat we tekenen, zal de cirkel een pixelrichting horizontaal naar rechts verplaatsen, vergeleken met het vorige frame. Daarom wordt de afbeelding bewegend.

• Om code beter leesbaar te maken, moeten we een bepaalde ruimte vrijhouden voor elke regel code tussen accolades. En het moet zo goed mogelijk op elkaar zijn afgestemd. Druk op TAB of meerdere lege ruimtes, het kan intrekken.

• Het symbool van spatie en regeleinde in programma heeft geen invloed op het programma. Dus het is goed als we er een meer of minder typen.

Hier is nog een eenvoudigere manier om het uit te drukken. Om de variabele cirkel automatisch met 1 te laten toenemen, moeten we deze in het volgende formaat schrijven.

cirkel = cirkel +1

Best onhandig! Als de naam van de variabele langer is, moeten we meer woorden typen. Dus onze luie voorgangers bedenken een idee als dit.

cirkel

Is het niet heel eenvoudig? Het betekent automatisch 1 verhogen. Vergelijkbaar met dit, is er - -, wat betekent dat 1 automatisch wordt verlaagd.

Maar als we hopen dat de hoeveelheid automatische verhoging een ander getal is, zoals 2, moeten we een andere uitdrukking proberen.

cirkel += 2

Dit is gelijk aan

cirkel = cirkel + 2

Evenzo is er -=, /=, *=.

Stap 10: Bewegingsrichting

In welke richting de afbeelding beweegt, hangt af van hoe u uw coördinaat wijzigt. Als het wordt gewijzigd in y=y+1, zal de cirkel naar beneden bewegen. Als zowel x als y 1 toenemen, zal de cirkel rechtsonder naar beneden bewegen. Als we het als een minteken schrijven, zal het in de tegenovergestelde richting bewegen.

[cceN_cpp thema="dageraad"] int x, y; //Kan meerdere variabelen tegelijkertijd declareren, gebruik komma's om te scheiden. void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); geen slag(); ellips(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Bewegingssnelheid

Herinner je je de standaard 60 frames per seconde binnen functie tekenen? Volgens deze snelheid zal de cirkel hierboven 60 pixels per seconde naar rechts verplaatsen.

Als we de grafische bewegingssnelheid willen wijzigen, zijn er twee methoden: de ene is om de x-waarde elke keer te verhogen sinds deze wordt gewijzigd.

x=x+10

Het heeft de snelheid 10 keer verbeterd in vergelijking met de originele!

De andere methode is om de frequentie van het verversen van het canvas te wijzigen. frame rate()

Deze functie kan de uitzendfrequentie van het canvas wijzigen. Schrijf frameRate (10) in de functie-instellingen, het zal de oorspronkelijke 60 frames per seconde veranderen in 10 frames per seconde. De snelheid wordt 6 keer vertraagd dan voorheen.

Stap 11: Achtergrond over het hoofd gezien

Alle voorgaande voorbeelden schrijven achtergrond in functie draw. Heb je er ooit aan gedacht om het in de functie-instellingen te schrijven? Zal het verschillen hebben? Laten we nu het voorbeeld van horizontale beweging bijwerken.

[cceN_cpp thema="dageraad"] int x, y; void setup(){ size(300, 300); achtergrond (234, 113, 107); x = 0; y = hoogte/2; } void draw(){ noStroke(); ellips(x, y, 50, 50); x += 1; } [/cceN_cpp]

Wat is er gebeurd? Misschien kan het de reden voor de productie van het probleem niet goed begrijpen. Verwijder de functie noStroke, voeg opnieuw een beroerte toe en bekijk het bewegingspad van de cirkel.

Oh, het is omdat de eerder gemaakte cirkel niet is verwijderd! Omdat het instellen van functies slechts één keer werkt, zal het, als we er een achtergrond boven schrijven, de achtergrond slechts één keer vullen en daarna heeft het geen effect meer. Functie-achtergrond is als een verfemmer. Eenmaal gebruikt, bedekt het alle inhoud op het canvas in plaats van alleen een achtergrondkleur in te stellen. We schrijven het voordat we een functie tekenen, zodat het vorige frame wordt bedekt elke keer dat we een nieuw patroon maken. Daarom kan de cirkel lopen zoals we hadden verwacht. Behalve het onthouden van het gebruik van elke functie, moeten we nadenken over de positie van de code. Veel tijd, de opwaartse of neerwaartse lijn voor de codea en om het binnen of buiten een accolade te schrijven, zal heel verschillende effecten creëren. De richting van de code is tweedimensionaal. Als er een bug verschijnt, moeten we in deze twee dimensies kalibreren.

• Deze niet herhaalde tekenmethode kan bij correct gebruik een heel speciaal effect creëren. U kunt de volgende code kopiëren en proberen.

[cceN_cpp theme="dawn"] void setup(){ size(400, 400); } void draw(){ ellipse(width/2-mouseX, height/2-mouseX, mouseY, mouseY); ellips (breedte/2-muisX, hoogte/2+muisX, muisY, muisY); ellips (breedte/2+muisX, hoogte/2-muisX, muisY, muisY); ellips (breedte/2+muisX, hoogte/2+muisX, muisY, muisY); } [/cceN_cpp]

Hier hebben we de magische variabele mouseX en mouseY gebruikt. Later zullen we er uitgebreid over praten.

Stap 12: Cirkel schudden

Wat als ik de bewegingsrichting van de cirkel onregelmatig wil maken? Met een slimme functie willekeurig kun je dit effect ook realiseren. Willekeurig is een veelgebruikte functie. Het kan worden gebruikt om een willekeurige functie te genereren. Het is als een ongebaande geest. Eenmaal gerelateerd aan variabelen, kun je je niet voorstellen wat de volgende stap zal zijn.

Invoke-indeling:

willekeurig (hoog)

Hoog staat voor de willekeurige bovengrens en de standaard ondergrens is 0. Bijvoorbeeld willekeurig (10). Het zal willekeurig een getal van 0 tot 10 produceren (0 is inbegrepen, maar 10 is niet inbegrepen).

willekeurig (laag, hoog)

Als we twee parameters instellen, keert het terug naar de willekeurige waarde ertussen. Bijvoorbeeld willekeurig (5, 10). Het zal willekeurig een getal van 5 tot 10 produceren (5 is inbegrepen, maar 10 is niet inbegrepen).

Voorbeeld:

[cceN_cpp theme="dawn"] float x;

x = willekeurig (50, 100);

afdrukken (x); [/cceN_cpp]

Elke keer dat we het programma uitvoeren, zal de console verschillende waarden uitvoeren.

• Opmerking: Waarden gecreëerd door de functie willekeurig behoren tot het type met drijvende komma (type decimaal getal). Als we een waarde aan een integer-variabele willen toewijzen, moeten we deze transformeren met de functie int(). De transformatie houdt zich niet aan de ronde, maar verwijdert het decimale deel direct. Dus de uitvoer van int (willekeurig (5)), heeft slechts 5 mogelijkheden: 0, 1, 2, 3, 4.

Nadat we vertrouwd zijn geraakt met het gebruik van de functie willekeurig, kunnen we direct in het onderstaande geval komen.

[cceN_cpp thema="dageraad"] int x, y; void setup(){ size(300, 300); x = breedte/2; y = hoogte/2; } void draw(){ background(234, 113, 107); geen slag(); x += int(willekeurig(-5, 5)); y += int(willekeurig(-5, 5)); ellips(x, y, 50, 50); }

[/cceN_cpp]

De eerder toegevoegde coördinaatwaarden staan vast. Alleen als we een willekeurige waarde verhogen, zal de cirkel in een onbepaalde richting bewegen. Met het grotere willekeurige bereik schudt het vaker. Aangezien de waardeverandering tussen frames wordt gestuiterd, zal de beweging niet meer vloeiend zijn. Terwijl het eerste frame zich op (150, 150) bevindt, zal het laatste frame binnen een oogwenk naar de positie van (170, 170) gaan.

Stap 13: Cirkel migreren

Migreren cirkel

Zal het een vloeiende beweging creëren? Functieruis kan ons helpen. Het heeft een beter ritme dan standaard willekeurig. En de willekeurig gegenereerde willekeurige getallen zijn continu.

Invoke-indeling:

lawaai

Functieruis kan het uitvoerbereik niet definiëren. Het programma bepaalt dat het alleen getallen met drijvende komma kan genereren van 0 tot 1 en vaste invoer kan alleen een vaste uitvoer hebben.

[cceN_cpp theme="dawn"] float x = ruis(5); zweven y = ruis (5); afdrukken (x, y); [/cceN_cpp]

Omdat de bovenstaande invoerparameters 5 zijn, zijn de uitvoerresultaten hetzelfde. Hoe kunt u het resultaat dan wijzigen? Het antwoord is om de invoerparameters dynamisch te wijzigen. Eigenlijk kunnen we ruis beschouwen als een grenzeloze voicetrack, de invoerparameters zijn net als "de huidige tijd". Als de parameterinvoer continu is, is de uitvoer ook continu.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(700, 100); x = 0; achtergrond(0); } void draw(){ x += 1; y = ruis (frameCount/100.0) * 100; geen slag(); ellips(x, y, 2, 2); }

[/cceN_cpp]

In dit geval tekenen we het veranderingspad van Y zodat we functieruis beter kunnen begrijpen.

• Hiervan zal de variabele frameCount het huidige frame verkrijgen. Anders dan de breedte, hoogte in de vorige, is het stabiel zonder enige verandering. Bovendien begint het te stijgen vanaf 0. Als we het begrijpen aan de hand van onze eerste geanimeerde afbeelding, toont het de pagina waar we naartoe zijn gegaan (in plaats van de tijdsconceptie in het programma).

• frameCount is een integer-variabele. Gedeeld door een andere integer-variabele, zal het programma het resultaat standaard verwerken tot een integer. Om de nauwkeurigheid van het resultaat te verbeteren, moeten we 100 wijzigen in 100,0. Gedeeld door een getal met drijvende komma, krijgen we ook een getal met drijvende komma.

• Om de Y-as van 0 naar 100 te veranderen, moeten we het resultaat van ruis met 100 vermenigvuldigen. Zo kunnen we het willekeurige waardebereik regelen.

Sommigen van jullie die goed kunnen denken, vragen zich misschien af: "Waarom moeten we frameCount delen door 100? Is het niet oké om frameCount rechtstreeks te schrijven?" Natuurlijk kan je dat! Maar hier, om de kenmerken van functieruis beter weer te geven, vertragen we de "omroepsnelheid". Het onderstaande voorbeeld toont de veranderingen van de uitvoerwaarde onder verschillende veranderingssnelheden.

[cceN_cpp theme="dawn"] float x, y1, y2, y3, y4, y5; void setup(){ size(700, 500); x = 0; achtergrond(0); } void draw(){ x += 1; y1 = ruis (frameCount) * 100; y2 = ruis (frameCount/10,0) * 100; y3 = ruis(frameCount/100.0)*100; y4 = ruis (frameCount / 1000.0) * 100; y5 = ruis (frameCount/10000,0) * 100; geen slag(); ellips(x, y1, 2, 2); ellips(x, y2+100, 2, 2); ellips(x, y3+200, 2, 2); ellips(x, y4+300, 2, 2); ellips(x, y5+400, 2, 2); slag (80); lijn (0, 100, breedte, 100); lijn (0, 200, breedte, 200); lijn (0, 300, breedte, 300); lijn (0, 400, breedte, 400); }

[/cceN_cpp]

U kunt de veranderende parameters binnen functieruis beschouwen als een voortgangsbalk. Wijzig de parameter is alsof we de voortgangsbalk verplaatsen. Dus wanneer het veranderende bereik van deze "stemtrack" groter is, zullen de continue kenmerken van de uitvoerwaarde voor en achter zwakker zijn. (We kunnen ons voorstellen wat er zal gebeuren als we een muziekstuk of een video uitzenden met 2 keer snelheid, 5 keer snelheid, 20 keer snelheid). Wanneer de scope groter is dan een bepaalde waarde, dan heeft het geen groot verschil om willekeurig te functioneren bij waardegeneratie.

Als u alle bovenstaande voorbeelden kunt begrijpen, zult u het gevoel hebben dat niets eenvoudiger is om een migrerende cirkel te tekenen. Je kunt ook de interne principes begrijpen.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); x = 0; } void draw(){ background(234, 113, 107); x = ruis (frameCount/100.0 + 100)*300; y = ruis(frameCount/100.0)*300; geen slag(); ellips(x, y, 50, 50); }

[/cceN_cpp]

Nu is de beweging interessanter, net als een roterende gyro.

• De reden waarom variabele x binnen functieruis plus 100 moet zijn, is om ze voor een afstand te scheiden. Als de parameters van xy binnen functieruis hetzelfde zijn of heel dicht bij elkaar liggen, zal de verandering van x, y-coördinaat hetzelfde benaderen. Dit is om de beweging veel meer willekeurig te maken.

Stap 14: Cirkel verplaatst door muis

Vervolgens komen we uiteindelijk bij twee variabelen die ik het leukst vind: mouseX en mouseY. Bij de eerste aanblik van de twee concepties glinsteren mijn ogen van het licht. Omdat het de meest directe manier is om met afbeeldingen om te gaan. We kunnen er veel interessante programma's mee maken.

De zaak is vrij eenvoudig:

[cceN_cpp thema="dageraad"] int x, y; void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); geen slag(); x = muisX; y = muisY; ellips(x, y, 50, 50); }

[/cceN_cpp]

mouseX kan de x-coördinaat van de muis verkrijgen, terwijl mouseY de y-coördinaat kan verkrijgen.

• Laten we proberen het positieve en negatieve symbool te veranderen, of mouseX en mouseY om te wisselen.

Stap 15: Einde

Met deze bekende commando's kunt u mogelijk de beweging van afbeeldingen uitvoeren. Met de inhoud van het laatste hoofdstuk, gebruik je fantasie goed, je kunt veel interessante geanimeerde effecten creëren.

In ons volgende hoofdstuk kunnen we meer overvloedige voorbeelden zien. Tegelijkertijd zullen we wiskundige functies gebruiken en deze combineren met grafische beweging.

Dit artikel is afkomstig van ontwerper Wenzy.

Stap 16: Relatieve metingen:

Interessante programmeerrichtlijnen voor ontwerpers - Eerste aanraking verwerken

Interessante programmeerrichtlijnen voor ontwerpers - maak uw eerste verwerkingsprogramma

Dit artikel is afkomstig van:

Als je hulp nodig hebt, kun je contact opnemen met: [email protected].

Aanbevolen: