Articles

mikä on p5.js ja miten sitä käytetään?

tänään haluan selittää p5.js. Olen myös p5.JS aloittelija joten yritetään olla tuttuja p5.js yhdessä!

p5.js on kirjoitettu Javascriptillä, mutta alun perin se on prosessointia (https://processing.org/). Processing on kuvataiteen visuaalinen koodaustyökalu. Mielenkiintoista on, että jalostus ei ole vain kehittäjille, vaan myös taiteilijoille, suunnittelijoille, tutkijoille ja niille, jotka haluavat nauttia taiteen tekemisestä. p5.JS käytetään JavaScript joten voimme käyttää sitä DOM.

seuraava on P5.js virallinen sivusto.
https://p5js.org/

miten P5: tä käytetään.js

tehdään tänään yksinkertainen juttu. Tavoitteenamme on tietää pienet vinkit ja tehdä animaatio.

Vaihe 1: Tee yksi HTML-tiedosto ja Luo linkki P5: een.js ja oma JavaScript-tiedosto.

helppo tapa saada linkki on mennä viralliselle sivustolle ja löytää CDN. Kopioi jotain … / p5.vähintäänjs ja liitä se HTML.

HTML näyttää kuvan yllä.

Step 2: Make a circle

creativeCanvas(leveys kankaalle, korkeus kankaalle) – funktio määrittää kankaan koon.

Tausta () – funktio määrittää tekemämme kankaan värin. * Käytän väriparametria, mutta voit käyttää muita parametreja. Katso virallinen sivusto (https://p5js.org/reference/#/p5/background).

noStroke () – funktio tarkoittaa, ettei ellipsin ääriviivoja ole.

ellipsi(ellipsin X sijainti, ellipsin y sijainti, ellipsin leveys, ellipsin korkeus) .funktio piirtää ellipsin.

älä unohda avata HTML-koodia selaimessasi!

your script.js

selaimesi näyttää tältä

askel3: tehdään ellipsiliike!

draw() funktiosilmukat ikuisesti. Näin, ainoa asia mitä sinun tarvitsee tehdä on tehdä y-sijainti asetetaan 0 ja sitten lisätä sitä. Sitten, saat animaatio, että ellipsi liikkuu ylhäältä alas kankaalle.

your script.js
Demo Vaihe 3

Vaihe4: tehdään monta pistettä ja siirretään niitä äärettömästi

tehdään viimeinen vaihe täällä.

random () – funktio muodostaa satunnaisen kelluvan luvun. Koodissani asetan ” random (width)”. Tämä tarkoittaa, että ne palauttaisivat 0 jopa 500, joka on suurin leveys kankaalle. Jos se on vain satunnainen (), se asettuisi 0: sta 1: een. Sitten, saatat jo huomata…jos se on satunnainen (6, 10), se palaisi 6 jopa 10. Se on melko helppo ymmärtää,eikö?

demo 4

that is it today! Toivon, että saat vihjeen postistani. Yritän tehdä monimutkaisempia juttuja ja jakaa kokemukseni täällä uudestaan myöhemmin.