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.

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 vilka enheter vi vill räkna med 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.

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;
}