Normaali, keskinormaali, kulman puolittaja

Kirjan tehtävät:

s. 97: 71, 72, 73, 74, 75, 76

Monisteet:

Kirjan tehtävät:

s. 97: 77, 78, 79, 80, 81

Monisteet:

Kirjan tehtävät:

s. 97-98: 83, 84,85, 86, 89, 90

Monisteet:

Piirtäminen koodilla:

Myös koodilla voi piirtää ja geometria kuvioita. Seuraavaksi harjoitellaan piirtämistä SumoCoden avulla. SumoCode löytyy Deskusta.

Esimerkki: Neliön piirtäminen

Tässä esimerkissä oppilaat piirtävät neliön askel askeleelta ja tutustuvat samalla seuraaviin komentoihin:

• brush.position.x ja brush.position.y: Asetetaan kynän aloituspaikka.
• brush.moveForward(pituus, aika): Piirretään viiva eteenpäin.
• brush.rotate(kulma): Käännetään kynää.
• brush.lift() ja brush.drop(): Nostatetaan tai lasketaan kynä.

Selitykset:

• Aloituskohta: brush.position.x ja brush.position.y määrittävät kynän aloituspisteen koordinaatit. Tässä aloituspiste on (100, 100).
• Viivan piirtäminen: brush.moveForward(100, 2) piirtää 100 pikselin pituisen viivan. Numero 2 tarkoittaa, että viiva piirtyy 2 sekunnin aikana.
• Kääntäminen: brush.rotate(90) kääntää kynän 90 astetta myötäpäivään.
• Kynän käyttö: Kynä voi piirtää vain, kun se on laskettu (brush.drop() on oletusarvo). Kun kynä nostetaan (brush.lift()), siirtyminen ei jätä jälkeä.

Neliön piirtäminen

//Määritellään kynä, jonka nimi on kyna1, koko on 15 ja väri on punainen. 

const kyna1= new Brush({ image: Images.Brush1, size: 15, color:red}); 

// Asetetaan kynä aloituskohtaan
kyna1.position.x = 100;
kyna1.position.y = 100;

// Piirretään ensimmäinen sivu
kyna1.moveForward(100, 2);

// Käännetään kynä ja piirretään toinen sivu
kyna1.rotate(90);
kyna1.moveForward(100, 2);

// Käännetään kynä ja piirretään kolmas sivu
kyna1.rotate(90);
kyna1.moveForward(100, 2);

// Käännetään kynä ja piirretään viimeinen sivu
kyna1.rotate(90);
kyna1.moveForward(100, 2);

Tehtävä 1: Vaakasuora ja normaali

Ohjeet

1. Aloita aloituspisteestä (100, 200).
2. Piirrä vaakasuora viiva 200 pikseliä pitkä.
3. Nosta kynä
4. Palaa takaisin 50 pikseliä viivaa pitkin. Mikä on sopiva kääntökulma?
5. Piirrä viivalle normaali:
   • Käännä kynä 90 astetta.
   • Laske kynä.
   • Piirrä normaali, joka on 50 pikseliä pitkä

Tehtävä 2: Vaakasuora ja normaali

1. Mieti, miten saat edellisen normaalin myös ensmmäisen suoran toiselle puolelle?

Tehtävä 3: Vinoviiva ja keskinormaali

Ohjeet

1. Aloita aloituspisteestä (150, 300).
2. Käännä kynä 45 astetta ja piirrä 150 pikseliä pitkä viiva.
3. Nosta kynä ja palaa takaisin. MIeti paljonko pitää palata takaisin, jotta olet keskellä.
4. Piirrä viivalle normaali, joka on suoran molemmilla puolilla:

Tehtävä 4: Yhdensuuntainen viiva

Ohjeet

1. Aloita aloituspisteestä (200, 200).
2. Käännä kynä 30 astetta ja piirrä  200 pikseliä pitkä viiva.
3. Nosta kynä ja siirry 50 pikseliä viivan alapuolelle. Mieti, mikä on oikea käääntökulma.
4. Piirrä alkuperäisen kanssa yhdensuuntainen suora.

Tehtävä 5: Kulman puolittaja

Ohjeet

1. Aloita aloituspisteestä (200, 300).
2. Piirrä kaksi viivaa, jotka muodostavat kulman:
   • Ensimmäinen viiva kulkee ylöspäin.
   • Käännä kynää haluamasi kulman verran (esim. 60 astetta) ja piirrä toinen viiva.
3. Laske kulman puolittaja jakamalla määrittelemäsi kulma kahdella.
4. Piirrä puolittaja aloituspisteestä siten, että se jakaa kulman kahtia.

Esimerkki: Muuttujien käyttö viivan pituudessa

Tehtävä

1. Aseta muuttuja lineLength, joka määrittää viivan pituuden.
2. Asetetaan aloituspisteen x -koordinaatti satunanisesti Math.random() * 200 funktiolla;
3. Piirrä vaakasuora viiva, jonka pituus määräytyy muuttujan arvosta.

Ratkaisu:

const brush = new Brush({ image: Images.Brush1, size: 15 });

// Määritetään viivan pituus muuttujalla
const lineLength = 150; // Viivan pituus

// Asetetaan kynän aloituspiste. Math.randon() arpoo luvun 0-1 välitä ja * keroo arvotun luvun luvulla 200
brush.position.x = Math.random() * 200;;
brush.position.y = 200;

// Piirretään viiva
brush.moveForward(lineLength, 2); // Käytetään muuttujaa pituuteen

Tehtävä 1: Suora ja keskinormaali (Random)

Ohjeet

1. Käytä muuttujia ja Math.random()-funktiota:
   • Määritä aloituspiste satunnaisilla koordinaateilla.
   • Määritä suoran pituus satunnaisesti.
2. Piirrä suora ja laske sen keskipiste.
3. Piirrä keskinormaali keskelle.

Tehtävä 2: Kulman puolittaja (Random)

Ohjeet

1. Käytä muuttujia ja Math.random()-funktiota:
   • Määritä aloituspiste satunnaisilla koordinaateilla.
   • Määritä kahden viivan välinen kulma satunnaisesti.
2. Piirrä kaksi viivaa, jotka muodostavat kulman.
3. Laske kulman puolittaja ja piirrä se.

Tehtävä 3: Yhdensuuntaiset viivat (Random)

Ohjeet

1. Käytä muuttujia ja Math.random()-funktiota:
   • Määritä viivan pituus ja aloituspiste satunnaisesti.
2. Piirrä suora ja kaksi sen kanssa yhdensuuntaista viivaa (toinen ylä- ja toinen alapuolelle).