SVG, 기하학 — 약간의 JavaScript

현재 Science Illustration — A History of Visual Knowledge from the 15th Century to Today을 읽고 있습니다. 추천! 과학 및/또는 디자인에 관한 훌륭한 책은 항상 저에게 영감의 원천입니다.



이 책은 훌륭한 삽화의 보고입니다. 그 중 일부는 <svg>에 코딩하기 위한 것입니다! ...이것처럼 (나쁜 품질에 대해 죄송합니다, 내 전화로 찍은 사진):



다행스럽게도 <svg> 에서 수행하는 것은 지나치게 복잡하지 않습니다.

약간의 수학과 자바스크립트만 있으면 됩니다.

시작하려면 캔버스가 필요합니다.

<svg viewBox="0 0 1000 1000"></svg>

이제 데이터가 필요합니다!
viewBox는 size가 1000이고 원 주위에 16개의 점이 필요합니다.

const size = 1000;
const radius = size / 2;
const numOfPoints = 16;

다음으로 포인트 배열을 만들어 보겠습니다.

  const data = [...new Array(numOfPoints)].map((_a, index) => {
    const angle = 360 / numOfPoints;
    const radian = angle * (index + 1);
    return polarToCartesian(radius, radian)
  })

16개 점의 좌표를 얻으려면 작은 도우미 메서드polarToCartesian가 필요합니다.

const polarToCartesian = (r, degrees) => {
    const radians = degrees * Math.PI / 180.0;
    return [r + (r * Math.cos(radians)), r + (r * Math.sin(radians))]
  }

이와 같은 방법은 일반적으로 x 및 y도 필요하지만 radius(이 경우)와 동일하므로 더 간단한 버전을 사용할 수 있습니다.

좋습니다. 이제 배열의 배열이 생겼습니다.

[
  [961.9397662556433, 691.3417161825449],
  [853.5533905932738, 853.5533905932737],
  ...etc,
]

각 포인트에 대해 현재 포인트의 X 및 Y를 입력하여 다른 모든 포인트에 선을 그려야 합니다.

const renderLines = (X,Y) => {
    return data.map(entry => {
      const [x,y] = entry;
      if (X !== x && Y !== y) return `<line x1="${X}" y1="${Y}" x2="${x}" y2="${y}"></line>`
    })
  }

이제 남은 것은 해당 메서드를 호출하고 반환된 문자열을 innerHTML의 <svg>로 설정하는 것입니다.

svg.innerHTML = data.map(entry => {
    const [x,y] = entry;
    return renderLines(x,y).join('');
  })

우리가 무엇을 구축했는지 봅시다:



멋져 보이지만 약간 지루합니다! min와 max 범위 사이에 임의의 값을 생성하는 방법을 추가해 보겠습니다.

const random = (max, min = 0) => Math.floor(Math.random() * (max - min) + min);

... 그런 다음 이를 사용하여 임의의 색상과 획 너비를 만듭니다.

const stroke = `hsl(${random(360)}, ${random(100, 50)}%, ${random(90, 30)}%)`;
const strokeWidth = random(30, 3) / 10;

훨씬 낫다! numberOfPoints -변수를 훨씬 낮은 값으로 변경해 보겠습니다.



아니면 훨씬 더 높은 값일까요?



우와! 만화경과 거의 같습니다. 아니면 고무공!

데모

이 작은 게시물이 <svg>를 사용하여 창의적인 작업을 수행하는 데 영감을 주셨기를 바랍니다.

아래는 "포인트"-슬라이더를 드래그하여 포인트 수를 늘리거나 줄일 수 있는 펜입니다.