Plassering av en sketch

Hva

Vi skal ta for oss en minimalistisk skisse og se hvordan vi kan presentere den på to måter. Vi gjør dette i starten fordi det blir lettere å demonstrere og teste løsninger når vi har denne handlefriheten.

Begreper som du finner i dokumentasjonen til p5js Reference

setup(), draw(), createCanvas()
background(), stroke(), fill(), ellipse()

background, stroke og fill angir farger som en blanding av R(ødt), G(rønt) og B(lått). Det er mange måter å gjøre dette på. Ellipse tegner en oval, i dette tilfelle en sirkel.

Versjon1

Vi lager følgende minimalistiske webside:

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test1</title>
     <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
    <script src="test1.js"> </script>
</head>
<body>
</body>
</html>

Dette er en grei side med head- og body-element. Vi ser at vi referer til p5js-biblioteket i det første script-elementet. Dette er alt vi trenger for å involvere p5js. Det andre script-elmentet involverer et javascript vi har laget selv:

function setup() {
    createCanvas(100, 100);
}
function draw() {
  background(255, 255, 255);    //hvitt
  stroke(0,0,0);                    // svart
  fill(255,0,0);                    // rødt
  ellipse(width/2,height/2,40,40);
}

Resultatet blir slik (i en iframe):

Du kan også løsningen på en egen side:
test1.html https://borres.hiof.no/pisk/P5js/p5jsskisser/struktur/test1.html

Det som skjer er at p5js setter opp et canvas-element som siste element i body, og all tegningen vår skjer her. Dette er en av dee tingene vi vil endre i versjon 2.

Versjon2

Vi lager følgende webside:

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test2</title>
     <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
    <script src="test2.js"> </script>
    <style> canvas{border: solid thin blue} </style>
</head>
<body>
<p>her kommer en tegning</p>
<div id="canvasHer">
</div>
<p>og det var det</p>
</body>
</html>

Vi har gjort to endringer fra versjon1:

Vi har laget en stilangivelse for (alle) canvas, slik at de får en tynn blå ramme rundt seg
Vi har laget text(paragrafer) på websiden og vi har laget et div-element der vi vil plassere det canvas elementet p5js lager. Dette div-elementet har id="canvasHer", slik at vi kan kjenne det igjen. det spiller ingen rolle hva det heter så lenge javascriptet kaller det med rett navn (id)

javascriptet vårt er nå slik:

function setup() {
    var canvas=createCanvas(100, 100);
    canvas.parent("canvasHer");
}
function draw() {
  background(255, 255, 255);    //hvitt
  stroke(0,0,0);                    // svart
  fill(255,0,0);                     // rødt
  ellipse(width/2,height/2,40,40);
}

Den eneste endringen er at vi oppretter canvas elementet på en litt annen måte. Vi forteller canvaset at dets foreldreelement skal ha id="canvasHer"

Resultatet blir slik (i en iframe):

Du kan også løsningen på en egen side:
test2.html https://borres.hiof.no/pisk/P5js/p5jsskisser/struktur/test2.html

I de kommende eksemplene vil vi bruke denne plasseringsteknikken for å gjøre det letter å fylle websidene våre med andre ting enn det canvaset p5js tegner i. Det være seg overskrifter, forklaringer, trykknapper eller hva vi måtte ha behov for.