let nodes = []; let targetPoints = []; const connectionDist = 55; let colLime, colPurple, colSky; function setup() { createCanvas(1000, 500); colLime = color(220, 253, 139); colPurple = color(188, 132, 238); colSky = color(139, 239, 253); createIDDPoints(); for(let tp of targetPoints) { nodes.push({ x: random(width), y: random(height), tx: tp.x, ty: tp.y, col: tp.col, vx: 0, vy: 0 }); } } function draw() { background(255); for (let i = 0; i < nodes.length; i++) { let n = nodes[i]; let d = dist(mouseX, mouseY, n.x, n.y); if (d < 120) { let angle = atan2(n.y - mouseY, n.x - mouseX); n.vx += cos(angle) * 3; n.vy += sin(angle) * 3; } n.vx += (n.tx - n.x) * 0.08; n.vy += (n.ty - n.y) * 0.08; n.vx *= 0.8; n.vy *= 0.8; n.x += n.vx; n.y += n.vy; // 연결선 (조금 더 옅게) for (let j = i + 1; j < nodes.length; j++) { let nj = nodes[j]; let distCon = dist(n.x, n.y, nj.x, nj.y); if (distCon < connectionDist) { stroke(180, 100); // 연한 회색 선 strokeWeight(0.5); line(n.x, n.y, nj.x, nj.y); } } // 노드 점 noStroke(); fill(n.col); ellipse(n.x, n.y, 7, 7); } } function createIDDPoints() { // 간격을 넓혀서 덜 촘촘하게 배치 (20px 간격) let gap = 20; // I for (let x = 200; x <= 230; x += gap) { for (let y = 150; y <= 350; y += gap) targetPoints.push({x: x, y: y, col: colLime}); } // D for (let x = 350; x <= 380; x += gap) { for (let y = 150; y <= 350; y += gap) targetPoints.push({x: x, y: y, col: colLime}); } for (let a = -HALF_PI; a <= HALF_PI; a += 0.2) { let px = 380 + cos(a) * 100; let py = 250 + sin(a) * 100; let t = map(a, -HALF_PI, HALF_PI, 0, 1); targetPoints.push({x: px, y: py, col: lerpColor(colLime, colPurple, t)}); } // D for (let x = 600; x <= 630; x += gap) { for (let y = 150; y <= 350; y += gap) targetPoints.push({x: x, y: y, col: colPurple}); } for (let a = -HALF_PI; a <= HALF_PI; a += 0.2) { let px = 630 + cos(a) * 100; let py = 250 + sin(a) * 100; let t = map(a, -HALF_PI, HALF_PI, 0, 1); targetPoints.push({x: px, y: py, col: lerpColor(colPurple, colSky, t)}); } }

多摩美ロゴデザイン