Spelprogrammering.nu - Ritprogram

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.

En pulserande fläck

Kör koden nedan i labbet på spelprogrammering.nu.. Klipp in den i vänstra rutan istället för det exempel som står där.

Testa vad som händer om du tar bort de kommenterade partierna. T alltså bort // i början av raden så koden blir aktiv.

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

Tips för tusentals färger

Nedan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b.

<script src="http://spelprogrammering.nu/simple.js">


  var r = 20;
      g = 30;
      b = 10;
  function update()
  {

    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b))

    r = r + 6;
    g = g + 2;
    b = b + 3;
    
    if (r >= 255) {r = 0};
    if (g >= 255) {g = 0};
    if (b >= 255) {b = 0};
   
  }

</script>

Om att hämta hem kod

På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Om du inte har utvecklare-fliken går du in på Safaris inställningar - Advanced och kryssari rutan längst ner.

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.

http://spelprogrammering.nu/advanced.js