29 июл 2021 в 23:48

javascript треугольник Серпинского

Ожидает приглашения

Получим треугольник Серпинского на js, будем использовать html и javascript. Детально разберем формулу треугольник Серпинского.

Начнем с того, как получить треугольник на js.

Создадим <canvas> и накинем несколько стилей.

<canvas id="triangle"></canvas>
<script>
  const c = document.getElementById("myCanvas");
  c.style.display = 'block';
  c.style.margin = '0px auto';
  c.width = 800;
  c.height = 800;
  
  const ctx = c.getContext("2d");
</script>

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

  ctx.beginPath();
	ctx.font = "18px Arial";
	ctx.fillText("A", 15, 660);
	ctx.fillStyle = "#008000";
	ctx.arc(20, 600,3,0, Math.PI * 2, true);
	ctx.fill();

	ctx.beginPath();
	ctx.font = "18px Arial";
	ctx.fillText("B", 395, 30);
	ctx.fillStyle = "#ff2626";
	ctx.arc(400, 60,3,0, Math.PI * 2, true);
	ctx.fill();

	ctx.beginPath();
	ctx.font = "18px Arial";
	ctx.fillText("C", 770, 660);
	ctx.fillStyle = "#0000ff";
	ctx.arc(780, 600,3,0, Math.PI * 2, true);
	ctx.fill();

После того как мы поставили три вершины треугольника, осталось понять формулу Серпинского для треугольника, и перевести его на javascript.

Что говорит Серпинскый на понятном языке:

нарисуйте треугольник
поставьте точку в любом месте в не треугольника
методом рандом выбираются числа, которые будут соответствовать с вершинами треугольника
после того как рандомное число выбрано:
4.1 находим вершину, который соответствует рандомному числу.
4.2 считаем середину между выбранной вершины и последней точки, и ставим точку (после ставки, это будет последней точкой)
все это делаем бесконечно, начиная с пункта 3.

Здесь надо хорошо понять пункт 3, что он значит: предположим у нас есть три вершины, в нашем коде я их назвал A,B,C, и мы выбираем методом рандом из трех цифр 0 1 и 2, и у нас есть такое условие, что если выпало число 0, то активной вершиной будет А, 1 -> B и 2 -> C

Первый пункт мы уже сделали, начнем второй:

function drawDefaultPoint(){
    ctx.beginPath();
    ctx.fillStyle = "#0000ff";
    ctx.arc(20, 50, 3, 0, Math.PI * 2, true);
    ctx.fill();
}

Напишем третий и четвертый пункт в одной функции:

function generateRandomPoint(){
	const random = Math.round(Math.random() * 2);
	let x = null;
  let y = null;

	const [lastX, lastY] = lastPosition;

  if(random === 0){ // A
    x = (lastX + 20) / 2;
    y = (lastY + 600) / 2;
  }else if(random === 1){ // b
    x = (lastX + 400) / 2;
    y = (lastY + 60) / 2;
  }else if(random === 2){ // c
    x = (lastX + 780) / 2;
    y = (lastY + 600) / 2;
  }

	lastPosition[0] = x;
	lastPosition[1] = y;
  
	ctx.beginPath();
	ctx.fillStyle = "#000000";
	ctx.arc(x, y,1,0, Math.PI * 2, true);
	ctx.fill();
}

Пятый пункт:

setInterval(function(){
  generateRandomPoint();
},1)

Код целиком:

<canvas id="myCanvas"></canvas>

<script>
  const c = document.getElementById("myCanvas");
  c.style.display = 'block';
  c.style.margin = '0px auto';
  c.width = 800;
  c.height = 800;
  
  const ctx = c.getContext("2d");
  
  let lastPosition = [20,500];
  
  drawPoint();
  drawDefaultPoint();
  
  setInterval(function(){
    generateRandomPoint();
  },1)
  
  function drawPoint(){
    ctx.beginPath();
    ctx.font = "18px Arial";
    ctx.fillText("A", 15, 660);
    ctx.fillStyle = "#008000";
    ctx.arc(20, 600,3,0, Math.PI * 2, true);
    ctx.fill();
  
    ctx.beginPath();
    ctx.font = "18px Arial";
    ctx.fillText("B", 395, 30);
    ctx.fillStyle = "#ff2626";
    ctx.arc(400, 60,3,0, Math.PI * 2, true);
    ctx.fill();
  
    ctx.beginPath();
    ctx.font = "18px Arial";
    ctx.fillText("C", 770, 660);
    ctx.fillStyle = "#0000ff";
    ctx.arc(780, 600,3,0, Math.PI * 2, true);
    ctx.fill();
  }
  
  function drawDefaultPoint(){
    ctx.beginPath();
    ctx.fillStyle = "#0000ff";
    ctx.arc(lastPosition[0], lastPosition[1],3,0, Math.PI * 2, true);
    ctx.fill();
  }
  
  function generateRandomPoint(){
    const random = Math.round(Math.random()*2);
    let x = null;
    let y = null;
  
    const [lastX, lastY] = lastPosition;
  
    if(random === 0){ // A
      x = (lastX + 20) / 2;
      y = (lastY + 600) / 2;
    }else if(random === 1){ // b
      x = (lastX + 400) / 2;
      y = (lastY + 60) / 2;
    }else if(random === 2){ // c
      x = (lastX + 780) / 2;
      y = (lastY + 600) / 2;
    }
  
    lastPosition[0] = x;
    lastPosition[1] = y;
    
    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.arc(x, y, 1, 0, Math.PI * 2, true);
    ctx.fill();
  }
</script>

Сохраните в файле .html откройте в браузере.

Большое спасибо Вам за внимание.

Теги:

треугольник серпинского

Хабы:

JavaScript