Reglage

Skapa reglage för interaktion

Genom att använda reglage (sliders)  kan program göras mer interaktiva för användaren. Med den widget som vi använder på denna sida för att visa p5.js editor kan inte reglage och andra saker som är kopplade till något som kallas DOM användas.  Du kan läsa mer om DOM på denna wikipediasida.
I den editor som finns på  https://editor.p5js.org/ så fungerar det. Här kommer vi att visa hur man kan skapa ett program som använder reglage som det program som visas här bredvid som GIF.

För att det ska fungera med reglage och andra element behöver ett bibliotek som hanterar p5.js dom inkluderas. I p5.js editor finns detta redan inkluderat. Titta i HTML filen och se att där står:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>

För att skapa en slider används funktionen createSlider().  CreateSlider kan ta fyra parametrar

createSlider(min, max, [value], [step])

min är det lägsta värdet för slidern och max är det högsta värdet.
value är det värde som slidern ska stå på när programmet startas och step anges om slidern ska flyttas ett visst antal steg vid varje förskjutning.  Om inget värde anges för steps så flyttas slidern mellan min och max med ett steg i taget.

Skapa koden nedan i p5.js editor

let slider;
function setup() {
createCanvas(400,400);
slider = createSlider(0, 255, 0, 20);
slider.position(10, 10);
}

function draw() {
let val = slider.value();
background(val,0,0);
fill(255);
textSize(16);
text(val, 200,200);
}

Först skapas en variabel med namnet slider. I setup() skapas en canvas med bredd 400 pixlar och höjd 400 pixlar. Variabeln slider sätt tillatt innehålla värdet för en slider. Slidern har min värde 0, max värde 255, value 0 och steps 20.
slider.position(10,10) anger var på canvasen slidern ska placeras.

I draw() skapas en variabel med namnet val som sätts till slider.value() vilket innebär att den kommer att hålla reda på sliderns aktuella värde. Bakgrunden sätts till sliderns värde för rött, noll för grönt och noll för blått. Därefter kommer tre rader kod som gör att värdet för slidern skrivs ut på canvasen i position x =  200, y = 200.

 Prova programmet. Slidern går bara att dra upp till värdet 240. Varför?

Hela koden för programmet som visas högst upp på denna sida är:

let r;
let g;
let b;

function setup() {
  createCanvas(450, 400);
  r = createSlider(0, 255, 250);
  r.position(10, 30);
  g = createSlider(0, 255, 125);
  g.position(150, 30);
  b = createSlider(0, 255, 250);
  b.position(300, 30);
}

function draw() {
  let colr = r.value();
  let colg = g.value();
  let colb = b.value();
  background(colr, colg, colb);
  textSize(16);
  textStyle(BOLD);
  fill(255, 0, 0);
  text('R', 40, 20);
  fill(0, 255, 0);
  text('G', 180, 20);
  fill(0, 0, 255);
  text('B', 330, 20);

  fill(0);
  text(r.value(), 70, 20);
  text(g.value(), 210, 20);
  text(b.value(), 360, 20);
  text('0', 20, 70);
  text('255', 120, 70);
  text('0', 160, 70);
  text('255', 260, 70);
  text('0', 310, 70);
  text('255', 410, 70);

  textSize(g.value() / 2);
  textAlign(CENTER);
  text('🎨', 225, 250);
}

 De tre sista raderna i koden hanterar den palett som visas på canvasen. Paletten är en emoji. Alla emojis kan hanteras som vilken text som helst där storlek , alignement mm  anges med de funktioner som vanligen används för text.  Byt till annan eller fler emoji
På sidan emojipedia kan du hitta massor av emojis. Klicka på den emoji du vill använda och använd sen knappen copy för att kopiera och klistra sen in den som text i koden. Kom ihåg att text måste omslutas av citationstecken.