Lav et program så en hvid firkant med kraftig rød ramme følger musen. Baggrunden skal være grå. Herudover skal du skrive “mouseX:” samt værdien af mouseX ud til Console.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/XE7hQNMRp

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/XE7hQNMRp

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et program så en gul firkant uden ramme følger musen. Musens cursor skal være i midten af kassen. Baggrunden skal være lilla. Der skal også være blå ellipse og en firesidet rød polygon. Den gule firkant skal bevæge sig ind over den blå ellipse men bag ved den røde polygon.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/LWKm_2eTG

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/LWKm_2eTG

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et program så der er tre bolde som bevæger sig forskelligt afhængig af hvor langt til hhv. højre og venstre man har sin muse cursor. En blå bold skal have en fast y koordinat men følge muse cursoren i x koordinaten. En grøn bold skal have en fast y koordinat man x koordinaten skal kun være det halve af musens x koordinat. Den røde bold skal bevæge sig op og ned når man bevæger muse curoren til højre og venstre.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/Z27mhTg_n

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/Z27mhTg_n

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et program hvor canvas er delt i to lige store dele. Når muse cursoren er over den venstre halvdel, så skal den venstre halvdel farves sort og når muse cursoren er over den højre halvdel, så skal den højre halvdel være sort (som vist nedenfor)

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/YhWEoypjP

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/YhWEoypjP

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Løs samme opgave som Opgave G4 men hvor canvas er delt i tre lige store dele.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/4vyCamh3i

if (mouseX < 100) {
…

} else if (mouseX < 200) {
…

}
else {
…

}

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/4vyCamh3i

Tegn et canvas som vist her. Hvis muse cursoren er over firkanten i midten, så skal den farves hvid.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/EBgr-HhtzW

