Złudzenie optyczne - łatwy samouczek JavaScript

Oto ciekawe złudzenie optyczne - widzisz małe białe kropki na przecięciach szarych linii tam, gdzie skupiasz wzrok, ale wydają się one znikać z pozostałej części obrazu (z peryferii twojego obszaru widzenia). Zwróć uwagę, że to obraz statyczny - nie zmienia się, mimo że tak to odbiera twój mózg.

Kod potrzebny do stworzenia tego efektu jest bardzo prosty:

[Linie 4-6]: ustawiamy HTML5 Canvas
[7-9]: przygotowujemy się do rysowania szarych linii
[10-12]: rysujemy linie w kierunku południowo-zachodnim
[13-16]: rysujemy linie w kierunku południowo-wschodnim
[18-24]: rysujemy białe kropki (koła). W każdej iteracji pętli y rysujemy dwie kropki - ta druga jest przesunięta w dół i w prawo, by pokryć każde skrzyżowanie.

<html>

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

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

context.lineWidth = 5;

context.strokeStyle = 'gray'

context.beginPath();

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

context.moveTo(x*40-304,0);

context.lineTo(x*40+20,340);

context.moveTo(x*40,0);

context.lineTo(x*40-324,340);

}

context.stroke();

context.fillStyle = 'white';

for(let x=0;x<20;x++)

for(let y=0;y<9;y++){

context.beginPath();

context.arc(8+x*40, y*42-9, 3, 0, 2 * Math.PI);

context.arc(28+x*40, y*42-29, 3, 0, 2 * Math.PI);

context.fill();

}

</script>

</body>

</html>

Ciekawe efekty powoduje zmiana rozmiaru i redukcja liczby kropek. Miłego robienia wody z mózgu!

Inne poradniki:

Fraktale w JavaScript - tylko 25 linii kodu

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

Efekt domino - 10 linii kodu Python/Blender 3d

Złudzenie optyczne - 18 linii czystego JavaScript