🎇 Radial Infographic

📝 Static Version

// ─────────────────────────────────────────────────────────────
// 전역 변수 선언 (모든 함수에서 접근 가능한 설정값)
// ─────────────────────────────────────────────────────────────

let numConcentric = 20; // 동심원 개수: 20개
let numRays = 60;       // 방사형 선 개수: 60개
let maxRadius;          // 최대 반지름 변수 설정. setup()에서 실제 값 할당.

// ─────────────────────────────────────────────────────────────
// setup(): p5.js의 초기화 함수. 프로그램 시작 시 딱 한 번 실행됨.
// → 모든 그림을 여기서 한 번만 그립니다.
// ─────────────────────────────────────────────────────────────

function setup() {
  // 캔버스 크기 설정: 가로 1080px × 세로 1080px (정사각형)
  createCanvas(1080, 1080);

  // 최대 반지름 계산: 캔버스 가로 너비(width)의 45% → 여백 확보 (10%는 테두리 공간)
  // 예: width=1080 → maxRadius = 1080 × 0.45 = 486px
  maxRadius = width * 0.45;

  // 캔버스 중심 좌표 → 반복 사용되므로 변수로 저장 (코드 가독성 ↑, 성능 ↑)
  let cx = width / 2; // 중심 x = 1080 / 2 = 540
  let cy = height / 2; // 중심 y = 1080 / 2 = 540

  // ───────────────────────────────────────────────────────────
  // 배경색 설정: RGB + Alpha (투명도)
  // (40, 30, 40) → 짙은 보라-남색 계열, alpha 없음 → 완전 불투명
  // → 전체 캔버스를 이 색으로 채움
  // ───────────────────────────────────────────────────────────
  background(40, 30, 40);

  // ───────────────────────────────────────────────────────────
  // 동심원 그리기
  // ───────────────────────────────────────────────────────────

  // 도형 내부를 칠하지 않음 (원 테두리만)
  noFill();

  // 선 색상: (R=100, G=90, B=100) → 회색 계열의 연보라, alpha=180 → 약간 반투명
  stroke(100, 90, 100, 180);

  // 선 두께: 0.5px
  strokeWeight(0.5);

  // 동심원 20개 반복 생성: i = 1 ~ 20
  for (let i = 1; i <= numConcentric; i++) {
    // map(값, 최소입력, 최대입력, 최소출력, 최대출력):
    // i가 1 → r = 20px, i가 20 → r = maxRadius(=486px)가 되도록 비율 변환
    // → 작은 원부터 큰 원까지 균등한 간격으로 배치
    let r = map(i, 1, numConcentric, 20, maxRadius);

    // circle(중심x, 중심y, 지름) → 반지름(r)의 2배를 지름으로 전달
    // (p5.js의 circle 함수는 지름(diameter)을 받음, 반지름(radius) 아님!)
    circle(cx, cy, r * 2);
  }

  // ───────────────────────────────────────────────────────────
  // 중심부 강조하는 원
  // ───────────────────────────────────────────────────────────

  // 도형 내부를 칠하지 않음 (원 테두리만)
  noFill();

  // 흰색 계열, alpha=120
  stroke(255, 255, 255, 120);

  // 선 두께를 1.5px로 약간 강조
  strokeWeight(1.5);

  // 고정된 크기(지름 60px)의 원을 중심에 그림
  // → 반지름 30px, 즉 중심에서 30px 이내는 비워둠 (다른 요소와 겹침 방지)
  circle(cx, cy, 60);

  // ───────────────────────────────────────────────────────────
  // 방사형 선(rays)과 그 위의 점(circles) 그리기
  // ───────────────────────────────────────────────────────────

  // 선 개수(numRays=60)만큼 반복
  for (let i = 0; i < numRays; i++) {
    // 현재 선의 기준 각도 계산:
    // i=0 → 0 rad (→ 0°), i=59 → 약 6.18 rad (→ 354°), i=60이면 2π(360°)
    // map(i, 0, 60, 0, TWO_PI) → 60등분된 원형 배열
    let baseAngle = map(i, 0, numRays, 0, TWO_PI);

    // 이 선의 전체 길이: 30px(중심 원 테두리 바깥) ~ maxRadius(486px) 사이 랜덤
    // → 중심에 겹치지 않고, 캔버스 밖으로 나가지도 않음
    let len = random(30, maxRadius);

    // 선의 끝점 좌표 계산 (삼각함수: x = cosθ * r, y = sinθ * r)
    let x2 = cx + cos(baseAngle) * len;
    let y2 = cy + sin(baseAngle) * len;

    // ───── 선 그리기 ─────────────────────────────────────────

    // 선 색상: (200,200,220), alpha=150
    stroke(200, 200, 220, 150);

    // 중심(cx,cy)에서 끝점(x2,y2)까지 직선 그리기
    line(cx, cy, x2, y2);

    // ───── 선 위에 점(circles) 그리기 ───────────────────────

    // 이 선 위에 그릴 점 개수: 3~7개 사이 랜덤 (int()로 소수점 버림 → 3,4,5,6,7)
    let steps = int(random(3, 8));

    // 점에는 선 테두리를 그리지 않음 (채우기만)
    noStroke();

    // 점을 선 위에 균등히 배치: j = 1 ~ steps
    for (let j = 1; j <= steps; j++) {
      // t = j / (steps + 1):
      // 예: steps=4 → t = 1/5, 2/5, 3/5, 4/5 → 선의 20%, 40%, 60%, 80% 지점
      // → 시작점(0)과 끝점(1)은 건너뛰어 중심/끝에 겹치지 않음
      let t = j / (steps + 1);

      // 중심으로부터의 실제 거리 = 전체 길이(len) × 비율(t)
      let distance = len * t;

      // ⚠️ 중심에서 30px 이내는 건너뜀 → 중심 강조 원과 겹치지 않게
      if (distance < 30) continue;

      // 점의 크기: 지름 2~8px 사이 랜덤
      let size = random(2, 8);

      // 점의 색상:
      // random(100) → 0~100 사이 난수, 85보다 크면(15% 확률) 따뜻한 노란색,
      // 아니면(85% 확률) 흰색 계열
      let col =
        random(100) > 85
          ? color(220, 180, 80, 200) // 노란색: R=220, G=180, B=80, alpha=200
          : color(240, 240, 240, 180); // 거의 흰색, alpha=180

      // 점의 절대 좌표 계산 (중심 + 방향×거리)
      let px = cx + cos(baseAngle) * distance;
      let py = cy + sin(baseAngle) * distance;

      // 점 색상 적용
      fill(col);

      // 점 그리기: circle(중심x, 중심y, 지름)
      circle(px, py, size);
    }
  }

  // ───────────────────────────────────────────────────────────
  // 주석 해제 시 실행하면 파일 저장
  // ───────────────────────────────────────────────────────────
  // save("infographic_style_01.png");
}

