DOM

Hva

DOM (Document Object Model) brukes til å beskrive strukturen på en en webside. Dersom vi skal lage interaktivitet på en webside må vi på en eller annen måte ha kontroll over denne strukturen.

Når vi arbeider med p5js har vi et dilemma: Skal vi bruke p5js sitt eget bibliotek med DOM-funksjonalitet eller skal vi bruke javascript/HTM/CSS uavhengig av p5js. Det er mye som tyder på at de som designer p5js har det samme dilemmaet.

Du finner en beskrivelse av p5js sitt DOM-bibliotek blandt annet her: Beyond the canvas.

På denne siden skal jeg presentere tre enkle, men ganske nyttige mekanismer som viser hvordan vi ganske enkelt kan hente data fra HTML-siden og bruke dem i en skisse, uten å kople inn DOM-biblioteket til p5js.

Nøkelen til å få til dette er:

document.getElementById("minTekst").value

Dette lokaliserer det elementet på websiden som har den angitte id-attributten, og vi kan plukke opp innholdet. I input-elementer er innholdet angitt med value. I andre html-elementer kan vi hente innholdet med andre angivelser. Det skal bare være et element på websiden med en bestemt id-attributt. Hvis det er flere hentes den første forekomsten.

Lese tekst

Her bruker vi et input-element av typen textarea. Dette er plassert under canvas. Vi plukker opp inholdet i dette elementet hver gang skissen tegnes.

HTML-siden

<!DOCTYPE html>
<html>
  <head>
    <title>teksting</title>
    <meta charset="UTF-8"/>
    <script 
     src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
    <!-- tynn blå kant på skissen-->
    <style>canvas{border:solid blue thin}</style>
  </head>
  <body>
  <h3>Hent tekst fra omgivelsene</h3>
  <div id="canvashere"></div>
  <div>
    <textarea id="minTekst" rows="3" cols="22"> 
    </textArea>
  </div>
  </body>
</html>

Skissen

/*
Roterer entekst vi leser fra
et HTML.element, en textArea
*/
// rotasjonsvinkel
var v=0;
 
function setup(){
  // lager og plasserer canvas
  var canvas=createCanvas(200,200);
  canvas.parent('canvashere'); 
  // gjør klar teksten
  // her bruker vi JavaScript helt uavhengig av
  // p5js sitt DOM-bibliotek
  document.getElementById("minTekst").value="skriv her";  
  frameRate(20);
}
function draw(){
    background(255,255,255);
    textSize(20);
    textAlign(CENTER,CENTER);
    translate(width/2,height/2);
    rotate(radians(v++));
    // les teksten slik den er nå
    // her bruker vi JavaScript helt uavhengig av
    // p5js sitt DOM-bibliotek
    var T=document.getElementById("minTekst").value;
    text(T, 0,0);
}

Lese en tallangivelse

Her bruker vi et input-element av typen range. Dette er plassert under canvas. Vi plukker opp inholdet i dette elementet hver gang skissen tegnes.

HTML-siden

<!DOCTYPE html>
<html>
  <head>
    <title>range</title>
    <meta charset="UTF-8"/>
    <script 
     src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
    <!-- tynn blå kant på skissen-->
    <style>canvas{border:solid blue thin}</style>
  </head>
  <body>
  <h3>Hent et tall fra omgivelsene</h3>
  <div id="canvashere"></div>
  <div>
    <input style="width:200px" type="range" id="tallet" 
           value="20"  step="5" min="20" max="150" />
  </div>
  </body>
</html>

Skissen

/*
Endrer diameteren på en sirkel i en tegning
ved et range-element, en slider
*/
// diameter
var diameter=20;
 
function setup(){
  // lager og plasserer canvas
  var canvas=createCanvas(200,200);
  canvas.parent('canvashere'); 
  // gjør klar slideren
  // her bruker vi JavaScript helt uavhengig av
  // p5js sitt DOM-bibliotek
  document.getElementById("tallet").value=diameter;     
  frameRate(20);
}
function draw(){
    background(255,255,255);
    // les slideren slik den er nå
    // her bruker vi JavaScript helt uavhengig av
    // p5js sitt DOM-bibliotek
    diameter=parseInt(document.getElementById("tallet").value);
    fill(255,0,0);
    ellipse(width/2,height/2,diameter,diameter);
}

Plukke opp en farge

Her bruker vi et input-element av typen color. Dette er plassert under canvas. Vi plukker opp inholdet i dette elementet hver gang skissen tegnes.

HTML-siden

<!DOCTYPE html>
<html>
  <head>
    <title>farge</title>
    <meta charset="UTF-8"/>
    <script 
     src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
    <!-- tynn blå kant på skissen-->
    <style>canvas{border:solid blue thin}</style>
  </head>
  <body>
  <h3>Plukk opp en farge</h3>
  <div id="canvashere"></div>
  <div>
  <!-- endre fargen når innholdt endrer seg -->
    Velg farge:
    <input type="color" id="fargen"
           onchange="settFarge()" id="fargen"/>
  </div>
  </body>
</html>

Skissen

/*
Endrer fargen
ved et color-element
*/
// beskriver fargen med en hexverdi(hvit)
var farge="#ffffff";
 
function setup(){
  // lager og plasserer canvas
  var canvas=createCanvas(200,200);
  canvas.parent('canvashere'); 
  document.getElementById('fargen').value=farge;
  frameRate(20);
}
function draw(){
    background(255,255,255);
    strokeWeight(2);
    stroke(0);
    fill(farge);
    ellipse(width/2,height/2,150,150);
}
function settFarge(){
    // bruker ikke p5js sitt DOM-bibliotek
    farge=document.getElementById('fargen').value;
    console.log(farge);
}

Du kan inspisere koden på egne sider:

Tekst: test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/domText/test.html

Tall: test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/domRange/test.html

Farge: test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/domColor/test.html