Fler små program med p5.js

På den här sidan finns flera små program att lära av och skapa med p5.js. Den editor som används här  p5.js editor.

Om du är ny på programmering i p5.js rekommenderas introduktionen först. Det finns också projekt att arbeta med på sidan Matematik med JS 

Följande program finns på sidan:

  1. Liten röd bil

  2. Rotera

  3. Skala

  4. Klockor -- Digital klocka

  5. Klockor -- Klocka med visare

  6. Klockor -- Binär klocka

Program 1

Liten röd bil

Bilen består av 4 olika delar. En rektangel och en ellips för att rita chassi och två cirklar för att rita hjulen. När bilen ska röra sig framåt och alla delar ska vara kvar i samma förhållande till varandra är det en fördel att skapa variabler för x och y-värdena. Variablerna skapas först i koden och heter här xbil och ybil.

I setup() skapas canvasen med en storlek av 400 * 400 pixlar. I setup() finns också funktionen noStroke(). för att se vilken funktion den har kan du kommentera ut den.

Skriv två // framför koden. Då blir koden en kommentar och kommer inte att köras när programmet körs.

I funktionen draw() sätts bakgrundsfärgen till "lightblue". Det finns ca 140 färger som kan skrivas med text ( i stället för RGB kod) Läs mer om dessa på w3schools.

Molnet ritas ut med tre ellipser och därefter ritas den bruna rektangeln ut som symboliserar mark. När bilen ritas ut används de variabler som skapades först i programmet. för varje x och y värde används variabeln med relativ förflyttning adderad eller subtraherad. Om man sen vill flytta bilen till annat y-värde kommer alla delar att följa med och koden blir lättare att ändra i.

Ändra variabeln för ybil till något annat för att se att det fungerar.

if-satsen används för att bilen ska flytta sig framåt så länge den är placerad på canvasen. else-satsen gör så att bilen börjar om på vänster sida då den kommit utanför canvasen.

if (xbil >= -80 && xbil < 400){
xbil ++;
}else{
xbil = -80;
}

Ändra i koden så att bilen rör med högre hastighet. 

Lägg till x och y-variabler för molnen och få dem att röra sig i motsatt riktning jämfört med bilen.


Program 2

Rotera

I det här programmet ska vi skapa en figur som roterar på canvasen.

I funktionen setup() skapas en canvas med måtten 400*400 pixlar.

Innan nästa funktion skapas en variabel som heter angle (vinkel) och den sätts till värdet 45.

I funktionen draw() bestäms först bakgrundsfärgen med RGB kod.
Därefter bestäms med vilken enhet vi vill använda för vinkel, här väljer vi grader. p5.js använder som standard radianer men vi vill använda grader och det ändras genom funktionen angleMode(DEGREES);

Nästa kod translate(100,100); används för att positionera/förflytta saker på canvasen. Vad som sker är att origo (0,0), som finns uppe i vänstra hörnet av canvasen, förflyttas 100 pixlar i x-led och 100 pixlar i y-led och gör att origo blir placerad enligt bild.

All kod som kommer efter translate() kommer nu att ritas ut med avseende på nya origo. Om en ny translate() läggs till så gäller den för kommande kod.
rotate(angle); gör att det som skrivs efter kommer att rotera den vinkel vi angivit i variabeln angle (45 grader i detta fall). Därefter säger vi att angle ska öka med ett varje gång draw() körs. draw() är en  loop vilken körs ca 60 gånger per sekund tills programmet stoppas.

rect(-25, -25, 50, 50); ritar ut en kvadrat vars centrum ligger i origo. Rektanglar ritas med övre vänstra hörnet i de x och y-värden som anges för de två första parametrarna för funktionen (här -25, -25).

Gör kvadraten dubbelt så stor och se hur den roterar.

Ändra i koden så att den roterar kring sin mittpunkt.

Ändra hastigheten på rotationen.

Flytta origo till annan plats på canvasen och rita andra figurer som roterar.


Det går bra att använda mouseX och mouseY i translate. För musen (eller fingret för mobila enheter) över canvasen och se vad som händer.


Program 3

Skala

I det här programmet ska vi rita en kvadrat som ändrar storlek beroende av var på canvasen mouseX och mouseY är.

Först skapas en canvas som är 400 * 400 pixlar.

I funktionen draw(), vilken är en loop, är bakgrund satt till en grå färg. Därefter sätts origo till det värde där musen/fingret är, med translate(mouseX, mouseY);

En variabel skapas med namnet skala och värdet mouseX/60. det innebär att om mouseX är på 240 så är har variabeln skala värdet 4.  Den figur som ritas ut kommer att vara fyra gånger så stor när mouseX är vid 240 mot när mouseX är vid 60. När mouseX är vid 120 kommer figuren att vara dubbelt så stor som den är när mouseX är vid 60.  Nästa funktion scale() är det som förminskar eller ökar storleken på figuren. Här sätts värdet på scale() till skala.

strokeWeight(1.0/skala); påverkar tjocklek på yttre linjer på figuren.

Kommentera bort (genom att sätta två // framför) den funktionen för att se dess inverkan.

Sist ritas en kvadrat ut. Den är 30 * 30 pixlar när skala = 1.

Titta på koden för skala och räkna ut var mouseX är när kvadraten är 30*30 pixlar (När är skalan 1?)

Rita ut en kvadrat  vid x = 240 och y =240 som har den storlek som den skalbara kvadraten har när mouseX = 240.    rect(240, 240, ?, ?);


Program 5

Klockor - - Digital klocka

I det här programmet ska vi göra en digital klocka som visar tiden mitt på canvasen. För att få aktuell tid finns funktionerna hour(), minute() och second(). hour() returnerar ett nummer mellan 0  och 23, minute() och second() returnerar nummer mellan 0 och 59 beroende av aktuell tid på datorn.

Först skapas en canvas som är 400 * 400 pixlar i funktionen setup().

I funktionen draw() sätts bakgrundsfärgen till grå och textstorleken till 40 pixlar.

Därefter skapas en if--else-sats. Om timmar (hour()) är mindre än 10 ska en text med en nolla plus numret för timmar och ett kolon skrivas ut på x = 70 och y = 200.

text("0"+ hour()+" : ",70,200);

Liknande if--else-satser skapas för minuter och sekunder.

Styla klockan med annan bakgrund, större siffror och gärna en färg på siffrorna.

 



Program 5

Klockor - - Klocka med visare

I det här programmet ska vi göra en  klocka med visare som visar tiden mitt på canvasen. För att få aktuell tid finns funktionerna hour(), minute() och second(). hour() returnerar ett nummer mellan 0  och 23, minute() och second() returnerar nummer mellan 0 och 59 beroende av aktuell tid på datorn.

Först skapar vi en canvas med måtten 400 * 400 pixlar och bestämmer en  bakgrundsfärg. DÅ visarna på klockan kommer att flyttas med tid behöver bakgrundsfärgen vara i draw() så att färgen ritar över tidigare placering av visare. Mitt i klockan ska det finnas en punkt där visarna är "fästade".
För att mittpunkten ska flyttas från övre vänstra hörnet används translate(width/2, height/2); 

Då visare kommer att rotera kommer vinklar att användas. Som standard använder p5.js radianer när vinklar beräknas. För att ändra till grader används koden angleMode(DEGREES);  Standard i p5.js är också att noll grader är rakt åt höger. Då klockan kommer att vara noll när visaren pekar rakt upp ändrar vi detta genom att skriva rotate(-90);

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(127);
    translate(width/2, height/2);
    rotate(-90);
    stroke(255);
    strokeWeight(8);
    point(0,0);
}

Mittpunkt

För att spara tiden skapar vi tre variabler i början av funktionen draw();. En för timmar, en för minuter och en för sekunder.
var hr = hour();
var mn = minute();
var sc = second();

Om vi börjar med sekundvisaren. Variabeln sc kommer att lagra värdet för sekunder i realtid, det vill säga att när klockan är 12:45:15 så kommer variabeln att vara 15. För att de 60 sekunder som klockan tickar ska fördelas runt en hel cirkel (klockan) så behöver vi ändra intervallet från 0-60 till  0-360. I p5.js finns en funktion som heter map() som gör det. map() kräver 5 parametrar. Första värdet är vad som ska mappas. Nästa två är lägsta till högsta värde i nuvarande intervall, De sista två är lägsta och högsta värde i det intervall som det ska bli.

var sekundVinkel = map(sc, 0, 60, 0, 360);

Här är det bra att använda consolen för att få en förståelse för vad som sker.
console.log(sc);
console.log(sekundVinkel);
Skriv dessa längst ner i koden och se vad som sker.

Variabeln för minuter ( mn ) ändras på samma sätt
var minutVinkel = map(mn, 0, 60, 0, 360); 

Variabeln för timmar ( hr ) behöver en annan kod.  hr kommer att anta ett värde mellan 0 och 23 men klockan kommer att ha en urtavla som visat 12 timmar. Här kommer vi att använda ett matematiskt räknesätt som heter modulo och betecknas i javaScript med

Modulo är en division med resultatet är resten som blir kvar. Exempel: 9 % 5 = 4
Här kontrolleras alltså hur många femmor som får plats i nio. Returnerar det som blir kvar, här fyra.
Fler exempel:  37 % 10 = 7          40 % 8 = 0          9 % 2 = 1

var timVinkel = map(hr % 12, 0, 12, 0, 360);

Så den första parametern i variabeln för timVinkeln skrivs som hr % 12
om hr är 20 så blir ekvationen 20 % 12 = 8    om hr är 1 blir ekvationen 1 % 12 = 1

Kontrollera vilke värden som fås  genom att  skriva:
console.log(hr);
console.log(timVinkel);

Beroende av vad klockan är när du gör det här får du olika värden. Klockan 17 fick jag värdena hr = 17 och timVinkel = 150.  Om man mäter en vinkel på 150 grader medurs på ett urverk så hamnar man på siffran 5 vilket är precis vad klockan ska visa när den är 17.

Nu ska visarna ritas ut. Då de ska rotera kommer vi att använda funktionen rotate();  translate(); påverkar rotate(); all kod som kommer efter. Då visarna ska rotera med olika hastighet behöver vi "isolera" varje rotate(); Det görs genom två funktioner som heter push(); och pop();  vilka används som par.

push();
rotate(sekundVinkel);
stroke(255, 51, 51);
line(0, 0, 100, 0);
pop();

push() sparar de  inställningar som finns. Därefter görs nya  nya inställningar/formateringar (här rotate( antal grader )) . Linjefärg bestäms, Linje ritas ut. Därefter används pop() vilket gör att den formatering som var före push() gäller igen.

function setup() {
    createCanvas(400, 400);
    angleMode(DEGREES);
}
function draw() {
    var hr = hour();
    var mn = minute();
    var sc = second();

    background(127);
    translate(width/2, height/2);
    rotate(-90);
    stroke(255);
    strokeWeight(8);
    point(0,0);

    var sekundVinkel = map(sc, 0, 60, 0, 360);
    var minutVinkel = map(mn, 0, 60, 0, 360);
    var timVinkel = map(hr % 12, 0, 12, 0, 360);

    push();
    rotate(sekundVinkel);
    stroke(255, 51, 51);
    line(0, 0, 100, 0);
    pop();
}

sekundvisare

Nu har vi fått dit en tickande sekundvisare. Nu ska minutvisaren och timvisaren placeras på liknande sätt. minutvisaren görs lite kortare och timvisaren än kortare.

När det är gjort finns tre visare som visar tiden. Det finns ett problem med timvisaren. Den flyttar sig bara hela timmar och inte sakta mellan två tal på urtavlan vilket en riktig klocka gör. När klockan är halv åtta ska timvisaren stå mellan sju och åtta. För att få den att göra så behövs ett tillägg på koden för variabel timVisare.

timvisaren ska flytta sig mellan två siffror på urtavlan för varje gång minutvisaren går ett varv. Det finns 12 siffror på ett varv. 360/12 = 30.
Om vi tar variabeln minutVinkel och använder map() så kan vi få det värde som timvisaren ska röra sig mellan två siffror på urtavlan och adderar det till  timVinkeln.

 var timVinkel = map(hr % 12, 0, 12, 0, 360)+ map(minutVinkel, 0, 360, 0, 30);

Nu behövs en urtavla. Färg på cirkeln bestäms genom stroke(). Sen används funktionen noFill(); då cirkeln inte kan vara ifylld för då syns inte visarna. Cirkeln ritas ut. Centrum på cirkeln sätts till (0,0) eftersom koordinatsystemet är flyttat genom den translate() som finns i början av koden.

stroke(255);
noFill();
ellipse(0,0,250,250);

Nu saknas bara streck som visar varje siffra på urtavlan. Det ska finnas 12 streck fördelade på en urtavla som är 360 grader. 360/12 =30. Det ska alltså vara 30 graders rotation mellan varje streck. Vi skapar en variabel som heter i och sätter den till 0. En variabel till skapas som heter antalStreck och den ska ha värdet 12.

En while-loop  ska köras så länge variabeln i är mindre än 12 det vill säga från det att i är noll till i är elva (12 gånger). Tjockleken på linje sätts till 1. En linje ska ritas ut och en rotation på 30 grader och därefter ökas i med 1.

var i = 0;
var antalStreck= 12;
while(i < antalStreck){
strokeWeight(1);

line(0,-125,0,-105);
rotate(30);
i+=1;
}


Program 6

Klockor - - Binär klocka

I det här programmet ska vi göra en binär klocka som visar tiden i form av ellipser, som är av eller på, på canvasen. Ellipserna skapas i sex kolumner och representerar tiden enligt bild.

För att få aktuell tid finns funktionerna hour(), minute() och second(). hour() returnerar ett nummer mellan 0  och 23, minute() och second() returnerar nummer mellan 0 och 59 beroende av aktuell tid på datorn.

Först skapas en canvas som är 400 * 400 pixlar i funktionen setup().

I funktionen draw() sätts bakgrundsfärgen till svart.

När det här programmet skapas rekommenderar jag att consolen används flitigt för att förstå vad varje metod som används gör.

För att det ska bli väldigt tydligt börjar vi med sekunder då de det bara tar 60 sekunder för att vi ska kunna se att alla ellipser fylls i på det sätt som det är tänkt.

I funktionen draw() skapas en variabel med namnet sekund och värdet second(). Variabeln sekund kommer att lagra värdet för sekunder i realtid, det vill säga att när klockan är 12:45:15 så kommer variabeln att vara 15.

var sekund = second();

Använd console.log(sekund); efter koden och se värdet för variabeln.

Därefter ändrar vi data-typ på variabeln till string för att kunna använda olika metoder på den. Vissa metoder får inte att använda på datatypen Number.

sekund= sekund.toString();

En while-loop skapas för att se till att sekund alltid är tvåsiffrig dvs om sekunder är 1 ska det stå 01.

while(sekund.length < 2 ) {
sekund = '0'+ sekund;
}

Flytta din console.log(sekund) så att den visar variabelns förändring beroende av ny kod.

Koden i draw() ser nu ut så här:

function draw() {
  background(0);
  var sekund = second();
  sekund= sekund.toString();
  while(sekund.length < 2 ) {
    sekund = '0'+ sekund;
  }
  console.log(sekund);

}

Kontrollera att sekunder visas tvåsiffrigt hela tiden i consollen. Den första siffran visar tiotal sekunder och den andra siffran visar ental sekunder. För att kunna använda tiotal sekunder för sig och ental sekunder för sig använder vi en funktion som heter split(). Split() delar upp en string och returnerar den som en  array [0, 1 ]. Lägg till koden:

sekund = sekund.split('');

och flytta console.log(sekund) till efter koden.

En ny variabel med namnet sekunder ska skapas för att hantera tiotal sekunder och variabeln sekund ska bara hantera ental sekunder. För att dela upp det används en funktion som heter splice(). Splice () används för att dela upp arrayer och två parametrar behövs. Den första anger var i arrayen uppdelningen ska börja och den andra anger med hur många element (saker i arrayen) som ska flyttas. Funktionen returnerar en ny array med de element som angivits.

var sekunder = sekund.splice(0,1);

Använd console.log() först för sekund och sen för sekunder för att se vad funktionen gjort.

Nu ska sekund och sekunder göras om till data-typen Number
sekund= Number(sekund);
sekunder= Number(sekunder);

Nu ska sekunder och sekund göras om till ett binärt tal. Det görs med funktionen toString(2);

 sekund= sekund.toString(2);

console.log(sekund);

Den klocka som ska visas på canvasen har fyra ellipser i varje kolumn vilka ska vara antigen på eller av. Nu visas det binära talet medvarierande antal tecken men om det visas med fyra tecken hela tiden kan det användas för att visa tiden

För att det alltid ska visas fyra tecken i det binära talet så behövs en while-loop som gör att nollor läggs till framför tecknen när antal tecken understigen 4

while(sekund.length < 4 ) {
sekund = '0'+ sekund;
}
console.log(sekund);

Den binära koden med fyra tecken ska användas för att rita ut ellipser på canvasen. Till det används en for-loop för sekund och en likadan för sekunder

for (i=0; i < sekund.length; i++) { // här loopas de fyra talen i variabeln sekund
if(sekund[i]==='0') {  //om den siffran är noll ska färgen på ellipsen vara grå
fill(50);
}
else {   //annars, om siffran är 1 ska den vara vit
fill(255);
}
noStroke();
ellipse(width *8/10,(i+5)*30, 30, 20);

      }

Ellipsen ritas ut i x -led (bredden på canvasen multiplicerat med 8/10). I y-led ritas den ut först på (1+5)*30, andra gången på (2+5)*30 tredje gången (3+5)*30 och sista gången (4+5)*30.

Koden för sekunder skrivs på samma sätt.


Nu återstår bara att göra liknande kod för minut, minuter, timme och timmar.