Spelprogrammering.nu - Ritprogram: Skillnad mellan sidversioner
Hoppa till navigering
Hoppa till sök
Hakan (diskussion | bidrag) |
Hakan (diskussion | bidrag) |
||
Rad 20: | Rad 20: | ||
=== Tips för tusentals färger === | === Tips för tusentals färger === | ||
< | <source> | ||
<script src="http://spelprogrammering.nu/simple.js"> | <script src="http://spelprogrammering.nu/simple.js"> | ||
Rad 48: | Rad 48: | ||
} | } | ||
</script> | </script> | ||
</ | </source> | ||
Ovan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b. | Ovan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b. |
Versionen från 16 februari 2014 kl. 16.06
Bygg ett ritprogram
Enkelt ritprogram
- enkelt ritprogram från exemplen i kapitel 2.
Undersök hur du kan
- byta färg att rita med genom att ändra i koden
- ändra storlek på ritfläcken
Mer funktionellt ritprogram
- Titta på mitt utvecklade ritprogram. Det finns i arkivs och heter: Ritprogram med flera färger (hemsida öppnas)
- Programmet är inte klart men det visar på (halv)-färdiga lösningar som du kan bygga vidare på.
- Utveckla det med fler färger och att man byter färg med en tangenttryckning.
- Lägg till färgade boxar och text i en palett.
- Byt färg om man pekar på en box.
- Bygg vidare på ritprogrammet med paletter att klicka på, punktstorlek, mm.
Tips för tusentals färger
<source> <script src="http://spelprogrammering.nu/simple.js">
var x0 = 150; y0 = 200; radie = 20; bredd = 100; höjd = 200; function update() { clearScreen() // ritar om allt nedanför rectangle(x0 - bredd /2, y0 - höjd / 2, bredd, höjd, "pink"); circle(x0, y0, radie + 2, "red"); circle(x0, y0, radie, "green"); // x0 = x0 + 0.3; // y0 = y0 + 0.3; // radie = radie + 0.3; // if (radie >= 40) {radie = 0};
}
</script> </source>
Ovan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b.
Om att hämta hem kod
- På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Ett alternativ är att högerklicka på länken i arkivet och ladda ner sidan till din dator
Filen Advanced.js
här hittar du en del objekt som används i koden.