xxxxxxxxxx116
let angleX = 0;let angleY = 0;let angleZ = 0;let thicknessSlider, transparencySlider, speedSlider;function setup() { createCanvas(600, 600, WEBGL); // WEBGL 모드 사용 frameRate(60); // 부드러운 회전을 위해 60 FPS 설정 ortho(-300, 300, 300, -300, 0.1, 1000); // 왜곡 없는 평행 투영 설정 // 슬라이더 생성 thicknessSlider = createSlider(1, 10, 1); // 선 두께: 1에서 10까지 thicknessSlider.position(10, 10); // 위치 설정 transparencySlider = createSlider(0, 255, 0); // 투명도: 0에서 255까지 transparencySlider.position(10, 40); // 위치 설정 speedSlider = createSlider(0, 5, 1, 0.1); // 회전 속도: 0에서 5까지 (0.1 단위) speedSlider.position(10, 70); // 위치 설정}function draw() { background(30); // 어두운 배경 // 슬라이더 값 가져오기 const thickness = thicknessSlider.value(); const transparency = transparencySlider.value(); const speed = speedSlider.value(); // 회전 속도 // 모든 축을 기준으로 회전 rotateX(angleX); rotateY(angleY); rotateZ(angleZ); // 정육면체의 면을 그리기 drawCubeFaces(150, transparency); // 선 위에 덧그리기 strokeWeight(thickness); stroke(255); // 흰색 선 noFill(); // 면을 채우지 않음 drawCubeEdges(150); // 각도 증가로 자연스러운 회전 효과 angleX += radians(speed); // X축 회전 angleY += radians(speed * 1.5); // Y축 회전 angleZ += radians(speed * 1.2); // Z축 회전}// 정육면체의 면을 그리는 함수function drawCubeFaces(size, transparency) { const half = size / 2; // 정육면체의 꼭짓점 좌표 const vertices = [ [-half, -half, -half], // 0: 좌측 하단 뒤 [half, -half, -half], // 1: 우측 하단 뒤 [half, half, -half], // 2: 우측 상단 뒤 [-half, half, -half], // 3: 좌측 상단 뒤 [-half, -half, half], // 4: 좌측 하단 앞 [half, -half, half], // 5: 우측 하단 앞 [half, half, half], // 6: 우측 상단 앞 [-half, half, half], // 7: 좌측 상단 앞 ]; // 정육면체의 각 면을 별도로 정의 const faces = [ [0, 1, 2, 3], // 뒤쪽 면 [4, 5, 6, 7], // 앞쪽 면 [0, 4, 7, 3], // 왼쪽 면 [1, 5, 6, 2], // 오른쪽 면 [3, 2, 6, 7], // 위쪽 면 [0, 1, 5, 4], // 아래쪽 면 ]; // 면을 그릴 때 투명도 적용 for (let face of faces) { fill(255, 255, 255, transparency); // 흰색에 투명도 적용 beginShape(); for (let i = 0; i < face.length; i++) { const v = vertices[face[i]]; vertex(v[0], v[1], v[2]); } endShape(CLOSE); }}// 정육면체의 선을 그리는 함수function drawCubeEdges(size) { const half = size / 2; // 정육면체의 꼭짓점 좌표 const vertices = [ [-half, -half, -half], // 0: 좌측 하단 뒤 [half, -half, -half], // 1: 우측 하단 뒤 [half, half, -half], // 2: 우측 상단 뒤 [-half, half, -half], // 3: 좌측 상단 뒤 [-half, -half, half], // 4: 좌측 하단 앞 [half, -half, half], // 5: 우측 하단 앞 [half, half, half], // 6: 우측 상단 앞 [-half, half, half], // 7: 좌측 상단 앞 ]; // 정육면체의 모서리를 연결하는 선분 const edges = [ [0, 1], [1, 2], [2, 3], [3, 0], // 뒤쪽 면 [4, 5], [5, 6], [6, 7], [7, 4], // 앞쪽 면 [0, 4], [1, 5], [2, 6], [3, 7], // 앞뒤 연결 ]; for (let edge of edges) { const v1 = vertices[edge[0]]; const v2 = vertices[edge[1]]; line(v1[0], v1[1], v1[2], v2[0], v2[1], v2[2]); // 선 그리기 }}