Szczegółowe omówienie zadania Mandelbrot:
Link do powyższego omówienia zadania Mandelbrot: https://youtu.be/fk2wGqeiVBY?t=1240
Treść zadania: https://oki.org.pl/mandelbrot-zadanie/
Zadanie Mandelbrot pokazuje jak w prosty sposób stworzyć fraktal na stronie www.
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
Piękno fraktali: https://youtu.be/fk2wGqeiVBY?t=29
W czym pisać program tworzący fraktal? https://youtu.be/fk2wGqeiVBY?t=7952
–
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/
Bezpłatne zajęcia OKI: https://oki.org.pl/harmonogram-zajec/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
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_mandelbrot.html
Zwróć uwagę by był to plik index_mandelbrot.html a nie index_mandelbrot.html.txt lub index_mandelbrot.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_mandelbrot.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/10/index_mandelbrot.html
Następne dwukrotnie kliknij na zapisanym pliku.
Otworzy się przeglądarka i uruchomi się program który rysuje animację.
–
Kod HTML / JavaScript programu Mandlebrot, który jest omówiony w powyższym filmie
–
<!DOCTYPE html>
<html>
<head>
<style>
#plansza {
background-color: black;
}
</style>
</head>
<body>
<canvas id="plansza" width="500px" height="500px">
</canvas>
<script>
function NarysujPunkt (x,y,kolor) {
rysowanie.beginPath();
rysowanie.fillStyle = kolor;
rysowanie.rect (x, y, 1, 1);
rysowanie.fill();
rysowanie.closePath();
}
function NarysujPunkt (x, y, kolor) {
rysowanie.beginPath();
rysowanie.fillStyle = kolor;
rysowanie.rect(x, y, 1, 1);
rysowanie.fill();
rysowanie.closePath();
}
function WKtorejIteracjiUcieknie (x, y) {
let m_akt, n_akt, m_pop, n_pop;
let i;
m_akt = x;
n_akt = y;
for (i=1; i<=180; ++i) {
if ( (m_akt*m_akt + n_akt*n_akt) >= 4 ) {
return i;
}
m_pop = m_akt;
n_pop = n_akt;
m_akt = m_pop*m_pop - n_pop*n_pop + x;
n_akt = 2*m_pop*n_pop + y;
}
return 0;
}
let plansza_gry, rysowanie;
let x_canvas, y_canvas;
let ile_iteracji;
let x_fraktal_poczatek, x_fraktal_koniec;
let x_fraktal_akt, y_fraktal_akt;
let y_fraktal_poczatek, y_fraktal_koniec;
let x_fraktal_zmiana, y_fraktal_zmiana;
plansza_gry = document.getElementById("plansza");
rysowanie = plansza_gry.getContext("2d");
x_fraktal_poczatek = -2; x_fraktal_koniec = 2;
y_fraktal_poczatek = -2; y_fraktal_koniec = 2;
//Ciekawy fragment fraktala
// x_fraktal_poczatek = -0.7463 - 0.005; x_fraktal_koniec = -0.7463 + 0.005;
// y_fraktal_poczatek = 0.1102 - 0.005; y_fraktal_koniec = 0.1102 + 0.005;
x_fraktal_zmiana = (x_fraktal_koniec-x_fraktal_poczatek) / 500;
y_fraktal_zmiana = (y_fraktal_koniec-y_fraktal_poczatek) / 500;
y_fraktal_akt = y_fraktal_poczatek;
for (y_canvas = 0; y_canvas<500; ++y_canvas) {
x_fraktal_akt = x_fraktal_poczatek;
for (x_canvas = 0; x_canvas<500; ++x_canvas) {
ile_iteracji = WKtorejIteracjiUcieknie (x_fraktal_akt, y_fraktal_akt);
if (ile_iteracji > 0) {
NarysujPunkt (x_canvas, y_canvas, "yellow");
} else {
NarysujPunkt (x_canvas, y_canvas, "blue");
}
x_fraktal_akt = x_fraktal_akt + x_fraktal_zmiana; //o 4/500
}
y_fraktal_akt = y_fraktal_akt + y_fraktal_zmiana; //o 4/500
}
</script>
</body>
</html>