Sådan bygger du en tegne-app med p5js

Temaet for uge # 5 i den ugentlige kodningsudfordring er:

Oprettelse af en tegningsprogram

Dette er den første applikation, vi bygger i programmet #weeklyCodingChallenge. Indtil videre har vi bygget mindre projekter, så dette er ret spændende, hvis du spørger mig!

I denne artikel bruger vi p5js, et tegnebibliotek, til at bygge et tegningsprogram:

Tjek CodePen her:

Hvis du vil lære mere om p5js, og hvad det gør, kan du besøge deres officielle websted. Grundlæggende bruger jeg det, fordi det fungerer meget godt oven på browserens lærredselement ved at give et klart API.

HTML

Som du kan se i eksemplet ovenfor, på venstre side af skærmen har vi en .sidebar. Vi lægger inde i vores 'værktøjer' - en farvevælger, en vægtvælger og ryddeknappen (papirkurv-ikonet):

CSS

Ved hjælp af CSS flytter vi .sidebar og alt hvad der er inde i venstre side. Vi vil style det lidt for at få det til at se pænere ud (intet fancy, grundlæggende CSS):

Nu for den vigtige del ...

JS / P5JS

Som du måske har bemærket, har vi ikke tilføjet et lærredselement i vores HTML, da p5js opretter det til os.

Der er to vigtige funktioner, som vi vil bruge fra p5js-biblioteket:

  • opsætning - kaldes én gang, når programmet starter. Det bruges til at definere de oprindelige miljøegenskaber, såsom skærmstørrelse og baggrundsfarve.
  • tegning - kaldes direkte efter opsætning (). Funktionen draw () udfører kontinuerligt de kodelinjer, der er indeholdt i dens blok.

Før vi går videre, lad os stoppe et øjeblik og se, hvad vi vil opnå.

Så dybest set ønsker vi at tilføje en musepresset begivenhed Lister til lærredet, der vil begynde at 'tegne' en form inde i den, så længe musen er trykt.

Vi opretter en række punkter, som vi vil bruge til at oprette en sti (eller en form) ved hjælp af metoderne beginShape og endShape til at tegne denne form inden i lærredet. Formen vil blive konstrueret ved at forbinde en række vertices (se toppunktet for mere information).

Da vi ønsker, at denne form tegnes igen hver gang, lægger vi denne kode inden for tegningsmetoden:

Som du kan se, har p5js et museIsPresset flag, som vi kan bruge til at registrere, når der trykkes på museknapperne.

Alt ser muligvis godt ud indtil videre, men der er et stort spørgsmål. Når museknappen er frigivet, og vi prøver at tegne en anden form, vil det sidste punkt fra den forrige form være forbundet til det første punkt i den nye form. Dette er bestemt ikke, hvad vi ønsker, så vi er nødt til at ændre vores tilgang lidt.

I stedet for at have et array af punkter (stien array), opretter vi en stien array, og vi vil gemme alle stier inde i det. Grundlæggende har vi et dobbelt array med point. Også for dette bliver vi nødt til at holde styr på den aktuelle vej, mens musen stadig er trykket. Vi nulstiller denne matrix, når museknappen trykkes igen. Forvirrende? Lad os se koden, og jeg vedder på, at den bliver klarere:

Jeg har også tilføjet nogle kommentarer i koden ovenfor, så sørg for, at du tjekker dem ud.

Musepressefunktionen kaldes en gang efter hver gang der trykkes på en museknap - p5js-ting!

Store! Nu kan vi tegne individuelle former på vores lærred!

Den sidste ting at gøre er at tilslutte de knapper, vi oprettede i HTML, og bruge de værdier, der er inde i dem, til at style formen:

Og med dette er vi færdige med vores lille applikation! Yay!

Hele JS-koden

Sørg også for, at du importerer p5js-filen i din html, før du importerer denne js-fil.

Konklusion

Jeg håber, at du kunne lide denne tegne-app, som vi har bygget. Der er en masse funktionaliteter, der kan føjes til denne app, og jeg udfordrer dig til at lade dit kreative sind komme med nye ideer!

Hvad hvis du kunne gemme tegningen som et billede (.png eller .jpg)? (du kan gøre dette med p5js-biblioteket).

I øjeblikket kontrollerer vi kun musebegivenheder. Måske kan du også få det til at fungere på mobil ved at finde ud af berøringshændelserne? Himmelen er grænsen med mængden af ​​funktionaliteter, der kan føjes til denne app!

Jeg ville meget gerne se, hvad du vil bygge! Tweet mig @ florinpop1705 med din skabelse!

Du kan måske også lide en af ​​de andre udfordringer fra programmet Weekly Coding Challenge. Tjek dem her.

Se jer næste gang! Happy Coding!

Oprindeligt offentliggjort på www.florin-pop.com.