Coś 1

Z Zasoby CoderDojo
Skocz do: nawigacji, wyszukiwania

Zadanie polega na napisaniu programu rysującego pewien kształt według podanego przepisu. Jaki to kształt?

Poziom 3

Algorytm polega na rysowaniu punktów na canvasie we współrzędnych wyliczonych w każdym kolejnym kroku.

Zaczynamy w punkcie (0,0)

  prev = [
     0,
     0
  ]

Algorytm wyznaczenia następnego punktu polega na poddaniu współrzędnych poprzedniego punktu przekształceniu liniowemu next=A*prev+B, gdzie A i B są macierzami przekształcenia, a next i prev - współrzędnymi następnego i poprzedniego punktu, dobierając macierze przekształcenia z zgodnie z podanymi niżej prawdopodobieństwami.

Z prawdopodobieństwem 0.01:

  A = [
     [0,0],
     [0,0.16]
  ]
  B = [
     0,
     0
  ]

Z prawdopodobieństwem 0.85:

  A = [
     [0.85, 0.04],
     [-0.04,0.85]
  ]
  B = [
     0,
     1.6
  ]

Z prawdopodobieństwem 0.07:

  A = [
     [0.20, -0.26],
     [0.23, 0.22]
  ]
  B = [
     0,
     1.6
  ]

I w końcu z prawdopodobieństwem 0.07:

  A = [
     [-0.15, 0.28],
     [0.26, 0.24]
  ]
  B = [
     0,
     0.44
  ]

Najładniejszy obrazek otrzymamy mapując współrzędne punktu x,y na faktyczne współrzędne rysowanego punktu w następujący sposób:

  x z przedziału -2.1820, 2.6558 na 0, width
  y z przedziału 0, 9.9983 na height, 0

Dodatkowo, po ustawieniu colorMode(HSB) można zamapować y z przedziału 0, 9.9983 na współczynnik h koloru punktu w zakresie 150, 0.

Podpowiedź do szybkości działania W celu przyspieszenia działania programu można w funkcji draw() wykonać 100 iteracji pętli rysującej i wyliczającej kolejny punkt.

Poziom 2

Algorytm polega na rysowaniu punktów we współrzędnych wyliczonych w każdym kolejnym kroku.

Pracujemy w p5 więc:

  function setup() {
  }
  function draw() {
  }

W funkcji setup rysujemy canvas o dowolnych wymiarach (np. kwadratowy) i ustawiamy mu kolor tła. W funkcji draw - nie czyścimy canvasa. Będziemy do niego po prostu dostawiać punkty.

Zaczynamy w punkcie (0,0). Współrzędne przechowujemy w zmiennych globalnych.

  x = 0
  y = 0

Algorytm wyznaczenia następnego punktu

Z prawdopodobieństwem 0.01 następny punkt to:

  nextX = 0;
  nextY = 0.16 * y;

Z prawdopodobieństwem 0.85 następny punkt to:

  nextX = 0.85 * x + 0.04 * y;
  nextY = -0.04 * x + 0.85 * y + 1.6;

Z prawdopodobieństwem 0.07 następny punkt to:

  nextX = 0.2 * x - 0.26 * y;
  nextY = 0.23 * x + 0.22 * y + 1.6;

I w końcu z prawdopodobieństwem 0.07 następny punkt to

  nextX = -0.15 * x + 0.28 * y;
  nextY = 0.26 * x + 0.24 * y + 0.44;

Najładniejszy obrazek otrzymamy mapując współrzędne punktu x,y w następujący sposób:

  px = x z przedziału -2.1820, 2.6558 na 0, width
  py = y z przedziełu 0, 9.9983 na height, 0

I rysując punkt we współrzędnych (px,py)

Dodatkowo, po ustawieniu colorMode(HSB) można zamapować y z przedziału 0, 9.9983 na współczynnik h koloru punktu w zakresie 150, 0.

W celu przyspieszenia działania programu można w funkcji draw wykonać 100 iteracji pętli rysującej i wyliczającej kolejny punkt.

Podpowiedź do wyliczania prawdopodobieństwa Użyj funkcji random() żeby wylosować liczbę z przedziału <0,1) a następnie użyj wyrażenia warunkowego jak na rysunku poniżej :)

  0--0.01-----------------------------------------0.86-------0.93-------1.0


Poziom 1

Algorytm polega na rysowaniu punktów we współrzędnych wyliczonych w każdym kolejnym kroku.

Współrzędne punktu przechowujemy w zmiennych globalnych x i y, które na początku ustawiamy na 0. Zadeklaruj dwie zmienne globalne:

  x=0;
  y=0;
  function setup() {
     Tworzymy canvas (600,600)
     Ustawiamy tło na (51)
     Ustawiamy tryb koloru na (HSB)
  }

W funkcji draw wyznaczamy współrzędne kolejnego punktu i rysujemy go. Najlepiej napisać dwie funkcje nextPoint() i drawPoint()

  function nextPoint() {
     //Zadeklaruj dwie zmienne nextX i nextY
     Wylosuj liczbę p z przedziału <0,1)
     Jeśli p < 0.01
        nextX = 0;
        nextY = 0.16 * y;
     W przeciwnym przypadku jeśli p < 0.86
        nextX = 0.85 * x + 0.04 * y;
        nextY = -0.04 * x + 0.85 * y + 1.6;
     W przeciwnym przypadku jeśli p < 0.93
        nextX = 0.2 * x - 0.26 * y;
        nextY = 0.23 * x + 0.22 * y + 1.6;
     W przeciwnym przypadku
        nextX = -0.15 * x + 0.28 * y;
        nextY = 0.26 * x + 0.24 * y + 0.44;
     Ustaw x = nextX, y = nextY
  }

W funkcji rysowania punktu zamapujemy współrzędne x i y na wymiary canvasa a następnie narysujemy punkt w wyznaczonym miejscu. Dla dodania interesującego koloru zamapujemy współrzędną y na przedział 150,0 komponentu HSB koloru punktu.

  function drawPoint() {
     // Wyznaczamy współrzędne punktu do narysowania: px i py
     px = zamapuj x z przedziału -2.1820, 2.6558 na 0, width
     py = zamapuj y z przedziełu 0, 9.9983 na height, 0
     Ustaw szerokość kreski na 0.5
     h = zamapuj y z przedziełu 0, 9.9983 na 150, 0
     Ustaw kolor linii na (h, 100, 100)
     Ustaw brak wypełnienia
     Narysuj punkt we współrzędnej (px, py)
  }

W funkcji draw(), w celu przyspieszenia animacji wykonamy kilkaset iteracji rysowania i wyliczania punktu

  function draw() {
     Powtórz 100 razy
        Rysuj punkt
        Wyznacz następny punkt
  }

I to wszystko. Co wyszło?