Установите окружность в качестве границы для линии l oop в P5. js - PullRequest
Новая
       9

Установите окружность в качестве границы для линии l oop в P5. js

1 голос
/ 21 апреля 2020

Я пытаюсь ограничить высоту зацикленных линий границей / окружностью круга ()

Я не смог найти никакого решения для решения проблемы ... 

let numCols = 10
let margin = 100
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  test = circle(100,100,100);
  for (let i = 0; i < numCols; i++) {
    let iMapped = map(i, 0, numCols - 1, 50, 150);
    line(iMapped, 100, iMapped, 200);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Спасибо!

1 Ответ

1 голос
/ 21 апреля 2020

Определите центр и радиус окружности: 

let centerx = 100;
let centery = 100;
let radius = 50;

Вычислите угол от центра к окружности, зависящий от координаты x, на acos и расстояние y на sin: 

let x = iMapped - centerx;
let angle = acos(x/50);
line(iMapped, centery, iMapped, centery + 50 * sin(angle));

См. Пример: 

let numCols = 10
let margin = 100
function setup() {
    	createCanvas(400, 400);
} 

function draw() {
    background(220);

    let centerx = 100;
    let centery = 100;
    let radius = 50; 
    test = circle(centerx, centery, radius*2);
    
    for (let i = 0; i < numCols; i++) {
        let iMapped = map(i, 0, numCols - 1, 50, 150);
        let x = iMapped - centerx;
        let angle = acos(x/50);
        line(iMapped, centery, iMapped, centery + 50 * sin(angle));
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
...