Under det här passet ska du få testa på att programmera.

Vi ska be datorn att rita enkel grafik genom att ge den några instruktioner. Datorn kommer inte kunna gissa sig till vad du menar när du skriver kod utan du måste alltid ”stava” rätt för att den ska förstå.

Kom igång här: http://koda.nu/labbet/

Följ en av guiderna nedan eller titta på videon och följ instruktionerna i den.

// Guide 1: Koordinater och cirklar
//
// Dags att komma igång med programmering för första gången!
// Nedan ser du en rad kod. Detta är det minsta exemplet
// man kan tänka sig.

circle(200, 150, 70, "red");

// Vi anropar en funktion som heter circle som äter fyra
// argument. Mellan varje argument ska man skriva ett kommatecken.
//
// De två första argumenten bestämmen positionen, det tredje argumentet
// bestämmer storleken (radien på cirkeln), och det fjärde argumentet
// bestämmer färgen. Observera att vi skriver färgen på engelska och med
// dubbelfnuttar " innan och efter.
//
// Positionen bestäms av en X-koordinat och en Y-koordinat. X-koordinaten
// bestämmer hur många pixlar från skärmens vänsterkant som cirkeln ska ligga,
// och Y-koordinaten bestämmer hur långt från skärmens övre kant som cirkeln
// ska ligga. 
//
// I exemplet ovan fick cirkeln ligga 200 pixlar från vänsterkanten och
// 150 pixlar från övre kanten.
// UPPGIFT:
//
// Ändra lite på positionen för cirkeln, och ändra storleken och färgen.
// Pröva att skapa några fler cirklar och rita en smiley.

// Guide 2: Enkel grafik.
//
// Nu ska vi se hur man kan rita cirklar, 
// rektanglar, trianglar, ringar och streck!

// En rektangel behöver fem argument:
// 1. X-koordinat för det övre vänstra hörnet
// 2. Y-koordinat för det övre vänstra hörnet
// 3. Bredd
// 4. Höjd
// 5. Färg

rectangle(10, 20, 400, 250, "blue");

// ------------------------------------
// En cirkel behöver fyra argument:
// 1. X-koordinat för cirkelns mittpunkt
// 2. Y-koordinat för cirkelns mittpunkt
// 3. Radie
// 4. Färg

circle(200, 150, 70, "red");

// ------------------------------------
// En triangel behöver sju argument:
// 1. X-koordinat för det första hörnet
// 2. Y-koordinat för det första hörnet
// 3,4,5 och 6. X- och Y-koordinater för 
// det andra och tredje hörnet
// 7. Färg

triangle(100, 20, 180, 100, 60, 80, "green");

// ------------------------------------
// En ring behöver fem argument:
// 1. X-koordinat för ringens mittpunkt
// 2. Y-koordinat för ringens mittpunkt
// 3. Radie
// 4. Kantens tjocklek
// 5. Färg

ring(400, 200, 100, 10, "gray");

// ------------------------------------
// En linje behöver sex argument:
// 1. X-koordinat för linjens start
// 2. Y-koordinat för linjens start
// 3. X-koordinat för linjens slut
// 4. Y-koordinat för linjens slut
// 5. Linjens tjocklek
// 6. Färg

line(100, 350, 450, 100, 10, "pink");

// ------------------------------------
// UPPGIFT:
//
// Rita ett hus!

Testa mitt spel