🎇 Op Art Style #01

📝 Circular

/**
사각형이 원형 궤도를 따라서 프레임 단위로 생성. 흑백 컬러 교차하면서 옵아트. 
**/

let angle = 0;    // 현재 각도 변수
let radius = 400; // 원의 반지름
let speed = 0.069; // 회전 속도

function setup() {
  createCanvas(800, 800);
  background(15); // 한 번만 그리기
  rectMode(CENTER); // 사각형의 기준점을 중앙으로 설정
  noStroke(); // 외곽선 없음
}

function draw() {
  // 1. 캔버스 중심 좌표
  let centerX = width;
  let centerY = height / 2;

  // 2. 원형 경로 계산 (Polar to Cartesian)
  // x = r * cos(theta), y = r * sin(theta)
  let x = centerX + cos(angle) * radius;
  let y = centerY + sin(angle) * radius;

  // 3. 그리기 상태 저장 (push/pop 패턴 사용)
  push();

  // 위치 이동 및 회전
  translate(x, y);

  // 사각형이 진행 방향을 바라보도록 회전 (접선 각도)
  // 원의 경우 현재 각도(angle)에 90도(HALF_PI)를 더하거나 빼면 진행 방향이 됨
  rotate(angle);

  // 4. 색상 교차 로직
  if (frameCount % 2 === 0) {
    fill(60, 200, 190);
  } else {
    fill(15);
  }

  // 5. 사각형 그리기
  rect(0, 0, 600, 400);

  pop(); // 변환 상태 복구

  // 6. 각도 업데이트 (한 바퀴 2*PI 돌면 멈추거나 계속 돌거나 선택)
  angle += speed;

  // (옵션) 한 바퀴 다 돌면 멈추고 싶다면 주석 해제
  if (angle > TWO_PI) noLoop();
}

📝 Sine Wave

/**
 * 사각형이 위에서 아래로 내려오며 사인파(Sine Wave)를 그림
 */

let yPos = 0; // Y축 시작 위치
let angle = 0; // 사인파 계산을 위한 각도
let amplitude = 100; // 진폭 (좌우로 흔들리는 폭)
let frequency = 0.06; // 진동수 (곡선의 촘촘함)

function setup() {
  createCanvas(800, 800);
  background(25); // 어두운 회색
  rectMode(CENTER);
  noStroke();
}

function draw() {
  // 캔버스 세로길이 + alpha 너머로 벗어나면 멈춤
  if (yPos > height + 400) {
    noLoop();
    return;
  }

  // 1. 좌표 계산
  // X좌표는 사인값에 따라 좌우로 진동
  let x = width / 2 + sin(angle) * amplitude;
  let y = yPos;

  push();
  translate(x, y);

  // 2. 회전 계산 (미분 개념 활용)
  // 사인 곡선의 접선 각도를 구하기 위해 코사인 값을 사용하거나,
  // 이전 좌표와의 차이를 이용할 수 있습니다. 여기서는 간단히 코사인으로 근사합니다.
  // sin(x)의 미분은 cos(x)이므로, 이를 이용해 기울기를 구합니다.
  let rotationAngle = cos(angle) * 0.5; // 0.5은 회전 강도 조절 계수
  rotate(rotationAngle);

  // 3. 색상 교차
  if (frameCount % 2 === 0) {
    fill(60, 200, 190);
  } else {
    fill(25);
  }

  // 4. 사각형 그리기
  rect(0, 0, 200, 200);
  pop();

  // 5. 변수 업데이트
  yPos += 2;          // 아래로 내려가는 속도
  angle += frequency; // 곡선의 흐름 속도
}