Interessante programmeergeleiding vir ontwerpers-laat u prentjie loop (deel twee): 8 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Wiskunde lyk vir die meeste van julle nutteloos. Die mees gebruikte in ons daaglikse lewe is net optel, aftrek, vermenigvuldig en deel. Dit is egter heel anders as u met die program kan skep. Hoe meer jy weet, hoe meer wonderlike resultate kry jy.

Stap 1: Beweging en funksie

Laat ek u verskeie onbekende foto's wys om u smaak te stimuleer.

Wat is dit? Hou nou eers hierdie vraag en laasgenoemde ken u en gebruik dit.

In die laaste hoofstuk het ons die funksie -opstelling en funksietekening geleer, wat die statiese grafika dinamies kan laat word. Hierdie bewegingsformaat is egter net te eenvoudig. Ons gaan funksiekennis wat ons voorheen onder die knie het, gebruik om ons grafika met hul eie karakter uit te voer.

Hoeveel funksies kan u uit die foto's hierbo herken? Watter soort verhouding het hulle met beweging? Kom ons haal nou 'n kwadratiese funksie daaruit, voeg 'n paar parameters lukraak by en kyk wat sal gebeur. Byvoorbeeld, y = x² / 100.

Dit is hoe die funksiebeeld lyk. Kopieer die onderstaande kode.

[cceN_cpp tema = "dagbreek"] float x, y; ongeldige opstelling () {grootte (300, 300); agtergrond (0); x = 0; } leegte trek () {slag (255); beroertegewig (2); y = pow (x, 2) / 100,0; // Funksie pow sal terugkeer na die nde krag van die aanwysingsnommer. (x, 2) stel die vierkant van x voor. Die eerste parameter is die basisgetal en die tweede een is die indeks. punt (x, y); x ++; } [/cceN_cpp]

Lopende effek

Kies dan funksiesonde. Formule: y = 150 + sin (x).

Kopieer die volgende kode.

[cceN_cpp tema = "dagbreek"] float x, y; ongeldige opstelling () {grootte (300, 300); agtergrond (0); x = 0; } leegte trek () {y = hoogte/2 + sin (radiale (x)) * 150; // Funksie radiaal transformeer x in hoek. x ++; beroerte (255); beroertegewig (2); punt (x, y); } [/cceN_cpp]

Lopende effek

Dit is die grafiek wat ons kry nadat ons die kode gebruik het. En dit is hul bewegingspore. In vergelyking met die vorige, is die resultaat duidelik. Die funksiebeeld stem eintlik ooreen met die bewegingsbaan! Dit is redelik eenvoudig genoeg. U hoef net die waarde van x, y in koördinaat te vervang. Die vorige snit wat ons geteken het, is gelykstaande aan die grafiek van funksie y = x² / 100. Terwyl laasgenoemde baan gelyk is aan die grafiek van funksie y = 150 + sin (x). Maar in die program is die rigting van die y -as die teenoorgestelde. Dus, in vergelyking met die oorspronklike grafika, sal die snit onderstebo wees. Nou, ek dink u moet 'n gevoel hê dat 'n paar moeilike vrae wat lank in u kop spook, onmiddellik opgelos word. Dit is ongelooflik dat hierdie fantastiese funksies wat ons voorheen geleer het, gebruik kan word om grafiese beweging te beheer!

Stap 2: Skryffunksie

Ek het verskeie funksies wat gereeld gebruik word, hieronder gelys. Hoop dit kan ons help om funksies te vertaal in kode wat deur 'n rekenaar herken kan word.

Daarom word die volgende formule in die program soos volg geskryf:

y = x² → y = pow (x, 2) of y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

U kan ook 'n funksie lukraak in die program skryf en kyk hoe die bewegingsbaan daarvan sal lyk. Onthou om die omvang van die waardeveld en die definisie -domein in ag te neem, anders loop u grafika uit u skerm.

Trigonometriese funksie

Laat ons nou verder gaan na 'n paar geskrifte van trigonometriese funksies.

Ons moet daarop let dat die inset van die funksieparameter relatief tot die hoek in die program radiaal in die program aanvaar. So sal sin90 ° in sonde geskryf word (PI ／ 2). As u nie hierdie metode ken nie, kan u funksie randians gebruik om vooraf hoek in radiaal te omskep, en dan sin （radiale (90) te skryf.

Die gebruik van funksiegrade is relatief teenoorgesteld. Dit kan radiaal in hoek verander. Voer afdruk (grade (PI/2)) direk in die wysigingsgebied in en kyk wat u kry.

Stap 3: Beheer grafiese beweging met trigonometriese funksie

Hier kan u die werklike effek van grafiese beweging sien.

[cceN_cpp tema = "dagbreek"] float x, y; ongeldige opstelling () {grootte (700, 300); } leegte trek () {agtergrond (234, 113, 107); y = sin (radiale (x)) * 150 + 150; x ++; noStroke (); ellips (x, y, 50, 50); } [/cceN_cpp]

Funksiesonde is 'n periodieke funksie. Die minimum waarde is －1, en die maksimum waarde is 1. Die hoogte van die skerm is 300. Verwys na y = sin (radiale (x)) * 150 + 150, daarom sal die veranderingsbereik van die waarde y binne 0 goed beheer word tot 300.

Draaikring

Wel, ons het uiteindelik die belangrikste rol in hierdie hoofstuk bereik. Hoe om 'n sirkelpad in 'n program te teken? Hoe om funksies te gebruik om dit te vertoon? Laat ek u weer die twee foto's wys wat ons aan die begin van hierdie artikel gesien het.

Eintlik het hulle die verband tussen omtrekkoördinaat en trigonometriese funksie visueel blootgelê. Beweging in die foto's hierbo word aangedryf deur die voortdurend toenemende onafhanklike veranderlike θ. Links is die beeld van funksie sin en cos, en regs staan vir 'n punt wat sirkelbeweging doen nadat dit gekarteer is. Is dit nie baie slim nie? Dit is nie meer geheimsinnig nie. U kan kode gebruik om dit te besef.

'N Eenvoudige voorbeeld:

[cceN_cpp tema = "dagbreek"] float x, y, r, R, hoek; ongeldige opstelling () {grootte (300, 300); r = 20; // Sirkeldiameter R = 100; // Radius van bewegingspad x = 0; hoek = 0; y = hoogte/2; } leegte trek () {agtergrond (234, 113, 107); vertaal (breedte/2, hoogte/2); // Skuif die oorspronklike punt na die middel van die skerm. noStroke (); x = R * cos (hoek); y = R * sin (hoek); ellips (x, y, r, r); hoek += 0,05; } [/cceN_cpp]

Kyk! 'N Draaiende sirkel verskyn! Hier is die onafhanklike veranderlike nie meer in konstante toename nie, word die hoek hoek (gelyk aan θ in die prentjie). Dit staan vir hoek. Daaronder het xy 'n relatief vermenigvuldigde koëffisiënt R, wat lei tot die verlenging van die sirkelbewegingsradius (R is vir radius). As dit nie R wil vermenigvuldig nie, sal sy bewegingspad beperk word binne die reeks van -1 tot 1.

Waarom nie die toenemende x gebruik nie? Volgens die eienskap van funksie self het enige x binne definisie -domein die enigste y wat daarby pas. U kan dus in 'n vlak reghoekige dimensie -koördinaatstelsel nie 'n 'eenvoudige funksie' uitvind om 'n sirkel direk te teken nie. Dit wil sê, ons kan nie meer hierdie formaat gebruik nie.

y = (Die onbekende uitdrukking van x?);

x ＋＋;

Ons moet dus ons idee verander. Kies 'n ander hoek as onafhanklike veranderlike, en gebruik dan funksie sin en cos om dit te omskep in horisontale en vertikale koördinaat.

x = R * cos (hoek);

y = R * sin (hoek);

hoek += 0,05;

Sommige van u wonder miskien waarom dit die pad van sirkelbeweging kan vertoon. Volgens die definisie van trigonometriese funksie, kan ons maklik redeneer dat die funksie die verhouding van die teenoorgestelde kant tot die skuinssy verlaag; funksie cos is die verhouding van aangrensend tot skuinssy. Maak nie saak waar die sirkelpunt is nie, r (radius) sal onveranderd bly. Daarom kan ons die uitdrukking van x -koördinaat en y -koördinaat afsluit.

Omdat dit nie 'n wiskundige leiding is nie, gaan ek ophou om meer kennis oor trigonometriese funksie aan u te vertoon. As u dit wil weet of u dit net vergeet, kan u dit self weer probeer hersien.

Dit is natuurlik reg as u dit nie ten volle kan verstaan nie. U hoef net te weet hoe u dit kan gebruik om 'n sirkel te teken. Dit is ook 'n soort 'programmeringsidee'. Later sal ons dikwels 'n paar van die bestaande modules wat deur ander gemaak is, gebruik om 'n sekere soort funksie te verwesenlik. Moenie jouself dwing om dit in detail te ken nie.

Funksie sin en cos is egter algemeen. As u 'n hoër vlak wil skep, is dit beter om dit deeglik te ken. As hierdie vraag self meer wiskundige kennis kan aanleer, wag daar meer interessante dinge om uit te vind.

Dit is prente wat nou verwant is aan die trigonometriese funksie.

Stap 4: Bewegingskoördinaatstelsel

Die vorige effekte handel oor grafiese koördinaatveranderings. Die koördinaatstelsel self is staties. Eintlik kan ons die koördinaatbeweging maak om die bewegingseffek te besef. Dit is net soos die mense op die strand na die ander mense in die boot kyk. Vir mense op die boot is die boot staties. Maar wat as die boot self beweeg, dan beweeg mense in die boot daarmee. Eersgenoemde sake handel oor “mense wat op die boot hardloop”. Die boot beweeg eintlik nie. Die volgende is 'n paar algemene funksies vir die verandering van die koördinaatstelsel.

Funksie vertaal

Funksie vertaal, waaroor ons voorheen gepraat het, word gebruik om die koördinaatstelsel van die grafiese horisontaal te skuif.

Roep formaat op:

vertaal (a, b)

Die eerste parameter staan vir skuif na die positiewe rigting van x -as vir 'n pixel. Die tweede parameter staan vir skuif na die positiewe rigting van y -as vir b pixels.

Vergelyk die twee kode en probeer om 'n verskil te vind. (Om die kode te vereenvoudig, kan ons die funksiegrootte uitvee; die breedte en hoogte van die skerm is standaard 100.)

Voordat ons gebruik:

ellips (0, 0, 20, 20);

Nadat ons gebruik het:

vertaal (50, 50);

ellips (0, 0, 20, 20);

Funksie draai

Roep formaat op:

draai (a)

Dit word gebruik om die koördinaatstelsel te draai. As die parameter positief is, kies dit die oorspronklike punt as middelpunt en draai dit met die kloksgewys rigting. Die parameterinvoer is dieselfde met die trigonometriese funksie om radiaan te gebruik.

Voor gebruik:

ellips (50, 50, 20, 20);

Na gebruik:

draai (radiale (30));

ellips (50, 50, 20, 20);

Die effek in die program is om die sirkel 30 grade om die koördinaat middelpunt te laat draai.

Funksieskaal

Roep formaat op:

skaal (a)

Hierdie funksie kan die koördinaatstelsel uitzoomen. Die waarde is vir skaal. As die parameter groter as 1 is, zoom dan in; zoom uit, as dit laer as 1 is.

Voor gebruik:

ellips (0, 0, 20, 20);

Na gebruik:

skaal (4);

ellips (0, 0, 20, 20);

Die sirkel in die prent hierbo word versterk tot die vier keer van die oorspronklike grootte. U kan ook twee parameters gebruik om afsonderlik in x -as- en y -as -aanwysings uit te zoem.

skaal (4, 2);

ellips (0, 0, 20, 20);

Superposisie van transformasiefunksie

Hier gaan superposisie oor veranderings relatief tot die huidige koördinaatstelsel. Met ander woorde, effekte kan bo -oor gelê word.

vertaal (40, 10);

vertaal (10, 40);

ellips (0, 0, 20, 20);

Die finale effek daarvan sal gelyk wees aan

vertaal (50, 50);

ellips (0, 0, 20, 20);

Dieselfde om funksie te draai

draai (radiale (10));

draai (radiale (20));

ellips (50, 50, 20, 20);

Gelyk aan

draai (radiale (30));

ellips (50, 50, 20, 20);

Beide funksie skaal en draai middelpunt op die oorspronklike punt om te skaal en draai. As ons die rotasie -effek met 'n sentrale posisie op (50, 50) wil kry, moet ons andersom dink. Beweeg eers die oorspronklike punt na die posisie van (50, 50), en voeg dan die roterende transformasiefunksie by. Uiteindelik kan u grafika op die oorspronklike punt geverf word.

Voor gebruik:

ellips (50, 50, 50, 20);

Na gebruik:

vertaal (50, 50);

draai (radiale (45));

ellips (0, 0, 50, 20); // Om die draaihoek te sien verander, het ons 'n ovaal gemaak.

Dit lyk dalk kronkelend. U moet net meer oefen, dan sal u dit verstaan. (U kan ook die volgorde van funksie -translate en -draai probeer verander om die verskil te sien.)

Horisontale beweging en sirkelbeweging

In die volgende gevalle gaan ons die bewegingseffek besef deur die koördinaatstelsel te verander. Terselfdertyd wil ek u vra om na die voorbeeld van die vorige hoofstuk te verwys. Meestal vind u 'n heeltemal ander metode om 'n sekere soort effek te besef.

Stap 5: Horisontale beweging

[cceN_cpp tema = "dagbreek"]

int x, y; ongeldige opstelling () {grootte (300, 300); x = 0; y = hoogte/2; } leegte trek () {agtergrond (234, 113, 107); noStroke (); vertaal (x, y); ellips (0, 0, 50, 50); x ++; } [/cceN_cpp]

Die sirkelkoördinaat word nie verander nie, maar die koördinaatstelsel daarvan word verander.

Draai beweging

[cceN_cpp tema = "dagbreek"] vlot r, R, hoek; ongeldige opstelling () {grootte (300, 300); r = 20; // Sirkelafmeting R = 100; // Bewegingsradius} leegte trek () {agtergrond (234, 113, 107); vertaal (breedte/2, hoogte/2); // Skuif die oorspronklike punt na die skermsentrum. draai (hoek); noStroke (); ellips (0, R, r, r); hoek += 0,05; } [/cceN_cpp]

Is dit nie baie duideliker en eenvoudiger as die trigonometriese funksie nie? U het miskien 'n vraag hier. Neem die roterende kode as voorbeeld. Dit is duidelik dat bogenoemde transformasiefunksie relatief is en superimposisie moontlik maak. As ons translate (breedte/2, hoogte/2) in funksieteken skryf, beteken dit nie dat elke keer dat funksietrekking vir een keer werk nie, die koördinaatstelsel 'n afstand sal beweeg in die regte onderste rigting vanaf die oorspronklike basis? Dit sal redelik nie vir altyd in die middel van die skerm bly nie.

U kan op hierdie manier verstaan. Sodra die kode in funksietrekking 'n bewerking van bo na onder voltooi het, sal die koördinaatstelsel by die tweede bewerking terugkeer na die oorspronklike status. Die oorspronklike punt van die koördinaatstelsel sal standaard terugkeer na die linker boonste hoek. As ons dus die koördinaatstelsel deurlopend wil laat verander, sal die hoekparameters binne die funksie draai, die waarde daarvan voortdurend verhoog.

Toegang tot koördinaatstatus

Soms wil ons nie hê dat die verandering van die koördinaatstelselstatus gebaseer is op die vorige nie. Op die oomblik moet ons funksie pushMatrix en popMatrix gebruik. Die twee funksies verskyn gewoonlik in pare. Funksie pushMatrix is voor popMatrix. Hulle kan nie net gebruik word nie, anders loop dit verkeerd.

Voorbeeld:

[cceN_cpp tema = "dagbreek"] pushMatrix (); // Store koördinaatstelsel translate (50, 50); ellips (0, 0, 20, 20); popMatrix (); // Lees die status van die koördinaatstelsel reg (0, 0, 20, 20); [/cceN_cpp]

In hierdie voorbeeld, voordat ons translate (50, 50) gebruik, gebruik ons die funksie pushMatrix.om die huidige status van die koördinaatstelsel op te slaan. Dit is terselfdertyd die aanvanklike status. Nadat ons 'n sirkel geteken het en popMatrix geïmplementeer het, kom dit terug na hierdie status. Op die oomblik, implementeer funksie reg, sal u agterkom dat dit nie die invloed van funksie vertaal het nie; dit teken eerder 'n vierkant in die linker boonste hoek van die oorspronklike punt.

Boonop laat funksie pushMatrix en popMatrix nes toe.

Byvoorbeeld

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Om die verhouding intuïtief aan te toon, kies ons kondenseerformaat.

Gekombineerde beweging of beweging in beweging?

Nou begin die tweede golf van belangrike deel. Probeer net om vorentoe te stoot. Voorheen het ons 'n metafoor van boot en mense gebruik. Het u ooit daaraan gedink, as ons die mense sowel as die boot laat beweeg, watter gevoel sal die mense op die strand hê?

Net soos kombineer horisontale beweging met roterende beweging van die koördinaatstelsel. Die punt hier is eintlik om slegs in 'n rigting te beweeg.

[cceN_cpp tema = "dagbreek"] int x, y; dryfhoek; ongeldige opstelling () {grootte (300, 300); agtergrond (234, 113, 107); noStroke (); x = 0; // As die aanvanklike waarde van x 0 is, kan ons hierdie sin van die kode verwaarloos. By die verklaring van veranderlike is die standaardwaarde 0. y = 0; // Dieselfde as bogenoemde. hoek = 0; // Dieselfde as bogenoemde. } leemte trek () {hoek += 0,25; y--; vertaal (breedte/2, hoogte/2); pushMatrix (); draai (hoek); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

En daar is sirkelbeweging en koördinaatstelselskaling.

[cceN_cpp tema = "dagbreek"] float x, y, hoek; ongeldige opstelling () {grootte (300, 300); agtergrond (234, 113, 107); noStroke (); } leegte trek () {hoek += 0,01; x = sin (hoek) * 100; y = cos (hoek) * 100; vertaal (breedte / 2, hoogte / 2); pushMatrix (); skaal (1 + 0,1 * sin (hoek * 10)); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Moenie daardeur bedrieg word nie! Die sirkelpunt doen eintlik sirkelbeweging. Dit is nie moeilik om te verstaan as ons dit vergelyk met skaal met 'n videokamera nie. 'N Videokamera beweeg voortdurend voor of agter, skiet 'n punt in sirkelbeweging.

Verras? Dit is eenvoudige basiese funksies. Maar met verskillende kombinasies kan ons soveel verskillende effekte skep. Tot dusver stop my blootstelling om ruimte te spaar vir u verkenning.

Stap 6: Omvattende gebruik

Dit kom binnekort tot 'n einde vir hierdie hoofstuk. In die laaste twee hoofstukke het ek die basiese metode van grafiese beweging bekendgestel. Ek glo dat u moontlik 'n dieper begrip daarvoor het in vergelyking met u aanvanklike idees. Laastens, hier is 'n volledige voorbeeld vir u verwysing.

[cceN_cpp tema = "dagbreek"] float x1, y1, x2, y2, r, R; dryfhoek1, hoek2; ongeldige opstelling () {grootte (300, 300); r = 12; R = 120; hoek1 = 0; hoek2 = PI/4; } leegte trek () {agtergrond (234, 113, 107); noStroke (); vertaal (breedte / 2, hoogte / 2); hoek1 += 0,02; hoek2 += 0,06; x1 = R *sin (hoek1); y1 = R* cos (hoek1); x2 = R/2 *sin (hoek2); y2 = R/2 *cos (hoek2); ellips (x1, y1, r/2, r/2); ellips (x2, y2, r, r); ellips (-x1, -y1, r/2, r/2); ellips (-x2, -y2, r, r); ellips (x1, -y1, r/2, r/2); ellips (x2, -y2, r, r); ellips (-x1, y1, r/2, r/2); ellips (-x2, y2, r, r); beroerte (255); beroertegewig (3); reël (x1, y1, x2, y2); reël (-x1, -y1, -x2, -y2); reël (x1, -y1, x2, -y2); reël (-x1, y1, -x2, y2); } [/cceN_cpp]

Hierdie voorbeeld bevat geen kennis wat verder is as ons vorige hoofstuk nie.

Vir watter punte pas? Watter lyne pas by? Ek kan dit ook nie agterkom nie. Maar ek onthou dat dit afkomstig is van 'n klein gedeelte kode.

Dit is die aard van sy beweging. Die res lyne is net 'n spieël -effek. As u hierdie riglyne volg, kan u 'n bygewerkte weergawe maak en 'n kontroleerder by u grafika voeg om u grafiese bewegingsstatus intyds te verander.

Die interessante punt van programmering lê daarin dat u regulasies kan ontwerp of kombineer. Wat die finale program sal wees, hang egter alles af van u vermoë. Ontwerpers het gewoonlik 'n kragtige grafiese verbeelding. U kan 'n prentjie in u kop skets en dit dan probeer omskakel in kode. U kan ook na gelang van die kode en regulasies, ontwerpfunksies en veranderlikes begin. Onthou verwerking is u skets en kode is u kwaste! Spuit u idees vrylik!

Stap 7: EINDE

Laastens in ons hoofstuk, laat ons terugkeer na 'n vraag wat ons sedert die begin lank bewaar het. Wat is die nut daarvan om soveel moeite te spandeer om 'n prentjie met die program te maak? Nadat u hierdie hoofstuk geleer het, sal u agterkom dat daar soveel speelmetodes is wat u kan ondersoek.

[cceN_cpp tema = "dagbreek"] vlot voorkopX, oorD, oogD, gesigD; ongeldige opstelling () {grootte (500, 500); } leegte trek () {agtergrond (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; gesig D = 300; beroertegewig (8); ellips (175, 220, earD, earD); ellips (breedte - 175, 220, earD, earD); rect (100, 100, faceD, faceD); lyn (browX, 160, 220, 240); lyn (width-browX, 160, width-220, 240); fill (random (255), random (255), random (255)); ellips (175, 220, eyeD, eyeD); ellips (breedte-175, 220, eyeD, eyeD); vul (255); punt (breedte/2, hoogte/2); driehoek (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, breedte - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Is dit nie magies vir dinamiese grafika nie? Hier wys ek u nie te veel gevalle nie. U kan moontlik 'n baie beter effek as ek ontwerp. Die voordeel van teken met 'n program is dat u met elke pixel kan speel. Aangesien u grafika nie 'n bitmap is nie, is elke sleutelpunt op u grafika beheerbaar. Dit kan sekere effekte besef wat ander sagteware nie kan besef nie.

As u 'n hart het wat alles wil breek en weer wil kombineer, sal die studieprogram u baie help om hierdie idee te vervul.

Hierdie artikel kom van ontwerper Wenzy.

Stap 8: Relatiewe lesings:

Interessante programmeergeleiding vir ontwerper-verwerking van eerste aanraking

Interessante programmeergeleiding vir ontwerpers-skep u eerste verwerkingsprogram

Interessante programmeergeleiding vir ontwerper - laat u prentjie aan die gang wees (deel een)

As u enige vrae het, kan u 'n e -pos stuur na [email protected].

Hierdie artikel is afkomstig van: