Spelprogrammering.nu - Ritprogram: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
 
(18 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 16: Rad 16:
:: Byt färg om man pekar på en box.
:: Byt färg om man pekar på en box.


* Bygg vidare på ritprogrammet med paletter att klicka på, punktstorlek, mm.
{{uppgruta | 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 ====
 
: [http://spelprogrammering.nu/simple.js simple.js]
 
==== 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 ===
=== 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>
<pre>
<script src="http://spelprogrammering.nu/simple.js">
   var x0 = 150;
   var x0 = 150;
     y0 = 200;
     y0 = 200;
Rad 44: Rad 106:
     //  if (radie >= 40) {radie = 0};
     //  if (radie >= 40) {radie = 0};
   }
   }
</script>
</pre>
</pre>


Rad 51: Rad 114:


<pre>
<pre>
<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;
   var r = 20;
Rad 57: Rad 124:
   function update()
   function update()
   {
   {
fill("green")
    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b))


     r = r + 6;
     // Klicka i höger fönstret för att det ska funka...
     g = g + 2;
   
     b = b + 3;
        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));
      
      
    if (r >= 255) {r = 0};
    if (g >= 255) {g = 0};
    if (b >= 255) {b = 0};
 
   }
   }
</script>
</pre>
</pre>


=== Om att hämta hem kod ===
=== Om att hämta hem kod ===


: På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Ett alternativ är att högerklicka länken i arkivet och ladda ner sidan till din dator
: 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 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 ===
=== Filen Advanced.js ===

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