Walentynkowe serduszka



Czy jesteś dzisiaj w romantycznym nastroju? Jeżeli twoja odpowiedź to "Kocham JavaScript!", a twoje wyrażanie uczuć opiera się na rysowaniu łuków przy pomocy funkcji sinus i cosinus na HTML5 Canvas, czytaj dalej!

Symbol, który ma przypominać kształt serca (tak naprawdę nie przymina kształtu serca żadnej znanej człowiekowi istoty) jest uniwersalnym znakiem miłości.

Czy słyszeliście o pewnej starszej pani, która wysłała SMSa do swojej rodziny "Ciocia Julka zmarła, LOL!", bo myślała, że LOL oznacza "Lots Of Love" ("mnóstwo miłości")? Narysujemy całą furę serduszek, by uzewnętrznić nasze uczucia.

Po tym przydługim bezsensownym wstępie przejdźmy do kodu!

Linie [1-8] inicjalizują Canvas i zmienne.
[10] ustawia losowe parametry (kolor, pozycję i rozmiar) pierwszego serca.
[11] odpala główną funkcję animacji [13-30]:
[15-20] oblicza współrzędne x i y następnego punktu na łuku. W tej części rysunku, zmienna counter (licznik) odpowiada kątowi na łuku, który rysujemy. [19] kreśli jedną stronę, a [20] drugą, symetrycznie.
Rysujemy łuk między kątami 60 a 226 stopni. Następnie przechodzimy do linii prostej [22-26].
Jeżeli linia zostanie zakończona, losujemy parametra nowego serducha. Ten proces powtarza się w nieskończoność, jak koło miłości - jest to głęboko symboliczne i filozoficzne!
[34] wybiera losową wartość czerwonego (R) komponentu koloru RGB. Komponenty zielony (G) i niebieski (B) zawsze wynoszą 255 (wartość maksymalna), co skutkuje różnymi odcieniami różu/fioletu.
[9] i [39] przenoszą punkt (0,0) Canvas w losowo wybrane miejsce na Canvas. To pozwala nam znacznie uprościć wzory w [19-25] - oś y jest linią symetrii wszystkich naszych serc i jest ona przenoszona w inne miejsce po każdym narysowanym sercu.
[36] przenosi ten punkt z powrotem do lewego górnego rogu Canvas. W przeciwnym wypadku po kilku iteracjach moglibyśmy wylądować z sercem rysowanym poza Canvas.
Poeksperymentuj z kodem, a potem świętuj z ukochaną osobą! Wesołych Walentynek!


<html>
<canvas id='myCanvaswidth='800height='600'></canvas>
<script>
const endAngle = 226;
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let counter = 60;
let radiustxty;
context.translate(txty);
randomize();
requestAnimationFrame(animate);
 
function animate() {
  let xy;
  if (counter <= endAngle) {
    let radians = Math.PI / 180 * counter;
    y = radius * Math.sin(radians);
    x = radius * Math.cos(radians);
    context.fillRect(radius / 2 - x, -y22);
    context.fillRect(-radius / 2 + x, -y22);
  } else {
    x = counter - endAngle - radius * 1.2;
    y = counter - endAngle + radius * .71;
    context.fillRect(xy22);
    context.fillRect(-xy22);
  }
  counter = counter + 1;
  if (counter >= endAngle + radius * 1.2randomize();
  requestAnimationFrame(animate);
}
 
function randomize() {
  counter = 60;
  context.fillStyle = 'rgba(255,' + Math.floor(Math.random() * 255) + ', 255 ,1)';
  radius = Math.random() * 100;
  context.translate(-tx, -ty);
  tx = Math.random() * canvas.width;
  ty = Math.random() * canvas.height;
  context.translate(txty);
}
</script>
</html>



Inne samouczki:

Fraktale - 25 linii JavaScript

Złudzenie optyczne - 18 linii

Sinus scroll - 30 linii

Gra "Angry Chickens"

Animowane krzywe kwadratowe - 40 linii

Animowane konstelacje cząsteczek - 42 linie

Eksperyment z enginem fizyki


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


Efekt domino - 10 linii Python/Blender 3d


English version of this page