Как ограничить место рисования линий

Я пытаюсь ограничить место, где я рисую линии внутри треугольника, чтобы линии не выходили за пределы и не нарушали другие элементы холста, вот мой код на данный момент:

var points = [];
var r = 500;
var lines = 30;

function setup() {
  createCanvas(1000, 1000);
  angleMode(DEGREES);
  var angle = 60;
  for (var i = 1; i < 7; i++) {
    var tempX = r * sin((angle * i + 30) % 360) + width / 2;
    var tempY = r * cos((angle * i + 30) % 360) + height / 2;
    points.push([tempX, tempY]);
  }
  noSmooth();
  noLoop();
}

function draw() {
  for (var i = 0; i < points.length; i++) {
    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    var tempAngle = 240 + i * 60;
    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];
    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];
    fill(255);
    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    stroke(0);
    for (var j = 0; j < lines + 1; j++) {
      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;
      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
      var tempX2 = distance * sin(tempAngle2) + points[i][0];
      var tempY2 = distance * cos(tempAngle2) + points[i][1];;
      line(points[i][0], points[i][1], tempX2, tempY2);
    }
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Что не так с решением вашего вопроса? Можете ли вы конкретно указать, какие проблемы остаются нерешенными?

— 26.11.2018 23:34

@WillCain последний треугольник все еще переполняется, и я не могу это исправить, потому что всегда будет один, переполненный моим кодом

— 27.11.2018 00:21

javascript processing p5.js

26.11.2018 23:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете воспользоваться тем фактом, что угол между текущим элементом и следующим элементом всегда составляет 90 °. Это приводит к тому, что длина линий треугольников увеличивается пропорционально обратному косинусу углов:

Обратите внимание, что угол в градусах может быть преобразован в угол в радианах с помощью angle_red = Math.PI * angle_degree/180.0:

var angle_degree = 30.0;
var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

См. Пример, где я применил формулу длины строк к исходному коду:

var points = [];
var r = 250;
var lines = 30;

function setup() {
    createCanvas(500, 500);
    angleMode(DEGREES);
    var angle = 60;
    for (var i = 1; i < 7; i++) {
        var tempX = r * sin((angle * i + 30) % 360) + width / 2;
        var tempY = r * cos((angle * i + 30) % 360) + height / 2;
        points.push([tempX, tempY]);
    }
    noSmooth();
    noLoop();
}

function draw() {
    for (var i = 0; i < points.length; i++) {
        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
        var tempAngle = 240 + i * 60;
        var angle_degree = 30.0;
        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);
        var tempX = dist_pt * sin(tempAngle) + points[i][0];
        var tempY = dist_pt * cos(tempAngle) + points[i][1];
        fill(255, 128+i*20, 128);
        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
        stroke(0);
       
        for (var j = 0; j < lines + 1; j++) {
            var cur_angle = 30 / lines * j;
            var distance = r / Math.cos(Math.PI * cur_angle/180.0);
            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
            var tempX2 = distance * sin(tempAngle2) + points[i][0];
            var tempY2 = distance * cos(tempAngle2) + points[i][1];;
            line(points[i][0], points[i][1], tempX2, tempY2);
        }
    }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Спасибо за подробный ответ.

— 28.11.2018 22:23

27.11.2018 20:56

Другие вопросы по теме

Javascript - получить случайное изображение из массива

Как превратить прямоугольник при обработке в изображение для игры, которую я делаю?

Dist () возвращает другой результат по сравнению с console.info

P5js. Скользящая матрица кругов, не может создать или заполнить новую строку кругов в 2D-массиве

Центрирование холста перемещает его в угол

Как разложить звуковой спектр в сетку

Прыгающие шары, борьба за получение более 1 (обработка)

Проблема с одновременным запуском библиотеки oscp5 и модуля рендеринга P3D в процессе обработки 3.x

Формат музыкальных данных для визуализации полифонической музыки с обработкой

Как добавить общее количество элементов с помощью списка / условных статусов

Как ограничить место рисования линий

Ответы 1

Другие вопросы по теме

Похожие вопросы