Untitled

//sigil by norma 
//draw butterfly with a letter N in the middle

// Moi Norma, kirjoittelen tälläisiin koodikommentteihin mitä nää eri osat tässä tekee.
// Osa on varmaa ihan selkeetä mut jos opit jotain uutta ni hyvä juttu!

let x = 60 //Tässä tallennat x:n arvoksi 60, ettei aina tarvitse kirjoittaa "60" vaan riittää "x"

// Tämä on p5.js:n oma funktio jossa määritellään "raamit" ohjelmalle
// Määrittelet tässä, että luodaan tyhjä 600x600 alusta johon voit myöhemmin piirtää
function setup() {
  createCanvas(600,600);
}

// Tämä on p5.js:n oma funktio, jonka sisältä noita erilaisia piirto-ominaisuuksia voidaan käyttää 
function draw() {
  background(230,255,0);     // Värittää tuon aiemmin createCanvalla luodun taustan haluamallesi värille.
  strokeWeight(4);           // Tämä määrittelee miten paksuja piirtämäsi eri viivat (esim. line) ovat -tästä eteenpäin- 
  fill(0)                    // Tämä määrittelee millä värillä piirtämäsi muodot väritetään -tästä eteenpäin-
                             // Voit määritellä näille myöhemmin uusia arvoja, esim jos haluat paksumman N kirjaimen myöhemmin, 
                             // asetat vaan strokeWeight(8) ennen piirtoa
  //draw antennas
  stroke(0,0,0)    // stroke() määrittelee piirtämiesi viivojen värit -tästä eteenpäin-
  line(width/2,100,width/2+x,x);  // nämä molemmat viivat piirtyvät siis mustina
  line(width/2,100,width/2-x,x);

  //draw little black dots to the end of the antennas
  //draw right dot
  ellipse(width/2-x,height/10,width/35)      // Nyt piirrät ellipsejä perhosta varten,
  //draw left dot                            // värin määrittelee rivin 19 fill(0) näille kaikille
  ellipse(width/2+x,height/10,width/35)      // voit halutessasi vaihtaa väriä milloin haluat käyttämällä tuota fill()

  //draw wings 
 //draw ellipse to the up left
  ellipse(width/2-x,height/3,width/3-width/35)
  //draw ellipse to the left bottom
  ellipse(width/2-x,height/2+x,width/4)
   //draw ellipse to the up right
  ellipse(width/2+x,height/3,width/3-width/35)
  //draw ellipse to the right bottom 
  ellipse(width/2+x,height/2+x,width/4)
  //draw tall ellipse in the middle for the body of a butterfly
   ellipse(width/2,height/2,width/8,height-x*3)
  //draw dots 
  fill(230,255,0);       // Nyt vaihdat väriä muotojen piirtämistä varten keltaiseksi!
   //draw yellow dot ellipse to the up left
  ellipse(width/2-x,height/3,width/15)
   //draw yellow dot ellipse to the up right        // Nämä piirtyvät nyt keltaisiksi palloksi
  ellipse(width/2+x,height/3,width/15)
   //draw yellow dot ellipse to the right bottom 
  ellipse(width/2+x,height/2+x,width/25)
  //draw yellow dot ellipse to the left bottom
  ellipse(width/2-x,height/2+x,width/25)

   //draw N with 3 lines in the middle
  // Tässä kohtaa tulee vaihtaa viivojen piirtämisen väriä, jotta N piirtyy keltaiseksi kuten haluat
  stroke(230,255,0)    // Tehdään se tässä, tätä strokea kutsuit viimeksi rivillä 23, nyt korvataan tuo musta keltaisella.
  strokeWeight(4);     // Tätä vaihtamalla saataisi paksumpi/ohuempi N.
  line(width/2+x,height/3,width/2+x,height/2+x);
  line(width/2-x,height/3,width/2-x,height/2+x); // Nämä viivat piirtyvät nyt noilla uusilla asetuksilla,
  line(width/2-x,height/3,width/2+x,height/2+x); // eli "keltainen, paksuus 4", kuten riveillä 57 ja 58 sanottiin.
}

//if window is resized, resize canvas to fit the new window size
// Tämä on vain skaalautumiseen liittyvä määritys
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}