Mandelbrot – Rysujemy Fraktal – Rozwiązanie zadania

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

 

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz