Matematyka wizualnie - wykreślamy krzywe
Robert Mangold, Malowidła kolumnowe, 2004
Dzisiaj luźna inspiracja pracami amerykańskiego malarza i grafika Roberta Mangolda. Nie będziemy jednak sami wybierać położenia i kierunku linii na płótnie, zrobi to za nas funkcja rysująca konkretną krzywą w oparciu o matematyczny wzór.
Ja wybrałam ciekawą wizualnie krzywą Lissajous, której szczegółowy opis oraz funkcję rysującą znalazłam w książce "Matematyka dla programistów. JavaScript" Jacka Piechoty (książka zawiera więcej przykładów krzywych wraz z propozycjami ich zaprogramowania).
Funkcja (plik JavaScript):
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var lissajous = function(A1, A2, w1, w2, fi1, fi2, points, strokeStyle){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = strokeStyle;
ctx.translate(w/2, h/2);
var x2;
var y2;
for(var i = 0; i < points; i++){
var t = i * Math.PI / 360;
x2 = A1 * Math.cos(w1 * t + fi1);
y2 = A2 * Math.cos(w2 * t + fi2);
ctx.lineTo(Math.floor(x2), Math.floor(y2));
}
ctx.stroke();
ctx.restore();
}
W pliku HTML wywołamy funkcję lissajous() i przekażemy jej argumenty:
<body>
<script>
lissajous(150, 70, 3, 4, Math.PI/4, Math.PI/2, 1000, "black")
</script>
</body>
I gotowe!
Komentarze
Prześlij komentarz