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