Spelprogrammering.nu - Ritprogram: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
 
(4 mellanliggande sidversioner av samma användare visas inte)
Rad 1: Rad 1:
== Bygg ett ritprogram ==
== Bygg ett ritprogram ==
 
=== Enkelt ritprogram ===
=== Enkelt ritprogram ===
: [http://www.spelprogrammering.nu/r2/source/ritprogram_1 enkelt ritprogram] från exemplen i kapitel 2.
: [http://www.spelprogrammering.nu/r2/source/ritprogram_1 enkelt ritprogram] från exemplen i kapitel 2.
Rad 18: Rad 18:
{{uppgruta | Koda ditt eget ritprogram
{{uppgruta | Koda ditt eget ritprogram


Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm. }}
Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm.  
 
Lämna in på förmpga '''F1''' eller '''F3''' vilket som passar dig bäst.
}}


==== Exempel på färdigt ritprogram ====
==== Funktionerna som används nedan ====


[http://skunkphoto.se/js/ritprogram_av_Ludvig.html Ludvigs ritprogram]
: [http://spelprogrammering.nu/simple.js simple.js]


==== Koden till ritprogrammet ====
==== Koden till ritprogrammet ====

Nuvarande version från 8 november 2016 kl. 11.23

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.

Lämna in på förmpga F1 eller F3 vilket som passar dig bäst.


Funktionerna som används nedan

simple.js

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">
// Scriptet ändrar färg på en triangel. 
// Det kan användas till ritprogramet om man vill ha miljoner färger.

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

    // Klicka i höger fönstret för att det ska funka...
    
        if (keyboard.up)  { b = b + 20 ; }
    
    if (r >= 255) {r = 0 ;}
    if (g >= 255) {g = 0 ;}
 
    
    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b));
    
  }

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