Interessante programmeerrichtlijnen voor ontwerpers - Laat uw foto draaien (deel twee): 8 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Wiskunde lijkt voor de meesten van jullie nutteloos. De meest gebruikte methode in ons dagelijks leven is gewoon optellen, aftrekken, vermenigvuldigen en delen. Het is echter heel anders als je kunt maken met een programma. Hoe meer je weet, hoe meer prachtige resultaten je krijgt.

Stap 1: Beweging & Functie

Ik zal u enkele onbekende foto's laten zien om uw smaak te stimuleren.

Wat is dit? Houd deze vraag nu eerst en als laatste zul je hem kennen en gebruiken.

In het laatste hoofdstuk hebben we het instellen van functies en het tekenen van functies geleerd, waardoor de statische afbeeldingen dynamisch kunnen worden. Dit bewegingsformaat is echter gewoon te eenvoudig. We gaan functiekennis gebruiken die we eerder onder de knie hebben om onze grafische afbeeldingen met hun eigen karakter uit te voeren.

Hoeveel functies herken je van bovenstaande afbeeldingen? Wat voor soort relatie hebben ze met beweging? Laten we er nu een kwadratische functie uit halen, willekeurig enkele parameters toevoegen en kijken wat er zal gebeuren. Bijvoorbeeld y = x²/100.

Zo ziet de functieafbeelding eruit. Kopieer onderstaande code.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); achtergrond(0); x = 0; } void draw(){ stroke(255); slagGewicht(2); y = pow(x, 2) / 100,0; // Functie pow keert terug naar de n-de macht van het aanduidingsnummer. (x, 2) staat voor het kwadraat van x. De eerste parameter is het grondtal en de tweede is de index. punt (x, y); x++; } [/cceN_cpp]

Hardloopeffect

Kies vervolgens de functie sin. Formule: y = 150 + sin(x).

Kopieer de volgende code.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); achtergrond(0); x = 0; } void draw(){ y = hoogte/2 + sin(radialen(x)) * 150; // Functie radiaal transformeert x naar hoek. x++; slag (255); slagGewicht(2); punt (x, y); } [/cceN_cpp]

Hardloopeffect

Dit is de afbeelding die we krijgen na het uitvoeren van de code. En dat zijn hun bewegingssporen. In vergelijking met de vorige is het resultaat duidelijk. Functieafbeelding komt eigenlijk overeen met het bewegingsspoor! Het is vrij eenvoudig genoeg. Je hoeft alleen de waarde van x, y in de coördinaat te vervangen. Het eerste spoor dat we tekenden is gelijk aan de afbeelding van functie y = x²/100. Terwijl het laatste spoor gelijk is aan de afbeelding van functie y = 150 + sin(x). Maar in het programma is de richting van de y-as tegengesteld. Dus, in vergelijking met de originele afbeelding, zal de baan ondersteboven staan. Nu, ik denk dat je het gevoel moet hebben dat sommige moeilijke vragen die lange tijd in je hoofd rondspoken, onmiddellijk worden opgelost. Het is verbazingwekkend dat deze fantastische functies die we eerder hebben geleerd, kunnen worden gebruikt om grafische bewegingen te besturen!

Stap 2: Functie schrijven

Hieronder heb ik een aantal veelgebruikte functies opgesomd. Ik hoop dat deze ons kunnen helpen om functies te vertalen naar code die door de computer kan worden herkend.

Daarom wordt de onderstaande formule in het programma als volgt geschreven:

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)

Je kunt ook willekeurig een functie in het programma schrijven en kijken hoe het bewegingsspoor eruit zal zien. Denk eraan om rekening te houden met het bereik van het waardeveld en het definitiedomein, anders raakt uw afbeelding uit uw scherm.

Trigonometrische functie

Laten we nu verder gaan om enkele geschriften van trigonometrische functies te leren kennen.

We moeten opletten dat in het programma de invoer van de functieparameter met betrekking tot hoek radiaal aanneemt. Dus sin90° wordt geschreven in sin(PI／2). Als u niet bekend bent met deze methode, kunt u functierandianen gebruiken om hoek vooraf in radialen om te zetten, en vervolgens sin-radialen (90) schrijven.

Het gebruik van functiegraden is relatief tegenovergesteld. Het kan radiaal in hoek omzetten. Voer print (graden (PI/2)) rechtstreeks in het bewerkingsgebied in en kijk wat u krijgt.

Stap 3: grafische beweging regelen met trigonometrische functie

Hier is een geval voor u om het daadwerkelijke effect van grafische beweging te zien.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(700, 300); } void draw(){ background(234, 113, 107); y = sin(radialen(x)) * 150 + 150; x++; geen slag(); ellips(x, y, 50, 50); } [/cceN_cpp]

Functie sin is een periodieke functie. De minimumwaarde is -1 en de maximumwaarde is 1. De hoogte van het scherm is 300. Verwezen naar y = sin(radialen(x)) * 150 + 150, daarom zal het veranderingsbereik van de waarde y goed worden gecontroleerd binnen 0 tot 300.

Draaiende cirkel

Welnu, we zijn eindelijk bij het belangrijkste deel van dit hoofdstuk beland. Hoe teken je een cirkelpad in een programma? Hoe functies te gebruiken om het weer te geven? Laat me je de twee foto's die we aan het begin van dit artikel zagen nogmaals laten zien.

Eigenlijk hebben ze de relatie tussen omtrekcoördinaat en trigonometrische functie visueel blootgelegd. Beweging in de bovenstaande afbeeldingen wordt aangedreven door de constant toenemende onafhankelijke variabele θ. Links is het beeld van de functie sin en co, en rechts staat voor een punt dat cirkelvormige bewegingen maakt nadat het in kaart is gebracht. Is het niet erg slim? Het is niet meer mysterieus. U kunt code gebruiken om het te realiseren.

Een eenvoudig voorbeeld:

[cceN_cpp theme="dawn"] zweven x, y, r, R, hoek; void setup(){ size(300, 300); r = 20; // Cirkeldiameter R = 100; // Straal van bewegingspad x = 0; hoek = 0; y = hoogte/2; } void draw(){ background(234, 113, 107); vertalen (breedte/2, hoogte/2); //Verplaats het originele punt naar het midden van het scherm. geen slag(); x = R * cos(hoek); y = R * sin(hoek); ellips(x, y, r, r); hoek += 0,05; } [/cceN_cpp]

Kijk! Er verschijnt een draaiende cirkel! Hier is de onafhankelijke variabele niet meer in constante toename bit geworden hoek (gelijk aan θ in de afbeelding). Het staat voor hoek. Daaronder heeft xy een relatief vermenigvuldigde coëfficiënt R, wat leidt tot de uitbreiding van de cirkelbewegingsradius (R is voor straal). Als het niet is om R te vermenigvuldigen, wordt het bewegingspad beperkt binnen het bereik van -1 tot 1.

Waarom niet de toenemende x gebruiken? Volgens de eigenschap van de functie zelf, heeft elke x binnen het definitiedomein de enige y die ermee overeenkomt. Dus in een rechthoekig coördinatensysteem voor rechthoekige afmetingen, kunt u geen "eenvoudige functie" vinden om een cirkel rechtstreeks te tekenen. Dat wil zeggen dat we dit formaat niet meer kunnen gebruiken.

y = (De onbekende uitdrukking van x?);

x＋＋;

Dus we moeten ons idee veranderen. Kies een andere hoek als onafhankelijke variabele en gebruik vervolgens de functie sin en co om deze om te zetten in horizontale en verticale coördinaten.

x = R * cos(hoek);

y = R * sin(hoek);

hoek += 0,05;

Sommigen van jullie vragen zich misschien af waarom het het pad van cirkelbeweging kan weergeven. Volgens de definitie van de trigonometrische functie kunnen we die functie gemakkelijk beredeneren in de verhouding van de andere kant tot de hypotenusa; functie cos is de verhouding van aangrenzend aan hypotenusa. Waar het cirkelpunt ook is, r (straal) blijft ongewijzigd. Daarom kunnen we de uitdrukking van x-coördinaat en y-coördinaat concluderen.

Omdat dit geen wiskundige richtlijn is, stop ik hier met het tonen van meer kennis over trigonometrische functies. Als je het wilt weten of je bent het gewoon vergeten, kun je proberen het zelf nog eens te bekijken.

Het is natuurlijk niet erg als je het niet helemaal kunt begrijpen. Je hoeft alleen maar te weten hoe je het moet gebruiken om een cirkel te tekenen. Dit is ook een soort "programmeer-idee". Later zullen we vaak een beroep doen op enkele van de bestaande modules die door anderen zijn gemaakt om een bepaald soort functie te realiseren. Dwing jezelf niet om het in detail te weten.

Functie sin en co is echter gebruikelijk. Als je creatie op een hoger niveau wilt maken, kun je maar beter proberen het grondig te kennen. Als deze vraag zelf ons kan drijven om meer wiskundige kennis te leren, zijn er meer interessante dingen die op je wachten om uit te graven.

Dit zijn afbeeldingen die nauw verwant zijn aan de trigonometrische functie.

Stap 4: Bewegingscoördinatensysteem

De vorige effecten hebben alles te maken met grafische coördinaatveranderingen. Het coördinatensysteem zelf is statisch. Eigenlijk kunnen we de coördinaat verplaatsen om een bewegingseffect te realiseren. Dit is net zoals de mensen op het strand naar de andere mensen in de boot kijken. Voor mensen op de boot is de boot statisch. Maar wat als de boot zelf beweegt, dan bewegen de mensen in de boot mee. De eerste gevallen gaan allemaal over "mensen die op de boot rennen". Eigenlijk beweegt de boot niet. Hieronder volgen enkele veelvoorkomende functies voor het wijzigen van het coördinatensysteem.

Functie vertalen

Functie vertalen, waar we het eerder over hebben gehad, wordt gebruikt om het coördinatensysteem van de afbeelding horizontaal te verplaatsen.

Oproep formaat:

vertalen (a, b)

De eerste parameter staat voor verplaatsen naar de positieve richting van x-as voor pixels. De tweede parameter staat voor verplaatsen naar de positieve richting van de y-as voor b pixels.

Vergelijk de twee codes en probeer een verschil te vinden. (Om de code te vereenvoudigen, kunnen we de functiegrootte verwijderen, de schermbreedte en -hoogte zijn standaard 100.)

Voordat we gebruiken:

ellips (0, 0, 20, 20);

Nadat we gebruiken:

vertalen(50, 50);

ellips (0, 0, 20, 20);

Functie roteren:

Oproep formaat:

roteren (a)

Het wordt gebruikt om het coördinatensysteem te roteren. Als de parameter positief is, kiest deze het oorspronkelijke punt als middelpunt en draait met de klok mee. De parameterinvoer is hetzelfde met de trigonometrische functie om radiaal te gebruiken.

Voor gebruik:

ellips(50, 50, 20, 20);

Na gebruik:

roteren(radialen(30));

ellips(50, 50, 20, 20);

Het effect in het programma is dat de cirkel 30 graden met de klok mee rond het middelpunt van de coördinaat draait.

Functieschaal:

Oproep formaat:

schaal (a)

Deze functie kan het coördinatensysteem uitzoomen. De waarde is voor schalen. Wanneer de parameter groter is dan 1, zoom dan in; als het lager is dan 1, zoom dan uit.

Voor gebruik:

ellips (0, 0, 20, 20);

Na gebruik:

schaal (4);

ellips (0, 0, 20, 20);

De cirkel in de bovenstaande afbeelding is vergroot tot het viervoudige van de oorspronkelijke grootte. U kunt ook twee parameters gebruiken om afzonderlijk in x-as en y-as richtingen uit te zoomen.

schaal (4, 2);

ellips (0, 0, 20, 20);

Superpositie van transformatiefunctie

Superpositie heeft hier alles te maken met veranderingen ten opzichte van het huidige coördinatensysteem. Met andere woorden, effecten kunnen over elkaar heen worden gelegd.

vertalen(40, 10);

vertalen (10, 40);

ellips (0, 0, 20, 20);

Het uiteindelijke effect zal gelijk zijn aan

vertalen(50, 50);

ellips (0, 0, 20, 20);

Zelfde als functie roteren

roteren(radialen(10));

roteren (radialen (20));

ellips(50, 50, 20, 20);

Is gelijk aan

roteren(radialen(30));

ellips(50, 50, 20, 20);

Beide functies schalen en roteren midden op het oorspronkelijke punt om te schalen en te roteren. Als we het rotatie-effect willen krijgen met een centrale positie op (50, 50), moeten we andersom denken. Verplaats eerst het oorspronkelijke punt naar de positie van (50, 50) en voeg vervolgens de roterende transformatiefunctie toe. Maak tot slot uw afbeelding op het oorspronkelijke punt geschilderd.

Voor gebruik:

ellips(50, 50, 50, 20);

Na gebruik:

vertalen(50, 50);

roteren (radialen(45));

ellips (0, 0, 50, 20); //Om de rotatiehoek te zien veranderen, hebben we een ovaal gemaakt.

Het lijkt misschien verdraaid. Je moet gewoon meer oefenen dan je het begrijpt. (Je kunt ook proberen de volgorde van de functie vertalen en roteren te veranderen om het verschil te zien.)

Horizontale beweging en cirkelvormige beweging

In de volgende gevallen gaan we een bewegingseffect realiseren door het coördinatensysteem te veranderen. Tegelijkertijd zou ik u willen vragen naar het voorbeeld van het vorige hoofdstuk te verwijzen. Meestal zul je merken dat je, om een bepaald soort effect te bereiken, een totaal andere methode kunt gebruiken.

Stap 5: Horizontale beweging

[cceN_cpp thema="dageraad"]

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

De cirkelcoördinaat wordt niet gewijzigd, maar het coördinatensysteem wordt gewijzigd.

Draai beweging

[cceN_cpp theme="dawn"] float r, R, hoek; void setup(){ size(300, 300); r = 20; // Cirkelafmeting R = 100; //Radius van bewegingsspoor} void draw () { background (234, 113, 107); vertalen (breedte/2, hoogte/2); // Verplaats het originele punt naar het midden van het scherm. roteren (hoek); geen slag(); ellips(0, R, r, r); hoek += 0,05; } [/cceN_cpp]

Is het niet veel duidelijker en eenvoudiger dan de trigonometrische functie? Misschien heb je hier een vraag. Neem als voorbeeld roterende code. Het is duidelijk dat de bovengenoemde transformatiefunctie relatief is en superpositie mogelijk maakt. Als we vertalen (breedte/2, hoogte/2) in functietekenen schrijven, betekent dit dan niet dat elke keer dat de functietekenfunctie een keer werkt, het coördinatensysteem een afstand zal verplaatsen in de juiste onderste richting van de originele basis? Redelijkerwijs zal het niet voor altijd in het midden van het scherm blijven.

Op deze manier kun je het begrijpen. Zodra de code in functie tekenen een bewerking van boven naar beneden heeft voltooid, keert het coördinatensysteem bij de tweede bewerking terug naar de oorspronkelijke status. Het oorspronkelijke punt van het coördinatensysteem wordt standaard ingesteld om terug te keren naar de linkerbovenhoek. Dus als we het coördinatensysteem continu willen laten veranderen, zullen de hoekparameters binnen functierotatie constant hun waarde verhogen.

Toegang tot coördinaatstatus

Soms willen we niet dat de wijziging van de status van het coördinatensysteem gebaseerd is op de vorige. Op dit moment moeten we de functie pushMatrix en popMatrix gebruiken. De twee functies verschijnen meestal in paar. Functie pushMatrix komt voor popMatrix. Ze kunnen niet alleen worden gebruikt, anders gaat het mis.

Voorbeeld:

[cceN_cpp theme="dawn"] pushMatrix(); // Bewaar coördinatensysteemstatus translate (50, 50); ellips (0, 0, 20, 20); popMatrix(); // Lees de status van het coördinatensysteem rect (0, 0, 20, 20); [/cceN_cpp]

In dit voorbeeld gebruiken we, voordat we translate(50, 50) gebruiken, de functie pushMatrix.om de huidige status van het coördinatensysteem op te slaan. Dit is tegelijkertijd de initiële status. Nadat we een cirkel hebben getekend en vervolgens popMatrix hebben geïmplementeerd, keert het terug naar deze status. Op dit moment, implementeer functie rect, je zult merken dat het niet de invloed heeft gehad van functie vertalen, maar tekent het een vierkant in de linker bovenhoek van het originele punt.

Bovendien laten de functies pushMatrix en popMatrix nesten toe.

Bijvoorbeeld

pushMatrix();

pushMatrix();

popMatrix();

popMatrix();

Om de relatie intuïtief te laten zien, kiezen we voor een compact formaat.

Gecombineerde beweging of beweging in beweging?

Nu begint de tweede golf van belangrijk onderdeel. Probeer gewoon vooruit te komen. Eerder hebben we een metafoor van boot en mensen gebruikt. Heb je er ooit over nagedacht wat voor gevoel de mensen op het strand zullen hebben als we zowel de mensen als de boot laten bewegen?

Zoals horizontale beweging combineren met roterende beweging van het coördinatensysteem. Het punt hier is eigenlijk om alleen in een richting te bewegen.

[cceN_cpp thema="dageraad"] int x, y; zweefhoek; void setup(){ size(300, 300); achtergrond (234, 113, 107); geen slag(); x = 0; //Als de beginwaarde van x 0 is, kunnen we deze codezin verwaarlozen. Bij het declareren van een variabele is de standaardwaarde 0. y = 0; // Hetzelfde als het bovenstaande. hoek = 0; // Hetzelfde als het bovenstaande. } void draw(){ hoek += 0.25; y--; vertalen (breedte/2, hoogte/2); pushMatrix(); roteren (hoek); ellips(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

En er zijn cirkelvormige bewegingen en schalen van het coördinatensysteem.

[cceN_cpp theme="dawn"] zweven x, y, hoek; void setup(){ size(300, 300); achtergrond (234, 113, 107); geen slag(); } void draw(){ hoek += 0.01; x = sin (hoek) * 100; y = cos(hoek) * 100; vertalen (breedte / 2, hoogte / 2); pushMatrix(); schaal (1 + 0.1 * sin (hoek * 10)); ellips(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

Laat je er niet door bedriegen! Het cirkelpunt doet eigenlijk een cirkelvormige beweging. Het is niet moeilijk te begrijpen als we het vergelijken met schalen met een videocamera. Een videocamera die constant naar voren of naar achteren beweegt, fotografeert een punt in cirkelvormige beweging.

Verrast? Dit zijn eenvoudige basisfuncties. Maar met verschillende combinaties kunnen we zoveel verschillende effecten creëren. Tot nu toe stopt mijn blootstelling om wat ruimte over te houden voor jouw verkenning.

Stap 6: Uitgebreid gebruik

Voor dit hoofdstuk komt er binnenkort een einde aan. In de laatste twee hoofdstukken heb ik de basismethode van grafische beweging geïntroduceerd. Ik denk dat je er misschien meer begrip voor hebt dan je aanvankelijke ideeën. Als laatste, hier is een voltooid voorbeeld voor uw referentie.

[cceN_cpp theme="dawn"] float x1, y1, x2, y2, r, R; zweefhoek1, hoek2; void setup(){ size(300, 300); r = 12; R = 120; hoek1 = 0; hoek2 = PI/4; } void draw(){ background(234, 113, 107); geen slag(); vertalen (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); slag (255); slagGewicht (3); lijn (x1, y1, x2, y2); lijn (-x1, -y1, -x2, -y2); lijn(x1, -y1, x2, -y2); lijn (-x1, y1, -x2, y2); } [/cceN_cpp]

Dit voorbeeld bevat geen kennis die verder gaat dan ons vorige hoofdstuk.

Voor welke punten komt overeen? Welke lijnen komen overeen? Ik kan er ook niet achter komen. Maar ik herinner me dat het voortkomt uit een klein stukje code.

Dit is de aard van zijn beweging. De restlijnen zijn slechts spiegeleffect. Als u deze richtlijnen blijft volgen, kunt u een bijgewerkte versie maken en een controller aan uw afbeelding toevoegen om uw grafische bewegingsstatus in realtime te wijzigen.

Het interessante van programmeren is dat je regelgeving kunt ontwerpen of combineren. Wat het uiteindelijke programma zal zijn, hangt echter allemaal af van je vaardigheden. Meestal hebben ontwerpers een krachtige grafische verbeelding. Je kunt een afbeelding in je hoofd schetsen en deze vervolgens in code proberen te vertalen. U kunt ook uitgaan van de code en voorschriften zelf, functies en variabelen naar believen ontwerpen. Onthoud dat Processing je schets is en code je penselen! Spuit uw ideeën vrijuit!

Stap 7: EINDE

Laten we als laatste in ons hoofdstuk teruggaan naar een vraag die we sinds het begin lange tijd hebben bewaard. Wat heeft het voor zin om zoveel moeite te doen om een foto te maken met een programma? Nadat je dit hoofdstuk hebt geleerd, zul je merken dat er zoveel speelmethoden wachten om door jou te worden ontdekt.

[cceN_cpp theme="dawn"] float browX, earD, eyeD, faceD; void setup(){ size(500, 500); } void draw(){ background(200, 0, 0); browX = 150 + sin (frameCount / 30,0) *20; earD = 180 + sin (frameCount / 10.0) *20; eyeD = 60 + sin(frameCount/30.0) *50; gezichtD = 300; slaggewicht(8); ellips(175, 220, earD, earD); ellips (breedte - 175, 220, earD, earD); rect(100, 100, faceD, faceD); lijn (browX, 160, 220, 240); lijn (breedte-browX, 160, breedte-220, 240); fill(willekeurig(255), willekeurig(255), willekeurig(255)); ellips(175, 220, eyeD, eyeD); ellips (breedte-175, 220, eyeD, eyeD); vullen (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 het geen magie voor dynamische graphics? Hier laat ik je niet te veel gevallen zien. Jij kunt misschien een veel beter effect ontwerpen dan ik. Het voordeel van tekenen met programma is dat je met elke pixel kunt spelen. Aangezien uw afbeelding geen bitmap is, is elk belangrijk punt op uw afbeelding bestuurbaar. Het kan sommige effecten realiseren die andere software niet kan realiseren.

Als je een hart hebt dat alles wil breken en het opnieuw wil combineren, zal het studieprogramma je enorm helpen om dit idee te vervullen.

Dit artikel is afkomstig van ontwerper Wenzy.

Stap 8: Relatieve metingen:

Interessante programmeerrichtlijnen voor ontwerpers - Eerste aanraking verwerken

Interessante programmeerrichtlijnen voor ontwerpers - maak uw eerste verwerkingsprogramma

Interessante programmeerrichtlijnen voor ontwerpers - laat uw foto draaien (deel één)

Als je vragen hebt, kun je een e-mail sturen naar [email protected].

Dit artikel is afkomstig van: