Share
Processing is een van de krachtigste bibliotheken die tegenwoordig beschikbaar is voor het maken van visuele algoritmische kunstwerken, zowel 2D als 3D. Het is een open source, gebaseerd op Java, en wordt geleverd met een grote verscheidenheid aan functies die gericht zijn op het maken van tekenen en schilderen met code, zowel leuk als gemakkelijk.
Door de kernbibliotheek van Processing in uw Android-apps te gebruiken, kunt u hoogwaardige grafische afbeeldingen en animaties maken zonder te maken te hebben met de OpenGL- of Canvas-API's van Android. Meestal hoeft u zich niet eens bezig te houden met taken op een laag niveau, zoals het beheren van threads, het maken van render-loops of het bijhouden van framesnelheden.
In deze zelfstudie laat ik u zien hoe u Verwerking toevoegt aan een Android-app en introduceert u enkele van de handigste functies.
Verwerking wordt geleverd met een eigen geïntegreerde ontwikkelomgeving, die kan worden gebruikt om Android-apps te maken. Als u echter al een ontwikkelaar van Android-apps bent, weet ik zeker dat u in plaats daarvan Android Studio wilt gebruiken. Dus ga je gang en download de nieuwste versie van de Android-modus van Processing.
Binnen het ZIP-bestand dat je hebt gedownload, zul je een bestand vinden met de naam processing-core.zip. Pak het uit en hernoem het naar verwerkingsinstructie core.jar via de opdrachtregel of de bestandsverkenner van uw besturingssysteem.
Voeg ten slotte het JAR-bestand toe als een van de afhankelijkheden van uw Android Studio-project door het in de. Te plaatsen app module libs map.
U hebt nu alles wat u nodig hebt om Verwerking te gaan gebruiken.
Bijna alle kernfunctionaliteit van Processing is beschikbaar via de PApplet klasse, die in wezen dient als een canvas waarop je kunt tekenen. Door het uit te breiden, krijgt u eenvoudig toegang tot alle methoden die het te bieden heeft.
val myCanvas = object: PApplet () // Meer code hier
Als u het canvas wilt configureren, moet u het overschrijven Instellingen () methode. Binnen de methode kunt u twee belangrijke configuratiegegevens opgeven: de gewenste afmetingen van het canvas en of het de 2D- of de 3D-renderingengine moet gebruiken. Laten we voor nu het canvas zo groot maken als het scherm van het apparaat en de standaard 2D-renderingengine gebruiken. Om dit te doen, kunt u bellen met volledig scherm() snelkoppeling methode.
instellingen voor plezier opheffen () fullScreen ()
De Instellingen () methode is een speciale methode die alleen nodig is als u de eigen IDE van Processing niet gebruikt. Ik stel voor dat je er geen code meer aan toevoegt.
Als u variabelen wilt initialiseren of tekengerelateerde parameters wilt wijzigen, zoals de achtergrondkleur van het canvas of het aantal frames dat per seconde moet worden weergegeven, moet u de opstelling() methode in plaats daarvan. Met de volgende code ziet u bijvoorbeeld hoe u de achtergrond() methode om de achtergrondkleur van het canvas in rood te veranderen:
Accentsconagua
override fun setup () background (Color.parseColor ("# FF8A80")) // Materiaal Rood A100Omdat het canvas nog steeds geen deel uitmaakt van een activiteit, kunt u het niet zien wanneer u uw app uitvoert. Als u het canvas wilt weergeven, moet u er eerst een container voor maken in het XML-bestand van de lay-out van uw activiteit. EEN LinearLayout widget of een FrameLayout widget kan de container zijn.
EEN PApplet instantie kan niet rechtstreeks aan de door u gemaakte container worden toegevoegd. Je moet het in een PFragment instance eerst en dan de setview () methode van de PFragment bijvoorbeeld om het te associëren met de container. De volgende code laat zien hoe je dit doet:
// Plaats canvas binnen fragment val myFragment = PFragment (myCanvas) // Weergave fragment myFragment.setView (canvas_container, this)
Als u de app uitvoert, ziet u op dit moment een leeg canvas dat het volledige scherm van uw apparaat beslaat.
Nu je het canvas kunt zien, laten we beginnen met tekenen. Als u binnen het tekenpapier wilt tekenen, moet u de instelling overschrijven trek() methode van de PApplet subklasse die u eerder hebt gemaakt.
negeer leuke trekking () // Meer code hier
Het lijkt misschien niet meteen voor de hand liggend, maar Processing probeert standaard de trek() methode zo vaak als 60 keer per seconde, zolang het canvas wordt weergegeven. Dat betekent dat u eenvoudig zowel stilstaande afbeeldingen als animaties kunt maken.
Verwerking heeft een aantal intuïtief benoemde methoden waarmee u geometrische primitieven kunt tekenen, zoals punten, lijnen, ellipsen en rechthoeken. Bijvoorbeeld, de rect () methode tekent een rechthoek en de ellips() methode trekt een ellips. Beide rect () en ellips() methoden verwachten vergelijkbare argumenten: de X- en Y-coördinaten van de vorm, de breedte en de hoogte.
De volgende code laat zien hoe je een rechthoek en een ellips tekent:
rect (100f, 100f, 500f, 300f) // Linksbovenhoek is op (100,100) ellips (350f, 650f, 500f, 400f) // Center staat op (350,650)
Veel van de methoden zijn ook overbelast, waardoor je de basisvormen enigszins kunt wijzigen. Bijvoorbeeld door een vijfde parameter door te geven aan de rect () methode, een hoekradius, kunt u een afgeronde rechthoek tekenen.
rect (100f, 900f, 500f, 300f, 100f) // Hoekradius van 100 pixels
Als u uw app nu uitvoert, ziet u ongeveer zoiets als dit:
Als u de randkleur van de vormen wilt wijzigen, kunt u de beroerte() methode en geef de gewenste kleur als argument aan. Evenzo, als u de vormen met een specifieke kleur wilt vullen, kunt u de vullen() methode. Beide methoden moeten worden aangeroepen voordat je de vorm daadwerkelijk tekent.
De volgende code tekent een blauwe driehoek met een groene omtrek:
lijn (Color.GREEN) opvulling (Color.BLUE) driehoek (100f, 1600f, 300f, 1300f, 500f, 1600f)
Als u uw app nu uitvoert, kunt u de blauwe driehoek zien, maar u zult ook merken dat elke andere vorm ook blauw is geworden.
Als de reden u al niet duidelijk is, onthoud dan dat de trek() methode wordt herhaaldelijk genoemd. Dat betekent dat elke configuratieparameter die u tijdens een trekkingscyclus wijzigt, invloed zal hebben op de volgende tekencycli. Dus om er zeker van te zijn dat al uw vormen met de juiste kleuren worden getekend, is het een goed idee om altijd expliciet de kleur op te geven van elke vorm die u tekent, net voordat u deze tekent.
Bijvoorbeeld door de volgende code toe te voegen aan het begin van de trek() methode, kunt u de andere vormen weer wit maken.
// Stel de vulling en lijn in op wit en zwart // vóór het tekenen van de rechthoeken en ellipsenstreek (Color.BLACK) vullen (Color.WHITE)
Op dit punt ziet het canvas er als volgt uit:
Met Processing is het verwerken van aanraakgebeurtenissen uiterst eenvoudig. U hebt helemaal geen event-handlers nodig. Het enige wat u hoeft te doen is controleren of een Booleaanse variabele met de naam mousePressed is waar om te weten wanneer de gebruiker het scherm aanraakt. Nadat u hebt bevestigd dat de gebruiker het scherm aanraakt, kunt u de mouseX en mouseY variabelen om de X- en Y-coördinaten van de aanrakingen te bepalen.
De volgende code tekent bijvoorbeeld een nieuwe rechthoek op de plek waar de gebruiker het canvas aanraakt.
// Controleer of de gebruiker het canvas aanraak als (mousePressed) // Geef de vulling- en streekkleurenstreek op (Color.RED) opvulling (Color.YELLOW) // Teken rechthoek rect (mouseX.toFloat (), mouseY.toFloat () , 100f, 100f)
Als u uw app nu uitvoert en met uw vinger over het scherm sleept, ziet u dat er veel gele rechthoeken worden getekend.
Voordat we verder gaan, is hier een korte tip: als je op enig moment het canvas wilt wissen, kun je gewoon bellen naar achtergrond() methode opnieuw.
achtergrond (Color.parseColor ("# FF8A80")) // Materiaal Rood A100Er is alleen tot nu toe dat je kunt krijgen met eenvoudige primitieven. Als u geïnteresseerd bent in het maken van ingewikkelde en complexe illustraties, hebt u waarschijnlijk toegang nodig tot de afzonderlijke pixels van het canvas.
Door de loadPixels () methode, kunt u de kleuren van alle pixels van het canvas in een array met de naam laden pixels. Door de inhoud van de array te wijzigen, kunt u de inhoud van het canvas zeer efficiënt aanpassen. Tenslotte, als je eenmaal klaar bent met het aanpassen van de array, moet je onthouden om de array te bellen updatePixels () methode om de nieuwe reeks pixels weer te geven.
Merk op dat de pixels array is een eendimensionale, integer array waarvan de grootte gelijk is aan het product van de breedte en hoogte van het canvas. Omdat het canvas tweedimensionaal is, omvat het converteren van de X- en Y-coördinaten van een pixel in een geldige index van de array het gebruik van de volgende formule:
// index = xCoordinate + yCoordinate * widthOfCanvas
De volgende voorbeeldcode, die de kleur van elke pixel van het canvas instelt op basis van de X- en Y-coördinaten, zou u moeten helpen beter te begrijpen hoe u de pixels array:
onderdrukking van fun draw () loadPixels () // Load array // doorloop alle geldige coördinaten voor (y in 0 ... height - 1) for (x in 0 ... width - 1) // Bereken index val index = x + y * width // Update pixel bij index met nieuwe kleurenpixels [index] = Color.rgb (x% 255, y% 255, (x * y)% 255) // Render pixels met nieuwe kleuren updatePixels ( )
De Color.rgb () De methode die u hierboven ziet, converteert individuele rode, groene en blauwe waarden naar een geheel getal dat een enkele kleurwaarde vertegenwoordigt die het verwerkingsraamwerk begrijpt. U kunt de argumenten die u eraan geeft, wijzigen, maar zorg ervoor dat ze altijd tussen 0 en 255 liggen.
Als u ervoor kiest de code zonder wijzigingen uit te voeren, ziet u een patroon dat er als volgt uitziet:
U weet nu hoe u 2D-afbeeldingen kunt maken met behulp van de verwerkingstaal. Met de vaardigheden die je vandaag hebt geleerd, kun je je Android-apps niet alleen aantrekkelijker maken, maar ook volledig nieuwe games maken. Je wordt alleen beperkt door je creativiteit!
Voor meer informatie over Verwerken, raad ik aan dat u wat tijd besteedt aan het doorbladeren van de officiële referentiepagina's.
En terwijl je hier bent, bekijk enkele van onze andere berichten over de ontwikkeling van Android-apps!