if ((mouseX > 100) && (mouseY > 100)){

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/EBgr-HhtzW

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn et canvas som vist her. Hvis muse cursoren er over firkanten i midten og man samtidig holder muse knappen nede, så skal firkanten farves hvid

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/Sb_M_w-Fq

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/Sb_M_w-Fq

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn et canvas som vist her. Hvis man holder venstre pilen på tastaturet nede, så skal firkanten bevæge sig til venstre (Husk at man skal klikke på canvas med musen før det bliver aktivt)

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/tB3LbyDVt

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/tB3LbyDVt

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn et canvas som vist her. Hvis man holder ‘s’ nede, så skal firkanten blive større og hvis man holder ‘m’ nede, så skal den blive mindre (Husk at man skal klikke på canvas med musen før det bliver aktivt)

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/D1CYgx4Z8

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/D1CYgx4Z8

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn et canvas med sort baggrund. Hver gang man klikker med musen skal baggrunden blive lidt mere grå/hvid. Den skal ikke blive hurtig hvid bare fordi man holder muse knappen nede (Husk at man skal klikke på canvas med musen før det bliver aktivt).

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/o0ZSTNvl3

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/o0ZSTNvl3

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn en trekant der fylder en fjerdedel af canvasa

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/-KfaVIM-E

Note: Husk at tegne koordinatsystemet op først.

Tegn tre cirkler ved siden af hinanden som bliver mere og mere gennemsigtige

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/EfwBXMShM

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Byg videre på opgave G12. Tegn 5 cirker ved siden af hinanden som bliver mere og mere gennemsigtige ved brug af et for loop. Se https://p5js.org/reference/p5/for/ i reference for syntaksen.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/f4bPmZLeu

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn en rød bold med kraftig grå ramme, to grønne bolde uden ramme og en stor tekst uden ramme hvor der står “Hello” med hvid skrift.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/YP9C6LjGp

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn en blå bold der langsomt men sikkert af sig selv bevæger sig mod højre

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/xyr39IqsA

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/xyr39IqsA

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G15, så bolden vender rundt og bevæger sig den anden vej når den når til højre side af canvas

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/Wx6ZGCq0I

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/Wx6ZGCq0I

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G16, så bolden også vender rundt og bevæger sig den anden vej når den når til venstre side af canvas

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/GSJEvLL87

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/GSJEvLL87

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G17, så bolden bevæger sig rundt som på et billard bord.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/UkgoL13Sa

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/UkgoL13Sa

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsning fra Opgave G17, så bolden skifter til en tilfældig farve når den skifter retning.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/ZrVdS-uBT

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/ZrVdS-uBT

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav en klasse ved navn Bold. Bold klassen skal have variablerne this.x og this.y defineret i constructor metoden, se hintet nedenfor. Når man skriver “this.” foran en variabel betyder det at det er objektets variabel at man refererer til. Den skal også have en metode ved navn show() som tegner en blå cirkel. Opret (i setup) et objekt ved navn bold som er af klassen/typen Bold og vis bolden i draw().

class Ball {
  constructor(){
    this.x = 30
    this.y = 30
  }
  
  show(){
    fill(0,0,255, 200)
    circle(this.x, this.y, 30) 
  }
}
                                

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/sAOYYbgpL

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G20. Lav en metode i Bold ved navn move() som bevæger bolden mod højre. Kald move() metoden i draw således at bolden bevæger sig mod højre.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/_4Izl2uaF

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/_4Izl2uaF

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G21, så move bevæger en bold rundt som en billardkugle. Tilret så bolden starter på en tilfældig x og y koordinat mellem 50 og 350 samt at det er tilfældig hvilken retning den starter med at bevæge sig i.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/M3DDYyviB

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/M3DDYyviB

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Se på løsningseksemplet og forstå koden. Forklar koden til en anden.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/rbA8TaLDv

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/rbA8TaLDv

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et program som putter fire navne ind i et array (tabel) og skriver dem ud i draw ved brug at et for loop.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/Qh15SAR8i

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen fra Opgave G24 så man putter bolde i arrayet i stedet for tekster. Bold klassen kan kopieres fra Opgave G23. Vigtigt: Når man bruger en objekt orienteret programmeringsstil, så er det nemt at genbruge klasser i andre programmer.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/ZPTVyUO3J

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen for opgave G20 så der oprettes to bolde. Når en bold oprettes skal man angive hvor bolden skal pladseres. Den ene bold skal pladseres øverst til venstre og den anden bold skal pladseres nederst til højre.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/FIZ9H54on

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret løsningen for opgave G26, så boldene oprettes med forskellig farve.

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/SVRwK0mye

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Løs samme opgave som Opgave G1, men hvor firkanten er lavet som et objekt i stedet.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/tCDuWsLsP

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/tCDuWsLsP

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Vi skal i denne øvelse lave en kontakt som til at starte med er slukket. Når man trykker på den så er den tændt og hvis man herefter trykker på den igen, så er den slukket.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/irak79Ufe

Du skal kombinere det du har lært i hele tre opgaver.

I Opgave G28 lavede vi en firkant som et objekt

I Opgave G6 lærte vi hvordan man tester for om muse cursoren er inde over en firkant

I Opgave G7 lærte vi hvordan man tester for om museknappen er trykket ned

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/irak79Ufe

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Opret to bold (objekter) og tegn dem på skærmen. Hvis man klikker på en bold skal den forsvinde.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/ixyccu5DY

if (dist(this.x, this.y,mouseX, mouseY) < this.r){
   this.exists = false
}

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/ixyccu5DY

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Vi skal her lære at fjerne objekter fra et Array. Tag udgangspunkt i løsningen fra Opgave G25. Tilret så en bold fjernes hvis der klikkes på den.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/E6lZycruy

 
for (let i = bolde.length - 1; i >= 0; i--) {
    if (bolde[i].isClicked()){
        // JavaScript functionen splice kan fjerne et element fra Arrayet
        bolde.splice(i,1)
    }
}

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/E6lZycruy

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Du skal her arbejde med hvordan to objekter (af samme klasse) kan kommunikere med hinanden. Tag udgangspunkt i løsningen fra Opgave G25. Lav en ekstra bold der er meget større end de andre. Hvis den store bold og en af de små bolde støder sammen, så skal den lille bold forsvinde.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/5AiddKYCI

intersects(other) {
// Bemærk at denne linie returnerer true hvis bolden og den anden bold (other) rører ved hinanden
return dist(this.x, this.y, other.x, other.y) < this.r + other.r;
}

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/5AiddKYCI

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et bold objekt der langsomt følger efter muse cursoren. Hvis bolden rører muse cursoren skal den vokse sig større.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/ojx4Y9My-

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/ojx4Y9My-

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lad os oprette en helt masse bolde der flyver rundt i et rum. Hvis de rammer hinanden skal de ændre retning.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/-9GUjLQzB

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/-9GUjLQzB

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav et objekt som er en bold der langsomt men sikkert af sig selv bevæger sig mod højre og skifter retning når den når til hhv. højre og venstre side af canvas. Herudover skal der være en kasse nederst i højre hjørne (på 100x100) der skal fungere som minimap. MiniMappet skal med en lille bold (et objekt ved navn minibold) vise hvor den store bold er på canvas.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/3trrEYOSIt

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/3trrEYOSIt

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tegn et objekt så man tydeligt kan se hvilken retning det peger. Gør så objektet altid peger mod muse cursoren.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/h5eC38rJ_

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/h5eC38rJ_

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Tilret Opgave G36 så vores Hero skyder en lille gul bold i den retning som Hero peger hver gang der er gået to sekunder.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/uVC3-3jMh

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/uVC3-3jMh

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.

Lav en stjernehimmel hvor stjernerne bevæger sig med forskellig hastighed. De stjerner der flyver hurtigt skal være størst og klarest.

Afprøv funktionaliteten: https://editor.p5js.org/JensValdez/full/ybWzmAXed

Løsningseksempel: https://editor.p5js.org/JensValdez/sketches/ybWzmAXed

Hvad nu!!: Find en eller to at arbejde sammen med. I skal nu give hinanden en opgave hvor i bruger det i har lært. Alternativt kan i eksperimentere lidt eller lave det i har lyst til indtil i starter på næste opgave.