Visa källa för Spelprogrammering.nu - Ritprogram

== Bygg ett ritprogram ==

=== Enkelt ritprogram ===
: [http://www.spelprogrammering.nu/r2/source/ritprogram_1 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: [http://spelprogrammering.nu/spela/4317413 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.

{{uppgruta | Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm. }}

==== Koden till ritprogrammet ====

<pre>

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

</pre>

=== 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.
<pre>
<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>
</pre>

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

<pre>

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

</pre>

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