Бабочка на переменной канве

Заканчивается очередной бесплодный "рабочий сезон" и мы постепенно расстаёмся на лето с миром программирования, впрочем, всё активнее превращающимся в зону цифрового концлагеря из территории свободы, творчества, общения и открытий. Но он ведь не один такой, так сказать, общемировые тенденции. Всё что мы можем сделать - кропотливо и с любовью по-розановски "идти пить чай" продолжить собирать цветные камешки, которые иногда выносит к нашему островку слепой прибой бушующего мiра.

Вот ещё капелька программирования и графики на летнюю, хотя и тоже полярную тему.

Параметрическая кривая-бабочка, только малость оптимизированная по расчёту и подогнанная под произвольный размер канвы, заданный значением переменной size в коде.

Диапазон значений для t в нашем случае должен быть от 0 до 24×π, поскольку в нём sin(t/12) имеет свой период. Вот скрипт в работе и код (без HTML-обрамления) под ним. Ну и другие штучки, описанные по внешней ссылке можно сделать по аналогии.

<div style="text-align: center;">
 <canvas id="butterflyCanas" style="border: dotted 1px blue;"></canvas>
</div>
<script>
function butterFly() {
 function getPoint(t, scale, offset) {
  let cos_t = Math.cos(t);
  let factor = Math.exp(cos_t) - 2 * Math.cos(4*t) - Math.pow(Math.sin(t/12), 5);
  return {
    x: scale * Math.sin(t) * factor + offset.x,
    y: scale * cos_t * factor + offset.y
  };
 }

 let size = 250; //размер канвы бабочки в пикселях
 let canvas = document.getElementById("butterflyCanas");
 canvas.width = size;
 canvas.height = size;
 let ctx = canvas.getContext("2d");
 ctx.beginPath();
 
 //Градиент для отрисовки:
 let mid = Math.round (size/2);
 let gradient = ctx.createRadialGradient (mid, mid, 0, mid, mid, size);
 gradient.addColorStop("0.20","#006400");
 gradient.addColorStop("0.35","#008000");
 gradient.addColorStop("0.50","#00ff00");
 gradient.addColorStop("0.65","#32cd32");
 gradient.addColorStop("0.80","#adff2f");
 ctx.strokeStyle = gradient;
 //или строчка ниже вместо этого блока, если нужен один цвет:
 //ctx.strokeStyle = 'green'; //цвет бабочки
 
 let offset = {x: Math.round(size / 2), y: Math.round(6 * size / 15)};
 let scale = Math.round(2 * size / 15);
 let maxT = 24 * Math.PI;
 let p = getPoint(0, scale, offset);
 ctx.moveTo(p.x, canvas.height - p.y);
 for (let t = 0.00; t <= maxT; t += 0.01) {
  p = getPoint(t, scale, offset);
  ctx.lineTo(p.x, canvas.height - p.y);
 }
 ctx.stroke();
}

butterFly();
</script>
<noscript>
 <p>Включите Javascript в браузере для работы приложения.</p>
</noscript>

03.06.2023, 23:48 [197 просмотров]