Kodeskole 6
.\CoderDojo1
mChX6-W/
P5.JS - Processing med JavaScript
Flot grafik
Youtube tutorials!
Masser af kode
I dag skal vi lave funktioner!
Måske har du haft om funktioner i skolen?
y = 2*x <-- y er en funktion af x
Til kodeskole:
function gangmedto(x) {
return 2*x;
}
Navn
Parameter
Returværdi
Der er to forskellige slags funktioner
//Funktioner der gør noget
function sigtekorn(x,y) {
line(x-10,y,x+10,y);
line(x,y-10, x,y+10);
}
//Funktioner der regner noget ud
function max(x,y) {
if (x>y) {
return x;
} else {
return y;
}
}
Hvor er returværdien???
Opgave 1 - Linje hen til kassen med max
PLAN
Tast max-funktionen ind.
Prøv at regne max(3,10) ud
Prøv at regne max(3*4,10) ud
Lav en linje fra mouseX, mouseY til
max(mouseX, 200), max(mouseY, 200)
Opgave 2 - sigtekorn
PLAN
Lav en funktion der tegner et sigtekort i med centrum i x,y (tip: Gå to slides tilbage!)
Brug funktionen til at tegne et sigtekort, der hvor musen er
Opgave 3 - funktion der finder punktet på kassen
PLAN
Ved sidste skole skrev i et program, der kan tegne linjen her som
line(mouseX, mouseY, x, y)
Lav en funktion, der finder x og y
Slut den med
return [x,y];
HJÆLP: Afstandsfunktion
function afstand(vores_x, vores_y,
kasse_x, kasse_y,
bred, hoej) {
var x = kasse_x;
var y = kasse_y;
if (vores_x>x) {
x = vores_x;
}
if (x > kasse_x+bred) {
x = kasse_x+bred;
}
if (vores_y>y) {
y = vores_y;
}
if (y>kasse_y+hoej) {
y = kasse_y+hoej;
}
return dist(vores_x, vores_y, x, y);
}
Opgave 4
PLAN
Hvordan ved vi om cirklen rører kassen?
Brug funktionen fra opgave 3 til at finde det x og y for nærmeste punkt på kassen
Brug dist til at regne afstanden fra mus til punktet ud
Hvis afstanden er mindre end radius - farv cirklen!
BONUS:
Lav function touchbox(cx, cy, radius, bx, by, bw, bh)
Opgave 5
PLAN
Find ud af om nogen af hjørnerne i den lille firkant er inden i den store firkant
Hvordan?
Find linjen fra hjørnet til den store kasse med funktionen fra opgave 3. Hvis den ender der hvor hjørnet er, så er hjørnet inde i kassen.
BONUS
Lav en boxcollision funktion!
Opgave 6
PLAN
Har du tænkt over at *hele* skærmen er en firkant. Man kan tegne den med
rect(0,0,bredde,hoejde)
Tjek om *alle* den lille firkants hjørner er inde i den kasse med funktionen fra opgave 3
BONUS
Lav det til en funktion!
Opgave 7 - lav det til et spil!
Nu hvor du kan tegne cirkler og firkanter og ved om de støder ind i hinanden kan du lave en hel masse spil!
* Air hockey med mål!
* Pong
Opgave 7 - alternativ opgave
Lav en funktion, der tegner et sigtekorn, eller en anden figur
Brug den til at tegne den samme figur flere steder
f.eks. i
(400-mouseX, mouseY)
(mouseX, mouseY)
... prøv med andre formler.
CHALLENGE
function emoji(x,y)
liste af koordinater
much programming
such emoji