Choose lambda value
, choose color
, choose iteration counter
, clockwise
var ctx, canvas, h, w, x0, y0, k; function Line(x1, y1, x2, y2){ //прорисовка линии ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.stroke(); } function horizontal(x, y){ //горизонтальные линии Line(x, y, x+k/4, y); Line(x+k/4, y+k/4, x+k/4+k/4, y+k/4); Line(x+k/4+k/4, y-k/4,x+k-k/4, y-k/4); Line(x+k-k/4, y, x+k, y); Line(x+k/4, y, x+k/4, y+k/4); Line(x+k/4+k/4, y+k/4, x+k/4+k/4, y-k/4); Line(x+k-k/4, y-k/4, x+k-k/4, y); }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Fire</title> <style type="text/css"> body { background-color: #000000; margin: 0px; } canvas { width: 650px; height:650px; display: block; } </style> </head> <body> <canvas id='fire' width='650' height='650'></canvas> <script type="text/javascript"> // Параметры детализации var r = 8;
let ctx = document.getElementById('canv').getContext('2d'); let dot_x, dot_y, sec_x1, sec_x2, sec_y1, sec_y2; // координаты точки и концов отрезка соответственно let x1, x2, x3, y1, y2, y3; // координаты векторов, построенных на сторонах треугольника let out; // расстояние между точкой и отрезком let hx, hy, ax, ay; // координаты тоски пересечения перпендикуляра с отрезком и let cnt = 0; // флаг, считающий номер нажатия на канвас // функция обработки нажатия на канвас function storeGuess(event) {
Задача: для заданных n точек на плоскости найти пару точек, расположенных ближе друг к другу с помощью алгоритма "Разделяй и властвуй".
<script> var ctx=document.getElementById('paintbox').getContext('2d'); function draw(x1 , y1 , x2 , y2 , dep){ if(dep == 0){ randomColor();//изменение цвета ctx.fillRect(x1 , y1 , 1 , 1); ctx.fillRect(x2 , y2 , 1 , 1); return; } var dx = (x2 - x1)/2; var dy = (y2 - y1)/2; //смещение по х и у var x_tmp = x1 + dx - dy ; var y_tmp = y1 + dy + dx; draw(x1 , y1 , x_tmp , y_tmp , dep - 1); draw(x2 , y2 , x_tmp , y_tmp , dep - 1); }
<canvas id="canvas" width="600" height="600"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var p0 = { //координаты снежинки x: 20, y: 400 }, p1 = { x: 200, y: 20 }, p2 = { x: 400, y: 400 }; function drawLine(p0, p1) { ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.stroke(); } function drawKoch(p0, p1, limit) { //лимит - глубина рекурсии var dx = p1.x - p0.x, dy = p1.y - p0.y,
var ctx, canvas, r, r1, r2, r3, color, color1, color2, color3; // Функция Анимации window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame })(); // Функция запускающаяся автоматически после загрузки страницы window.onload = function(){ canvas = document.getElementById('paint'); ctx = canvas.getContext('2d');
Ширина линии
Расстояние между линиями
Задача — написать программу, которая будет строить изображение Канторова множества.
Для построения изображения ввести в поля "Ширина линии","Расстояние между линиями" нужные значения и нажать на кнопку отправить.
<!doctype html> <html lang = "en"> <head> <title> fractal </title> <meta charset = "utf-8"> <script src = "js/script.js" defer></script> </head> <body> <div id = "main" style = "position: absolute; top: 0; left: 0; "> <canvas id = "canvas" width = "500" height = "500" style = "background-color: black; "></canvas> <div id = "menu"> <span>Choose lambda value</span> <label> <input id = "lambda" type = "number" size = "3" min = "1" max = "5000" value = "64"> </label> <span>, choose color</span> <label> <select id = "color"> <option value = "fixed"> Fixed color </option> <option value = "random"> Random color </option> <option value = "allRandom"> All random color </option> <option value = "gradient"> Gradient color </option> </select> </label> <span>, choose iteration counter</span> <label> <input id = "counter" type = "number" size = "4" min = "1" max = "5000" value = "150"> </label> <span>, clockwise</span> <label> <input id = "clockwise" type = "checkbox" checked> </label> <button id = "start"> Select </button> </div> </div> </body> </html>
zoom power
Построить фрактал Квазиклевер с возможностью увеличить масштаб изображения и обзора конкретных участков фрактала.
После загрузки страницы нужно сначала задать количество итераций(ползунок power), потом изменить приближение(ползунок zoom), затем можно кликать по отдельным пикселям конвы для того, чтобы центрировать на них камеру.
Код программы:
////2// //1///3 - нумерация дочерних кругов ////4// var ctx,m=6,z=1,nx=250,ny=250; //ctx - конва, m - количество итераций, nx ny - координаты для центрирования по клику.