function draw() {
  // 이 함수가 비어 있으므로, setup()에서 그린 이미지가 고정되어 유지됨.
  // 애니메이션 없음, CPU 부하 없음, 완전한 정지 화면.
}

📝 Animated Version

let numConcentric = 20;
let numRays = 60;
let maxRadius;
let rotationAngle = 0;
let rayData = []; // 각 선의 정보를 저장할 배열

function setup() {
  createCanvas(1080, 1080);
  maxRadius = width * 0.45;

  // 각 선의 데이터 미리 생성
  for (let i = 0; i < numRays; i++) {
    let baseAngle = map(i, 0, numRays, 0, TWO_PI);
    let len = random(30, maxRadius);

    // 이 선 위에 그려질 원들의 정보
    let circles = [];
    let steps = int(random(3, 8));
    for (let j = 1; j <= steps; j++) {
      let t = j / (steps + 1);
      let distance = len * t; // 중심으로부터의 거리

      // 중심에서 30px 이내면 제외
      if (distance < 30) continue;

      circles.push({
        distance: distance,
        size: random(2, 8),
        color:
          random(100) > 85
            ? color(220, 180, 80, 200)
            : color(240, 240, 240, 180),
      });
    }

    rayData.push({
      baseAngle: baseAngle,
      length: len,
      circles: circles,
    });
  }
}

