Taiteen luominen tietokoneella on hauskaa ja hyödyllistä. P5 on JavaScript -kirjaston avulla visuaalisten ja luovien teosten ohjelmointi onnistuu ilman ohjelmien asennuksia. Valitettavasti suurin osa materiaalista on englanninkielistä ja perheen pienimmille se voi olla kynnys aloittaa ohjelmointiharrastus. Oppaita P5-ohjelmointiin löytyy internetistä kuitenkin ihan hyvin, katso esimerkiksi MAOL:in ohjeet - taidetta ohjelmoimalla.

Miksi tehdä taidetta ohjelmoimalla? Kaikkea ei voi tehdä paperille perinteisin menetelmin, katso esimerkiksi animaatio täällä. PS. Palaa takaisin tänne selaimen -näppäintä. Lisäksi uudelleen ajettavuus sekä erilaiset komennot joilla voi tehdä esimerkiksi 10 000 pistettä tai viivaa kankaalle onnistunee melko helposti.

Tämän blogin tarkoitus on antaa ohjeet alkuun pääsemiseksi. Aiempaa ohjelmointitaitoja ei vaadita. Aiemmasta tietokoneen käytöstä on hyötyä, mutta editorin käyttö on melko yksinkertaista. Tekstin kopioiminen ja liimaaminen helpottaa valmiiden ohjelmakoodien testaamista.

Grafiikka

perusasiat

Ensimmäinen harjoitus mitä tahansa uutta ohjelmointikieltä opeteltaessa on tyypillisesti “Hello World!” -ohjelmakoodi eli “Hei maailma”. Ohjelman ideana on näyttää ruudulla “Hei maailma” -teksti. Wikipedia - Hei maailma -ohjelma

// p5ohjelmointi-blog
// 1. Harjoitus: Hello World!
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255, 255, 255);
  text("Hei maailma", 200, 200); 
}

Ihan ensimmäiseksi tulisi testata, toimiiko editoria ja osaat käyttää sen perustoimintoja. Tutki koodia selaimessa: P5-Hello World! ja paina P5-editorissa -näppäintä. Tapahtuuko mitään?

Avaa P5-editori näistä linkeistä uuteen välilehteen:

Koodi selitettynä

setup: Kirjoita kaarisulkujen väliin ohjelmakoodi, joka ajetaan kerran ohjelmaa käynnistäessä
- kommentin eli rivin jota ei käsitellä ohjelmassa kirjoitetaan kahden kenoviivan // jälkeen.
- createCanvas: piirtoalueen leveys ja korkeus. Enemmän koordinaatistosta ja pikseleistä voi lukea täältä.
draw: piirto
- background: taustaväri RGB
  - Värin voi asettaa esimerkiksi käyttäen RGB-värejä:
    - (255,0,0) Punainen
    - (0, 255, 0) Lime
    - (0, 0, 255) Sininen
    - Katso muita värivaihtoehtoja ylläolevasta linkistä.
- text: teksti lainausmerkkien välissä sekä sijainti x ja y koordinaatit.

Editorista voi lukea ohjeita täältä.

Tee itse ja opi

Tehtävä: muuta tekstiä tai tekstin sijaintia piirtokankaalla.
Tehtävä: Muuta taustaväriä.

Viiva

P5-editorissa viivoilla piirretty Hello World
Tehtävä: muokkaa jonkin komennon koordinaatteja ja katso mitä tapahtuu.

Muut kuviot

Tässä kappaleessa opetellaan piirtämään ympyrä, neliö, suorakulmio, viiva jne. Piirrä ne hiirtä käyttäen. Muokkaa kuviot koodiksi ja kopioi ne P5-editoriin. Sivustolla codeguppy - Artist: piirrä kuvioita käyttäen Artist-koodia. Tarkastele, miten piirtämäsi kuvio voidaan piirtää käyttäen ohjelmakoodia.

Valitse hiirellä generoitu koodi ja kopioi se esimeriksi selaimessa toimivaan p5-editoriin.
Katso Youtube-video: piirtäminen editorissa 2-piste-ja-viivakuviot.

Kurssi 2

Kesken

Mitä seuraavaksi haluat tehdä?

Interaktiivisuus

Kuviot seuraavat hiiren liikkeitä, katso ja kokeile: mouseX ja mouseY.

Kopioi koodi editoriin. Valitse koodi, klikkaa hiiren oikeaa näppäintä ja kopioi. Mene editoriin ja liimaa koodi editoriin. Paina -näppäintä.

Haastava lisätehtävä

Nostoauto esimerkki täällä ja kopio editoitavissa omassa P5-editorissa: Nostoauto - MAOL

Kurssi 3

Eräät ihmiset pitävät lippujen opettelusta erilaisten lippupelien avulla. Ajattelin, että sellaisin voisi itsekin koodata, sellaisen, jossa ei esimerkiksi mainokset hypi silmille. Liput löytyvät valmiina githubista:

~/git/github
$ git clone https://github.com/hampusborgos/country-flags.git

NPM

Olen käyttänyt p5.svg-pakettia. Siitä tehty build on ollut jaossa unpkg palvelussa (https://unpkg.com/p5.js-svg). Kirjastosta ei ollut GitHub sivuilla pakettia, jota olisi voinut käyttää suoraan esimerkiksi p5-editorissa. Tästä johtuen oli käytettävä Nodejs:ää. Lataa asennus paketti (4/2023: 18.15.0 LTS) - an open-source, cross-platform JavaScript runtime environment.

“The main goal of p5.SVG is to provide a SVG runtime for p5.js, so that we can draw using p5’s powerful API in

Following command was available here:

npm i p5.js-svg

To build dist files after cloning repo, you can run:

npm install
npm run build

Löytyy täältä: C:\p5svg\node_modules\p5.js-svg\dist ja ladattu mm. p5editoriin templateen

Coding train: Node.js, npm

NPM muuta

https://www.npmjs.com/package/p5.capture
https://www.npmjs.com/package/p5bezier

SVG experiments

mask, angle, etc., see p5editor laser-img-230401

Lisämateriaalia

peliohjelmointiin vinkkejä: pulustudio.com.
p5-komentoja (reference) englanniksi: p5js.org/reference.

p5 references

resizeCanvas: muuta piirtoalueen suuruutta
p5editor - thumbnailEditor
mouseDragged

Tips

zeroPad: leading zeros

Auta Ukrainaa

Ihmiset, kutsutaan kaikki pääsiäismaanantaina klo 12 Senaatintorille näyttämään, että toimimme Ukrainan rinnalla taistelussa vapauden, demokratian ja rauhan puolesta. VAPAA UKRAINA - VAPAA MAAILMA!#suomivoitehdaenemman #vapaaukraina #vapaamaailma https://t.co/gROTDHrUzT pic.twitter.com/ItC4S3J5yn
— Pilvi Torsti (@pilvitorsti) April 15, 2022

Vastuuvapauslauseke

Tämä julkaisu on tehty parhaan oman tietämyksemme ja ymmärtämyksemme pohjalta. Olemme tehneet kaiken voitavamme tietojen täsmällisyyden ja oikeellisuuden takaamiseksi, talonendm ei ole vastuussa mistään virheistä tai puutteista tai mistään suorasta, epäsuorasta tai välillisestä vahingosta, joka on aiheutunut tietojen virheellisestä soveltamisesta. Pidätämme oikeuden muutoksiin.

Tags: p5 svg npm nodejs laser template ohjelmointi

p5-ohjelmointia

Taidetta koodaamalla - luovaa toimintaa