Liten röd bil

Liten röd bil

I det här programmet ska vi skapa en bil som rör sig över canvasen Bilen består av 4 olika delar. En rektangel och en ellips för att rita chassi och två cirklar för att rita hjulen. Delarna på bilen måste ha en koppling till varandra för att röra sig samtidigt. När bilen ska röra sig framåt och alla delar ska vara kvar i samma förhållande till varandra är det en fördel att skapa variabler för x och y-värdena och sen placera delara i relation till dessa värden. Variablerna skapas först i koden och heter här xbil och ybil.

var xbil = 0;
var ybil = 330;

I setup() skapas canvasen med en storlek av 400 * 400 pixlar. I setup() finns också funktionen noStroke(). för att se vilken funktion den har kan du kommentera ut den senare när programmet är klart.
Skriv två // framför koden. Då blir koden en kommentar och kommer inte att köras när programmet körs.

function setup() {
 createCanvas(400, 400);
 noStroke();
}

I funktionen draw() sätts bakgrundsfärgen till ”lightblue”. Det finns ca 140 färger som kan skrivas med text ( i stället för RGB kod) Läs mer om dessa på w3schools.

Molnet ritas ut med tre ellipser och därefter ritas den bruna rektangeln ut som symboliserar mark. När bilen ritas ut används de variabler som skapades först i programmet. för varje x och y värde används variabeln med relativ förflyttning adderad eller subtraherad. Om man sen vill flytta bilen till annat y-värde kommer alla delar att följa med och koden blir lättare att ändra i.

function draw() {
 background("lightblue");
 fill(255);
 ellipse(130,50,95,40);
 ellipse(100,50,100,30);
 ellipse(150,60,120,30);
 fill(139,69,19);
 rect( 0,300,400,400);
 fill( 255,0,0);
 rect(xbil,ybil,100,20);// Chassi
 ellipse(xbil+50,ybil,60,40);//Chassi
 fill(0);
 ellipse(xbil+20,ybil+20,20,20);//Hjul
 ellipse(xbil+80,ybil+20,20,20);//Hjul
}

Ändra variabeln för ybil till något annat för att se att det fungerar.

if-satsen används för att bilen ska flytta sig framåt så länge den är placerad på canvasen. else-satsen gör så att bilen börjar om på vänster sida då den kommit utanför canvasen.

if (xbil >= -80 && xbil < 400){
  xbil ++;
}else{
  xbil = -80;
 }


 Ändra i koden så att bilen rör med högre hastighet. 

 Lägg till x och y-variabler för molnen och få dem att röra sig i motsatt riktning jämfört med bilen.