function draw() {
  background(40, 30, 40);

  // 동심원 그리기
  noFill();
  stroke(100, 90, 100, 180);
  strokeWeight(0.5);
  for (let i = 1; i <= numConcentric; i++) {
    let r = map(i, 1, numConcentric, 20, maxRadius);
    circle(width / 2, height / 2, r * 2);
  }

  // 중심부 강조
  noFill();
  stroke(255, 255, 255, 100);
  strokeWeight(1.5);
  circle(width / 2, height / 2, 60);

  // 회전 각도 업데이트
  rotationAngle = (millis() * 0.05) / 1000;

  let cx = width / 2;
  let cy = height / 2;

  // 저장된 데이터로 선과 원 그리기
  for (let ray of rayData) {
    let angle = ray.baseAngle + rotationAngle;

    // 선 끝점 계산
    let x2 = cx + cos(angle) * ray.length;
    let y2 = cy + sin(angle) * ray.length;

    // 선 그리기
    stroke(200, 200, 220, 150);
    line(cx, cy, x2, y2);

    // 원들 그리기
    noStroke();
    for (let c of ray.circles) {
      let px = cx + cos(angle) * c.distance;
      let py = cy + sin(angle) * c.distance;

      fill(c.color);
      circle(px, py, c.size);
    }
  }
}

📝 클래스 문법 사용한 Animated Version

// ────────────────────────────────────────────────────────────────
// 전역 상수 및 변수 선언
// ────────────────────────────────────────────────────────────────

const NUM_RAYS = 60;
const NUM_CONCENTRIC = 20;
const ROTATION_SPEED = 0.0002;
let MAX_RADIUS;
let rays = [];
let concentricCircles;

// ────────────────────────────────────────────────────────────────
// ConcentricCircles 클래스 정의
// ────────────────────────────────────────────────────────────────

class ConcentricCircles {
  constructor(numCircles, maxRadius) {
    this.numCircles = numCircles;
    this.maxRadius = maxRadius;
  }

  draw(centerX, centerY) {
    noFill();

    for (let i = 1; i <= this.numCircles; i++) {
      const radius = map(i, 1, this.numCircles, 20, this.maxRadius);
      const alpha = map(i, 1, this.numCircles, 150, 180);

      stroke(100, 90, 100, alpha);
      strokeWeight(0.5);
      ellipse(centerX, centerY, radius * 2, radius * 2);
    }

    stroke(255, 255, 255, 100);
    strokeWeight(1.5);
    ellipse(centerX, centerY, 60, 60);
  }
}

// ────────────────────────────────────────────────────────────────
// Ray 클래스 정의
// ────────────────────────────────────────────────────────────────

class Ray {
  constructor(baseAngle, maxRadius) {
    this.baseAngle = baseAngle;
    this.length = random(30, maxRadius);
    this.dots = this._createDots();
  }

  _createDots() {
    const dots = [];
    const steps = int(random(3, 8));

    for (let j = 1; j <= steps; j++) {
      const t = j / (steps + 1);
      const distance = this.length * t;

      if (distance < 30) continue;

      dots.push({
        distance: distance,
        size: random(2, 8),
        dotColor:
          random(100) > 85
            ? color(220, 180, 80, 200)
            : color(240, 240, 240, 180),
      });
    }

    return dots;
  }

  draw(centerX, centerY, rotation) {
    const currentAngle = this.baseAngle + rotation;
    const endX = centerX + cos(currentAngle) * this.length;
    const endY = centerY + sin(currentAngle) * this.length;

    stroke(200, 200, 220, 150);
    strokeWeight(1);
    line(centerX, centerY, endX, endY);

    noStroke();
    for (const dot of this.dots) {
      const dotX = centerX + cos(currentAngle) * dot.distance;
      const dotY = centerY + sin(currentAngle) * dot.distance;

      fill(dot.dotColor);
      ellipse(dotX, dotY, dot.size, dot.size);
    }
  }
}

// ────────────────────────────────────────────────────────────────
// p5.js 메인 함수
// ────────────────────────────────────────────────────────────────

function setup() {
  createCanvas(1080, 1080);
  MAX_RADIUS = width * 0.45;

  concentricCircles = new ConcentricCircles(NUM_CONCENTRIC, MAX_RADIUS);

  for (let i = 0; i < NUM_RAYS; i++) {
    const angle = map(i, 0, NUM_RAYS, 0, TWO_PI);
    rays.push(new Ray(angle, MAX_RADIUS));
  }

  frameRate(60);
}

function draw() {
  background(40, 30, 40);

  const currentRotation = millis() * ROTATION_SPEED;
  const centerX = width / 2;
  const centerY = height / 2;

  concentricCircles.draw(centerX, centerY);

  for (const ray of rays) {
    ray.draw(centerX, centerY, currentRotation);
  }
}