Processing sketches på nett

Jeg forutsetter ikke at leseren har rimelig innsikt i Processing, men det er selvsagt en fordel siden mye av det vi skal gjøre er veldig likt. Materialet vil også basere seg på noe kjennskap til HTML, litt CSS og i noen av eksemplene litt generll unnskap om Jacascript.

Jeg har forsøkt å holde en viss progresjon i skissene, men det er i praksis umulig å være helt konsekvent. I alle eksemplene skal det være greitt å laste ned eksempelen og arbeide videre med dem, enten ved rett og slett å kopiere koden fra websiden eller ved å laste ned og åpne en zip-fil.

Alle eksemplene som er brukt i dette materialet er pakket inn i en zip-fil: bsp5jsskisser.zip. Det er sikkert lurt å laste ned denne og ha den tilgjengelig for inspeksjon og eksperimenter. MERK at den oppdateres av og til når det gjøres endringer i dette materialet.

Jeg kommer til å bruke iframe-elementer til å vise fram p5js-sider inne i disse sidene. En iframe er en enkel måte å vise en webside inne i en webside. Det høres kanskje litt knotetet ut, men det er veldig enkelt.

Eksempel:
her får jeg nettleseren til å vise en egen webside ved å skrive følgende på denne siden:

<iframe style="width: 140px; height:140px; border:none" 
        src="../p5jsskisser/klokke/test.html"> 
</iframe>

canvas

p5js arbeider alltid mot et canvas-element. canvas er den kanskje viktigste utvidelsen av html-standarden de seneste årene og det brukes til mange firskjellige ting. I prinsipp er et canvas et område på nettsiden, et element, der vi kan programmere mot en ramme av punkter, pixler. Eller om vi vil en tavle vi kan tegne på. p5js etablerer automatisk en slik tegneflate med størrelse (og plassering) etter våre angivelser, og all tegning vi etter denne etableringen foretar, realiseres på denne flaten.

Det betyr at hvis jeg vil legge ut p5js skisser på de følgne sidene har jeg et valg: jeg kan enten legge dem på en egen side og vise denne siden i en iframe, eller jeg kan etablere et canvas direkte på siden min. Av praktiske årsaker har jeg i de fleste tilfellene brukt en iframe, som vist ovenfor.