Świąteczna choinka – rozwiązanie zadanie – animacja, strona www, JavaScript

Świąteczna choinka – rozwiązanie zadanie – animacja, strona www, JavaScript

index_c01_stronawww_cytatSzczegółowe omówienie zadania Świąteczna choinka:

Link do powyższego omówienia zadania Świąteczna choinka: https://youtu.be/qGpkqQ44tBk?t=164
Skrócone omówienie kodu: https://youtu.be/qGpkqQ44tBk?t=7505
Treść zadania: https://oki.org.pl/swiateczna-choinka-zadanie/
Kod programu z instrukcją – na dole strony.

Zadanie Świąteczna choinka tworzy piękną animację choinki.


Poniżej kody poszczególnych części tworzenia świątecznej choinki.
By zobaczyć efekt działania poszczególnego kodu / strony www po prosty kliknij na link z kodem – otworzy się strona www pokazująca wynik działania kodu.
By pobrać kod na swój komputer kliknij na linkz kodem/ strona www prawym klawiszem myszy i wybierz “zapisz jako” – a następnie zapisz plik w dowolnym katalogu. Następne dwukrotnie kliknij na zapisanym pliku. Otworzy się przeglądarka i wykona program. By edytować kod programu, kliknij prawym klawiszem myszy na pobranym pliku w “Folder plików” i wybierz opcję “Otwórz za pomocą” i wybierz “Notatnik” lub inny preferowany edytor.

  1. Prosta strona www z cytatem: https://youtu.be/qGpkqQ44tBk?t=466
    Kod / strona www: index_c01_strona_www_cytat
  2. Strona www z płótnem (canvas) do rysowania: https://youtu.be/qGpkqQ44tBk?t=990
    Kod / strona www: index_c02_plotno_canvas
  3. Rysujemy trójkąt na stronie www: https://youtu.be/qGpkqQ44tBk?t=1242
    Kod / strona www: index_c03_trojkat_na_stronie_www
  4. Rysujemy choinkę z 4 trójkątów: https://youtu.be/qGpkqQ44tBk?t=1853
    Kod / strona www: index_c04_choinka_cztery_trojkaty

    Czym jest okrąg? Jak rysujemy okrąg? – Trochę matematyki i informatyki rysującej okręgi! https://youtu.be/qGpkqQ44tBk?t=2532
  5. Rysujemy żółte koło na ekranie: https://youtu.be/qGpkqQ44tBk?t=3039
    Kod / strona www: index_c05_zolte_kolo_na_ekranie
  6. Rysowanie koła jako funkcja: https://youtu.be/qGpkqQ44tBk?t=3390
    Kod / strona www: index_c06_zolte_kolo_funkcja
  7. Rysujemy okrąg złożony z punktów / kółek: https://youtu.be/qGpkqQ44tBk?t=3563
    Kod / strona www: index_c07_okrag_z_zoltych_kol
  8. Rysujemy fragment okręgu – łuk – oczywiście złożony z punktów: https://youtu.be/qGpkqQ44tBk?t=4258
    Kod / strona www: index_c08_polowa_luku
  9. Rysujemy luk (fragment okręgu), kąty każdego punktu pamiętamy w tablicy: https://youtu.be/qGpkqQ44tBk?t=4477
    Kod / strona www: index_c09_polowa_luku_punkty_luku_w_tablicy
  10. Rysujemy spłaszczony okrąg – jego fragment przybliży nam łuk lampek: https://youtu.be/qGpkqQ44tBk?t=4729
    Kod / strona www: index_c10_splaszczony_okrag
  11. Rysujemy spłaszczony okrąg PRZY POMOCY FUNKCJI – jego fragment przybliży nam łuk lampek:  https://youtu.be/qGpkqQ44tBk?t=4990
    Kod / strona www: index_c11_splaszczony_okrag_funkcje
  12. Choinka z JEDNYM łukiem lampek: https://youtu.be/qGpkqQ44tBk?t=5260
    Kod / strona www: index_c12_choinka_jeden_luk_lampek
  13. Choinka z TRZEMA łukiem lampekhttps://youtu.be/qGpkqQ44tBk?t=5485
    Kod / strona www: index_c13_choinka_trzy_luki_lampek


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_swiateczna_choinka.html
Zwróć uwagę by był to plik index_swiateczna_choinka.html a nie index_swiateczna_choinka.html.txt lub index_swiateczna_choinka.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_swiateczna_choinka.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/12/index_swiateczna_choinka.html
Następne dwukrotnie kliknij na zapisanym pliku.
Otworzy się przeglądarka i uruchomi się program który rysuje animację.


Kod HTML / JavaScript programu Świąteczna choinka, 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="600px" height="600px">
</canvas>
<script>
let plansza, rysowanie;
plansza = document.getElementById("plansza_animacji");
rysowanie = plansza.getContext("2d");  
//Otworz ten plik w Visual Studio Code lub innym edytorze do JavaScript
//Mozesz otworzyc w notatniku, ale bedzie trudniej modyfikowac
////////////////////////
//Funkcja ktora bedzie uruchamiana co 10ms to RysujChoinke()
//wywoluje pozostale funkcje
//definijemy 3 tablice na 3 lancuchy lampek
let katy_lampki_1=[]; liczba_lampek_1 = 40; 
let kat_start_1 = (15/100)*2*Math.PI; kat_koniec_1 = (50/100)*2*Math.PI; 
let katy_lampki_2=[]; liczba_lampek_2 = 30; 
let kat_start_2 = (15/100)*2*Math.PI; kat_koniec_2 = (50/100)*2*Math.PI; 
let katy_lampki_3=[]; liczba_lampek_3 = 10; 
let kat_start_3 = (15/100)*2*Math.PI; kat_koniec_3 = (50/100)*2*Math.PI; 
//trójkąt z 3 wierzchoami i zadany kolorem
function RysujTrojkat(x1, y1, x2, y2, x3, y3, kolor) {
rysowanie.beginPath();
rysowanie.moveTo(x1, y1);
rysowanie.lineTo(x2, y2);
rysowanie.lineTo(x3, y3);
rysowanie.fillStyle = kolor;
rysowanie.fill();
rysowanie.closePath();
}
//funkcja ktora rysuje lampke (promien 2)
//lub bombke - promien 14 - wieksze kolo
function RysujKolo(x, y, promien, kolor) {
rysowanie.beginPath();   
rysowanie.fillStyle = kolor;
rysowanie.arc(x, y, promien, 0, 2*Math.PI);
rysowanie.fill();   
rysowanie.closePath();
}
//Definiujemy pojedynczy lancuch lampek
//w tablicy katy_lampki wpisujemy kolejne katy lampek (fragment luku)
//katy lampek sa od kat_start do kat_koniec
function ZdefiniujLampki(katy_lampki, liczba_lampek, kat_start, kat_koniec) {
zmiana_kata = (kat_koniec-kat_start)/liczba_lampek;
let kat = kat_start;
for (i=0; i<liczba_lampek; ++i) {
katy_lampki[i] = kat;
kat += zmiana_kata;
}
}
//Rysujemy lampki z tablicy katy_lampki - luk ma srodek w srodek_x, srodek_y 
//oraz rozne promienie po x(r_x) oraz r_y by byl efekt splaszczenia luku a nie fragment okregu
function RysujLampki(katy_lampki, liczba_lampek, kat_start, kat_koniec, srodek_x, srodek_y, r_x, r_y, kolor, predkosc) {
for (i=0; i<liczba_lampek; ++i) {
x = srodek_x + r_x * Math.cos(katy_lampki[i]);
y = srodek_y + r_y * Math.sin(katy_lampki[i]);
RysujKolo (x, y, 2, kolor); //rysujemy male kolo o promieniu 2 - lampke
katy_lampki[i] += predkosc; //lampka  zwieksza swoj kat by w kolejnmy ruchu byla nieco dalej
if (katy_lampki[i] > kat_koniec) //jesli wyjdzie poza kat koncowy to jest przuesuwana na poczatek
katy_lampki[i] = kat_start;   
}
}
//Rysujemy bombki - dla każdej bombki tworzymy jej kolor w zmiennej kolor
//na przyklad dla bombki 10 - red: bombki[10][0], green: bombki[10][1], blue: bombki[10][2]
//oraz rozne promienie po x(r_x) oraz r_y by byl efekt splaszczenia luku a nie fragment okregu
function RysujBombki() {
for (i=0; i<liczba_bombek; ++i) {
kolor = "rgb(" + bombki_kolor[i][0] + "," + bombki_kolor[i][1] + "," + bombki_kolor[i][2] + ")";
RysujKolo(bombki_x[i], bombki_y[i], 14, kolor); //rysujemy wieksze kolo o promieniu 14 - bombke
//zmieniamy kazdy kolor  r,g,b (od 0 do 2) by bombka w kolejnym rysowaniu miała inny kolor
for (j=0; j<3; ++j) { 
bombki_kolor[i][j] += bombki_kolor_zmiana[i][j];
if ( bombki_kolor[i][j] <= 0)
bombki_kolor_zmiana[i][j] *= -1;
if ( bombki_kolor[i][j] >= 255)
bombki_kolor_zmiana[i][j] *= -1;
}
}
}
//Funkcja uruchamiana co 10 ms - rysuje choinke
function RysujChoinke() {
//Czyscimy caly ekran
rysowanie.clearRect(0, 0, plansza.width, plansza.height);
//Rysujemy choinke - 4 coraz ciemniejsze trojkaty
RysujTrojkat(100, 500, 500, 500, 300, 250, "rgb(0,120,0)"); 
RysujTrojkat(150, 400, 450, 400, 300, 200, "rgb(0,140,0)"); 
RysujTrojkat(200, 300, 400, 300, 300, 150, "rgb(0,160,0)"); 
RysujTrojkat(250, 200, 350, 200, 300, 100, "rgb(0,180,0)"); 
//Rysujemy 3 lancuchy lampek
RysujLampki(katy_lampki_1, liczba_lampek_1, kat_start_1, kat_koniec_1, 357, 440, 207, 50, "rgb(255,255,0)", 0.001);
RysujLampki(katy_lampki_2, liczba_lampek_2, kat_start_2, kat_koniec_2, 335, 340, 136, 20, "rgb(255,0,0)", 0.0011);
RysujLampki(katy_lampki_3, liczba_lampek_3, kat_start_2, kat_koniec_2, 322, 240, 80, 20, "rgb(150,150,255)", 0.0012);
//Rysujemy bombki
RysujBombki();
}
//To sekcja ktora definiuje lampki i bombki
//Definiujemy 3 tablice katy_lampki_1,, katy_lampki_2, katy_lampki_3 w ktorych sa katy poszczegolnych
//lancuchow lampek
ZdefiniujLampki(katy_lampki_1, liczba_lampek_1, kat_start_1, kat_koniec_1);
ZdefiniujLampki(katy_lampki_2, liczba_lampek_2, kat_start_2, kat_koniec_1);
ZdefiniujLampki(katy_lampki_3, liczba_lampek_3, kat_start_3, kat_koniec_1);
//Definiujemy bombki
let liczba_bombek = 20; //mozemy swobodnie zmnienic liczbe bombek
let bombki_x=[]; bombki_y=[]; //tablica wspolrzednych x i y bombek - u nas po 20 elementow
let bombki_kolor = []; bombki_kolor_zmiana = []; //kolory kazdej z bombek i zmiana kazdego koloru kazdej bombki 
//mowimy, ze  bombki_kolor[i] = []; - czyli kolor i-tej bombki sklada sie z tablicy - 3 elementowej od 0 do 2
//przechowujacej kolory r, g, b bombki
//mowimy, ze  bombki_kolor_zmiana[i] = []; - czyli ZMIANA KOLORU i-tej bombki sklada sie z tablicy 
//3 elementowej od 0 do 2 przechowujacej ZMIANY KAZDEGO KOLORU r, g, b bombki
for (i=0; i<liczba_bombek; ++i) {
bombki_kolor[i] = [];
bombki_kolor_zmiana[i]=[];
bombki_x[i] = 200 + Math.random() * 200; //losujemy wspolrzedna x bomki z przedzialu 200 do 400
bombki_y[i] = 300 + Math.random() * 200; //losujemy wspolrzedna x bomki z przedzialu 300 do 500
}
//definiujemy kolory r(0) g(1) b(2) kazdej lampki i szybkosc zmiany kazdego koloru r(0) g(1) b(2)
for (i=0; i<liczba_bombek; ++i) {
for (j=0; j<3; ++j) {
bombki_kolor[i][j] = Math.random() * 255; //kolor j (0-red, 1-green, 2 blue) bombki[i] - od do 255
bombki_kolor_zmiana[i][j] = Math.random()*0.9 + 0.8; // zmiana kolor j (0-red, 1-green, 2 blue) bombki[i]
}    
}
//Ustalismy parametry 3 lancuchow lampek i pewnej liczby (20) bombek
//Co 10 ms (100 razy na sekunde) uruchamiamy funkcje RysujChoinke ktora narysuje
// wyczysci ekran
// 4 trojkaty choinki
// 3 lancuchy lampek i przesunie dalej dla nastepnego rysowania
// wszystkie bombki i zmieni ich kolor dla nastepnego rysowania
setInterval(RysujChoinke, 10);
</script>
</body> 
</html>
Kod HTML / JavaScript programu Świąteczna choinka, który jest omówiony w powyższym filmie

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz