Coś 2

Z Zasoby CoderDojo
Wersja Darek Mastalerz (dyskusja | edycje) z dnia 13:57, 3 sty 2019

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)
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 od narysowania 3 punktów-wierzchołków trójkąta (np. w miejscu kliknięcia myszą). Kiedy tylko program zorientuje się, że postawiliśmy 3 punkty - rozpoczyna działanie. Dodatkowo, kiedy klikniemy 4-ty raz z rzędu - program może się zresetować (wyczyścić ekran) i przyjąć współrzędne kiknięcia jako pierwszy z trzech punktów, co rozpocznie kolejny cykl.

Jak wyznaczamy kolejne punkty naszego kształtu? Zaczynamy w punkcie o dowolnych współrzędnych na canvasie. Następnie losujemy jeden z wierzchołków powyższego trójkąta i stawiamy punkt w połowie odległości między punktem bieżącym, a wybranym wierzchołkiem (na łączącej je linii). Nowo postawiony punkt staje się punktem bieżącym. Itd.

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 - w połowie odległości między ostatnio postawionym punktem a wylosowanym wierzchołkiem narysowanego wcześniej trójkąta.

Pracujemy w p5 więc:

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

Zaczynamy od narysowania wierzchołków trójkąta w miejscach kliknięcia myszą. Przechowamy je w zmiennej globalnej:

  let nodes = []; 

Potrzbujemy również zmiennej globanej przechowującej bieżący punkt:

  let current; 
  function mousePressed() {
     // sprawdzamy czy wstawiliśmy już 3 wierzchołki (nodes.length)
        // jeżeli tak, to znaczy, że chcemy zresetować program i zacząć od początku
        // czyścimy listę wierzchołków
        // czyścimy ekran
     // jeżeli nie, znaczy że dostawiamy kolejny wierzchołek
        // tworzymy wektor ze współrzędnych kliknięcia myszą (mouseX,mouseY)
        // wpychamy go na listę nodes
     // rysujemy kółko w klikniętym miejscu
  }

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. Ustawiamy zmienną current na wektor odpowiadający losowemu punktowi canvasa (random(width),ranom(height))

Resztę pracy wykona dla nas funkcja draw().

  function draw() {
     // jeśli zobaczysz, że na liście wierzchołków są 3 punkty (nodes.length)
        // powrórz 100 razy (dla przyspieszenia)
           // narysuj mały punkt w miejscu wskazanym przez zmienną current
           // wybierz dowolny wierzchołek trójkąta [funkcji random() można podać jako argument listę i wtedy zwróci ona losowy element]
           // wyznacz wektor zaczynający się w punkcie bieżącym i kończący w wybranym wierzchołku trójkąta*
           // do bieżącego punktu dodaj wyznaczony wektor podzielony przez 2 (co oznacza: przesuń bieżący punkt o połowę odległości w kierunku wylosowanego wierzchołka trójkąta)
  }

*Podpowiedź: Coderdojo-dywan.png

Poziom 1

Algorytm polega na rysowaniu punktów we współrzędnych wyliczonych w każdym kolejnym kroku - w połowie odległości między ostatnio postawionym punktem a wylosowanym wierzchołkiem narysowanego wcześniej trójkąta.

Potrzebujemy dwóch zmiennych globalnych: jednej - listy - do przechowania wierzchołków trójkąta. Drugiej - wektora - do przechowania bieżącego punktu.

  let nodes = [];
  let current;

W funkcji mousePressed() zbierzemy 3 kliknięcia myszą i wstawimy je na naszą listę jako wierzchołki trójkąta stanowiącego podstawę naszego rysunku. Kiedy zbierzemy 3 kliknięcia - wierzchołki - program rozpocznie pracę. Kiedy klikniemy 4-ty raz - program się zresetuje: wyczyści canvas, usunie poprzednie wierzchołki trójkąta i rozpocznie wstawianie nowych, zgodnie z kliknięciami myszą.

  function mousePressed() {
    if (nodes.length === 3) { // czy zebraliśmy już 3 wierzchołki i chcemy postawić kolejny?
      nodes = [];
      background(0);
    }
    nodes.push(createVector(mouseX,mouseY)); // wstawiamy kolejny punkt
    ellipse(mouseX, mouseY, 30); 		// i rysujemy go
  }
function setup() {
  createCanvas(800, 800);
  background(0);
  noStroke();
  // losujemy punkt początkowy
  current = createVector(random(width), random(height)); 
}
function draw() {
  if (nodes.length == 3) { // czy zebraliśmy dokładnie 3 punkty
    for (let i = 0; i < 100; i++) { // dla przyspieszenia rysowania
      ellipse(current.x, current.y, 1); // rusujemy punkt bieżący
      let target = random(nodes); // losujemy wierzchołek
      let d = p5.Vector.sub(target, current); // liczymy wektor prowadzący do niego
      // przesuwamy punkt bieżący o połowę odległości do wylosowanego wierzchołka
      current.add(d.div(2)); 
  }
}

Dla urozmaicenia - można ustawić przezroczystość i kolor rysowanych punktów.