Szczegół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 prostu kliknij na link z kodem – otworzy się strona www pokazująca wynik działania kodu.
By pobrać kod na swój komputer kliknij na link z kodem 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 “Eksploratorze plików” i wybierz opcję “Otwórz za pomocą”, wybierz “Notatnik” lub inny preferowany edytor.
- Prosta strona www z cytatem: https://youtu.be/qGpkqQ44tBk?t=466
Kod / strona www: index_c01_strona_www_cytat - Strona www z płótnem (canvas) do rysowania: https://youtu.be/qGpkqQ44tBk?t=990
Kod / strona www: index_c02_plotno_canvas - Rysujemy trójkąt na stronie www: https://youtu.be/qGpkqQ44tBk?t=1242
Kod / strona www: index_c03_trojkat_na_stronie_www - 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 - Rysujemy żółte koło na ekranie: https://youtu.be/qGpkqQ44tBk?t=3039
Kod / strona www: index_c05_zolte_kolo_na_ekranie - Rysowanie koła jako funkcja: https://youtu.be/qGpkqQ44tBk?t=3390
Kod / strona www: index_c06_zolte_kolo_funkcja - 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 - 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 - 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 - 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 - 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 - Choinka z JEDNYM łukiem lampek: https://youtu.be/qGpkqQ44tBk?t=5260
Kod / strona www: index_c12_choinka_jeden_luk_lampek - Choinka z TRZEMA łukami lampek: https://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>