Tęczowe jarzące bazgrołki

Kliknij tutaj, by włączyć wersję pełnoekranową

Oto kod naszego małego cavnas do bazgrołków (dokładne wyjaśnienia poniżej):

<html>

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

let counter = 0;

context.strokeStyle = `hsl(${counter % 360},100%,50%)`;

context.shadowColor = `hsl(${counter % 360},100%,50%)`;

context.shadowBlur = 5;

context.lineWidth = '2';

let draw = false;

window.onpointerdown = function(event) {

draw = true;

context.beginPath();

context.moveTo(event.offsetX, event.offsetY);

if (!event.isPrimary || event.button == 2) {

context.clearRect(0, 0, canvas.width, canvas.height);

}

};

window.onpointermove = function(event) {

if (draw) {

context.lineTo(event.offsetX, event.offsetY);

context.stroke();

}

};

window.onpointerup = function(event) {

draw = false;

counter += 18;

context.strokeStyle = `hsl(${counter % 360},100%,50%)`;

context.shadowColor = `hsl(${counter % 360},100%,50%)`;

};

</script>

</body>

</html>

Linie [1-6]: ustawienie HTML5 Canvas
[7] inicjalizacja licznika kolorów
[8-9] przypisanie aktualnego koloru do linii i cienia
[10] siła efektu rozmazania. Rozmazanie to losowe piksele wokół głównego kształtu, które tworzą efekt "jarzenia".
[11] grubość linii
[12] nie rysujemy, dopóki użytkownik nie użyje myszki/ekranu dotykowego

Cała akcja jest zawarta w trzech funkcjach pointera:

1. Pointer down (wciśnięty)
[15] początek rysowania
[16] rozpocznij ścieżkę rysowania
[17] przenieś pióro do lokalizacji wskaźnika (myszka/dotyk)
[18-19] jeżeli więcej niż jeden palec dotyka ekranu lub kliknięto prawy przycisk myszy, wyczyść canvas

2. Pointer move (ruch)
[24-26] jeżeli rozpoczęto rysowanie, narysuj linię do aktualnej pozycji wskaźnika
Zwróć uwagę, że cała ścieżka zostaje ponownie narysowana, wraz z rozmyciem. To, co powoduje, że cała linia się pogrubia w miarę poruszania wskaźnika, to właśnie rozmycie.

3. Pointer up (podniesiony)
[31] koniec rysowania
[32] zwiększ licznik koloru
[33-34] ustal kolor pióra i cienia na podstawie licznika
Większość ludzi zna model kolorów RGB (Red/Green/Blue = czerwony/zielony/niebieski), ale tutaj używamy modelu HSL (Hue/Saturation/Luminance = (barwa/nasycenie/jasność).
Działa to następująco:

Barwa ma zakres 0 do 360, więc jeśli zwiększymy licznik za każdym razem o 18, po 20 zmianach wrócimy do pierwotnego koloru.
By uprościć kod, nasycenie zawsze ustawimy na 100%, a jasność na 50%.

Oto program, który wygenerował powyższą tęczę:

<html>

<body>

let canvas2 = document.getElementById("myCanvas2");

let context2 = canvas2.getContext("2d");

for (let x = 0; x < 360; x++) {

context2.fillStyle = `hsl(${x},100%,50%)`;

context2.fillRect(x * 2, 0, 2, 100);

}

</script>

</body>

</html>

Kilka pomysłów, które możesz spróbować zrealizować samodzielnie:

- funkcja "cofnij"
- zapisywanie obrazu
- wybór kolorów
- kształty (koła/prostokąty)

Więcej samouczków:

Fraktale - 25 linii JavaScript

Złudzenie optyczne - 18 linii

Sinus scroll - 30 linii

Gra "Angry Chickens"

Animowane krzywe kwadratowe

Eksperyment z enginem fizyki

Rozbiajanie muru kulą - 14 linii Python/Blender 3d

Efekt domino - 10 linii Python/Blender 3d

English version of this page