Gwiazdozbiór – Piszemy program/animację – Rozwiązanie zadania

Gwiazdozbiór – Piszemy program/animację – Rozwiązanie zadania

Szczegółowe omówienie zadania Gwiazdozbiór:

Link do powyższego omówienia zadania Gwiazdozbiór: https://youtu.be/fHBNQyMf-Tc?t=1573
Skrócone omówienie kodu: https://youtu.be/fHBNQyMf-Tc?t=6600
Treść zadania: https://oki.org.pl/gwiazdozbior-zadanie/

Zadanie Gwiazdozbiór tworzy piękną animację rozgwieżdżonego nieba.
Skrócona instrukcja tworzenia programu w JavaScript – kółko na ekranie:
https://youtu.be/fk2wGqeiVBY?t=653
Kreska na ekranie: https://youtu.be/fk2wGqeiVBY?t=8042
Warto programować: https://youtu.be/fHBNQyMf-Tc?t=13


Jak się uczyć na podstawie tego zadania? https://youtu.be/QgLyXYmFQeU?t=2019
Pamiętaj by zajrzeć max 1 raz – wtedy się rozwijasz: https://youtu.be/pkLXuuOe_qA?t=3625

Lista zadań z rozwiązaniami: https://oki.org.pl/lista-zadan-materialy.php
Samouczek – przygotowanie do Olimpiad: https://oki.org.pl/tutorial/
Zajęcia: https://oki.org.pl/harmonogram-zajec/


Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić animację?
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik index_gwiazdozbior.html
Zwróć uwagę by był to plik index_gwiazdozbior.html a nie index_gwiazdozbior.html.txt lub index_gwiazdozbior.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_gwiazdozbior.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.


Alternatywnie
Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
Zapisz plik w dowolnym katalogu.
https://oki.org.pl/wp-content/uploads/2021/11/index_gwiazdozbior.html
Następne dwukrotnie kliknij na zapisanym pliku.
Otworzy się przeglądarka i uruchomi się program który rysuje animację.


Link do pobrania pliku


<!DOCTYPE html>
<html>
 
<head>
 <style>
    #plansza_animacji {
       background-color: black;
    }
</style>
</head>
 
<body>
<canvas id="plansza_animacji" width="400px" height="600px">
</canvas>

<script>
   let plansza, rysowanie; 
   let liczba_gwiazd, i;
   let gwiazdy_x=[], gwiazdy_y=[], gwiazdy_predkosc_x=[], gwiazdy_predkosc_y=[];

   plansza = document.getElementById("plansza_animacji");
   rysowanie = plansza.getContext("2d");  
 
//poczatkowe wspolrzedne gwiazd oraz poczatkowe predkosci
   liczba_gwiazd = 80;
   for (i=0; i<liczba_gwiazd; ++i){
      gwiazdy_x[i] = Math.random() * plansza.width; //wspolrzdna x z przedzialu 0 do 400
      gwiazdy_y[i] = Math.random() * plansza.height; //wspolrzdna x z przedzialu 0 do 600
      gwiazdy_predkosc_x[i] = Math.random() - 0.5; //predkosc od -0.5 do 0.5
      gwiazdy_predkosc_y[i] = Math.random() - 0.5; //predkosc od -0.5 do 0.5
   }
    

//funkcja wywolywana 100 razy na sekunde (co 10ms)
   function Animacja() {
      let odlegosc_x, odlegosc_y, odleglosc; 

      rysowanie.clearRect(0, 0, plansza.width, plansza.height);
//dla kazdej z 80 gwiazd
      for (i=0; i<liczba_gwiazd; ++i) {
//rysujemy gwiazde
         rysowanie.beginPath();
         rysowanie.fillStyle = "yellow";
         rysowanie.arc(gwiazdy_x[i] , gwiazdy_y[i] , 5, 0, 2*Math.PI);
         rysowanie.fill();
         rysowanie.closePath();
//zmieniamy polozenie gwiazdy zgodnie z jej predkoscia
         gwiazdy_x[i] = gwiazdy_x[i] + gwiazdy_predkosc_x[i];
         gwiazdy_y[i] = gwiazdy_y[i] + gwiazdy_predkosc_y[i];   
//jesli gwiazda wyjdzie poza plansze z lewej strony to zmieniamy predkosc po x na przeciwna
         if (gwiazdy_x[i] <= 0)
            gwiazdy_predkosc_x[i] = -1*gwiazdy_predkosc_x[i];   
//jesli gwiazda wyjdzie poza plansze u gory to zmieniamy predkosc po y na przeciwna
         if (gwiazdy_y[i] <= 0)
            gwiazdy_predkosc_y[i] = -1*gwiazdy_predkosc_y[i];  
//jesli gwiazda wyjdzie poza plansze z prawej strony to zmieniamy predkosc po x na przeciwna
         if (gwiazdy_x[i] >= plansza.width)
            gwiazdy_predkosc_x[i] = -1*gwiazdy_predkosc_x[i];  
//jesli gwiazda wyjdzie poza plansze u dolu to zmieniamy predkosc po y na przeciwna
         if (gwiazdy_y[i] >= plansza.height)
            gwiazdy_predkosc_y[i] = -1*gwiazdy_predkosc_y[i];   
//sprawdzamy czy odleglosc aktualnej gwiazdy od kolejnych gwiazd jest mniejsza od 80 
         for (j=i+1; j<liczba_gwiazd; ++j) {
            odlegosc_x = gwiazdy_x[i] - gwiazdy_x[j];
            odlegosc_y = gwiazdy_y[i] - gwiazdy_y[j];
            odleglosc = Math.sqrt(odlegosc_x*odlegosc_x + odlegosc_y*odlegosc_y);
//jesli odleglosc miedzy gwiazdami mniejsza od 80 to rysujmey most
            if ( odleglosc <= 80 ) {
               rysowanie.beginPath();
//Im dalej sa gwiazdy tym bardziej linia jest biała - ostatni parametr bliski 255
               rysowanie.strokeStyle =   'rgb(' + 255 + ',' + 255 + ',' + odleglosc*3 + ')';
//Im dalej sa gwiazdy tym ciensza linia
               rysowanie.lineWidth = 110/(1+odleglosc);
               rysowanie.moveTo(gwiazdy_x[i], gwiazdy_y[i]);
               rysowanie.lineTo(gwiazdy_x[j], gwiazdy_y[j]);
               rysowanie.stroke(); 
               rysowanie.closePath();
            }		 
         }
      }
   }

//funkcja Animacja bedzie wywolywana 100 razy na sekunde (co 10ms)
   setInterval(Animacja, 10);
</script>

</body> 
</html>
Link do pobrania pliku

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz