Szczegółowe omówienie tworzenia programistycznej pocztówki Białe Święta:
Link do powyższego omówienia strony www Białe Święta: https://youtu.be/WrtYgCXxpPY?t=706
Treść zadania: https://oki.org.pl/biale-swieta-zadanie/
Kod aplikacji – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/2022/12/biale-swieta.html
Skrócone omówienie kodu rysującego zieloną choinkę i padające zmieniające się płatki śniegu: https://youtu.be/WrtYgCXxpPY?t=6311
Kolejne etapy tworzenia naszego kodu:
Otwieramy plik biale-swieta.html: https://youtu.be/WrtYgCXxpPY?t=841
–
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/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Jak uruchomić / pobrać programistczną pocztówkę Białe Święta?
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
1. Kliknij na poniższy link prawym klawiszem myszy i wybierz „zapisz jako”:
https://oki.org.pl/wp-content/uploads/2022/12/biale-swieta.html
2. Zapisz plik w dowolnym katalogu.
3. Dwukrotnie kliknij na nazwie pliku.
Otworzy się przeglądarka i uruchomi się program który animuje ruch kaktusa.
4. By zmienić kod, wygląd,… -> Kliknij prawym klawiszem na zapisanym pliku i wybierz „Otwórz za pomocą” a następnie wybierze „Notatnik” lub dowolny inny edytor. Rekomenduję użycie Visual Studio Code zamiast notatnika: https://youtu.be/Ck6k19b7FVU?t=994
Alternatywnie
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik biale-swieta.html
Zwróć uwagę by był to plik biale-swieta.html a nie biale-swieta.html.txt lub biale-swieta.html.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku biale-swieta.html
Powinna otworzyć się domyślna przeglądarka i uruchomić aplikację.
–
Link do pobrania pliku
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="plansza_canvas" width="400px" height="600px">
</canvas>
<script>
let plansza, rysowanie;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
//trojkat ktory ma podstawe rownolegla do osi X
function RysujTrojkat(x_lewy, x_prawy, y_dol, y_gora, kolor) {
rysowanie.beginPath();
rysowanie.moveTo(x_lewy, y_dol);
rysowanie.lineTo(x_prawy, y_dol);
rysowanie.lineTo((x_lewy+x_prawy)/2, y_gora);
rysowanie.fillStyle = kolor;
rysowanie.fill();
rysowanie.closePath();
}
function RysujChoinke() {
RysujTrojkat(50, 350, 500, 250, "rgb(0,115,0)");
RysujTrojkat(60, 340, 400, 150, "rgb(0,185,0)");
RysujTrojkat(90, 310, 300, 100, "rgb(0,255,0)");
}
function RysujPlatek(x_srodka, y_srodka, rozmiar, kolor) {
rysowanie.fillStyle = kolor;
rysowanie.beginPath();
rysowanie.arc(x_srodka, y_srodka, rozmiar, 0, 2 * Math.PI);
rysowanie.fill();
rysowanie.closePath();
}
function LosujPlatek (numer_platka) {
//Math.random() - generuje losowa liczbe od 0 do 1
platki_x[numer_platka] = 400*Math.random(); //losowa od 0 do 400
platki_y[numer_platka] = 100*Math.random(); //losowa od 0 do 100
platki_kolor[numer_platka] = 100*Math.random(); //losowa od 0 do 255
platki_wielkosc[numer_platka] = 2 + 3*Math.random(); // losowa od 2 do 5
platki_predkosc_y[numer_platka] = 0.1 + Math.random(); //od 0.1 do 1.1
platki_predkosc_zmiany_wielkosci[numer_platka] = 0.001;
platki_predkosc_zmiany_koloru[numer_platka] = 0.5; //szybkosc pojasniania
}
let platki_x=[], platki_y=[], platki_kolor=[], platki_wielkosc=[];
let platki_predkosc_y=[], platki_predkosc_zmiany_koloru=[];
let platki_predkosc_zmiany_wielkosci = [];
let liczba_platkow, i;
liczba_platkow = 200;
for (i=0; i<liczba_platkow; ++i)
LosujPlatek (i);
function Animacja() {
let kolor;
rysowanie.fillStyle = "rgb(0,0,60)";
rysowanie.fillRect(0,0, plansza.width,plansza.height);
RysujChoinke();
for (i=0; i<liczba_platkow; ++i) {
kolor = "rgb(" + platki_kolor[i] + "," +
platki_kolor[i] + "," + platki_kolor[i] + ")";
RysujPlatek(platki_x[i], platki_y[i], platki_wielkosc[i], kolor);
platki_kolor[i] = platki_kolor[i] + platki_predkosc_zmiany_koloru[i];
if (platki_kolor[i]>255)
platki_kolor[i] = 255;
platki_wielkosc[i] = platki_wielkosc[i] + platki_predkosc_zmiany_wielkosci[i];
if (platki_wielkosc[i]>10)
platki_wielkosc[i] = 10;
platki_y[i] = platki_y[i] + platki_predkosc_y[i];
if (platki_y[i] > plansza.height)
LosujPlatek(i);
// platki_x[i] = platki_x[i] + -1.5+3*Math.random();
}
}
setInterval(Animacja, 10); //co 10ms czyli 100 razy na sekunde wywoluj funkcje Animacja()
</script>
</body>
</html>