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.

Uppgift
Koda ditt eget ritprogram Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm.

Koden till ritprogrammet

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

  var 	x0 = 50;
  		y0 = 50;
  		bredd =40;
  		hojd = 40;
  		distance = 60;
  		color = "green";
  		radie = 10;

  function update()
   
{
  // rita de färgade rutorna
   rectangle(x0, y0, bredd, hojd, "green"); 
   rectangle(x0, y0 + distance, bredd, hojd, "blue");
   text(x0-30, y0 + distance+25, 14, "b", "blue");
   rectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
  
  // rita med vald färg
  if(mouse.left) 
  {
    circle(mouse.x, mouse.y, radie, color);
  }
  // sudda med vit färg genom högerklick

  if(mouse.right)
  {
    circle(mouse.x, mouse.y, 10, "white");
  }
  // välj färg att rita med
    if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0) 
        && (mouse.y < y0 + hojd))  { color = "green"; }
    if (keyboard.g)  { color = "yellow"; }
    if (keyboard.b)  { color = "blue"; }
  
  // Välj radie på cikeln du ritar med
    if (keyboard.one)  { radie = 2; }
    if (keyboard.two)  { radie = 4; }
    if (keyboard.three)  { radie = 8; }
}
</script>

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