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ę.


Kod HTML / JavaScript programu Gwiazdozbiór, który jest omówiony w powyższym filmie


<!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>
Kod HTML / JavaScript programu Gwiazdozbiór, który jest omówiony w powyższym filmie

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz