// sketch.js let ww; let wh; let palette = []; let pathGenerators = []; let vertices; let stepSize; let step = 15; // 範囲を指定 const numBumpsRange = [5, 15]; const bumpAmplitudeRange = [40, 80]; const bumpWidthRange = [20, 40]; const bumpSpeedRange = [0.0001, 0.001]; // 回転用の変数 let startRotations = { x: 0, y: 0, z: 0 }; let targetRotations = { x: 0, y: 0, z: 0 }; const transitionDuration = 240; let ease; // 時間 let currentDay; let currentWeekday; let currentTime; let currentMinutes; /* ======================================= setup ========================================== */ function setup() { // let ww = windowWidth; // let wh = windowHeight; ww = 1408; wh = 448; createCanvas(ww, wh, WEBGL); // 時間の取得 setCurrentDateTime(); // 日付と分を利用してをシード値として使用 randomSeed(currentDay + currentMinutes); // 曜日をインデックスとして使用してカラーパレットを選択 const paletteIndex = currentWeekday % colorArray.length; palette = colorArray[paletteIndex].colors; palette = shuffle(palette); background(palette[3]); // 線の長さを設定 stepSize = floor(ww / step); // 複数のパスを生成 const numPaths = 1; for (let i = 0; i < numPaths; i++) { const halfSize = stepSize * 4; let startPoint; let endPoint; // インスタンスごとに異なる開始点と終了点を設定 if (i === 0) { startPoint = createVector(-halfSize, -halfSize, -halfSize); endPoint = createVector(halfSize, halfSize, halfSize); } else if (i === 1) { startPoint = createVector(halfSize, -halfSize, -halfSize); endPoint = createVector(-halfSize, halfSize, halfSize); } else { startPoint = createVector(-halfSize, halfSize, -halfSize); endPoint = createVector(halfSize, -halfSize, halfSize); } // PathGeneratorのインスタンスを作成し、ランダムな値を生成 const randomNumBumps = floor( random(numBumpsRange[0], numBumpsRange[1] + 1) ); const randomBumpAmplitudes = Array.from({ length: randomNumBumps }, () => random(bumpAmplitudeRange[0], bumpAmplitudeRange[1]) ); const randomBumpWidths = Array.from({ length: randomNumBumps }, () => random(bumpWidthRange[0], bumpWidthRange[1]) ); const randomBumpSpeeds = Array.from({ length: randomNumBumps }, () => random(bumpSpeedRange[0], bumpSpeedRange[1]) ); const newPathGenerator = new PathGenerator( startPoint, endPoint, stepSize, randomNumBumps, randomBumpAmplitudes, randomBumpWidths, randomBumpSpeeds ); newPathGenerator.generatePath(); pathGenerators.push(newPathGenerator); } // イージング ease = createEasing(0.57, 0.46, 0, 0.99); // 初回に目標回転パターンを設定 setNewTargetRotation(); } //時間の取得 function setCurrentDateTime() { let d = new Date(); let hour = d.getHours(); let minutes = d.getMinutes(); currentDay = d.getDate(); currentWeekday = d.getDay(); currentTime = ("0" + hour).slice(-2); currentMinutes = ("0" + minutes).slice(-2); } // 次の回転パターンを設定する関数 function setNewTargetRotation() { const rotationPatterns = [ { x: -PI / 2, y: PI / 4, z: PI / 4 }, { x: PI / 4, y: -PI / 2, z: PI / 4 }, { x: PI / 4, y: PI / 4, z: -PI / 2 }, { x: PI / 2, y: PI / 2, z: PI / 4 }, { x: PI / 4, y: PI / 2, z: PI / 2 }, { x: PI / 2, y: PI / 4, z: PI / 2 }, ]; // 現在の目標回転値を次の開始回転値として保存 startRotations.x = targetRotations.x; startRotations.y = targetRotations.y; startRotations.z = targetRotations.z; // 新しいランダムな目標回転パターンを設定 const newPattern = random(rotationPatterns); targetRotations.x = newPattern.x; targetRotations.y = newPattern.y; targetRotations.z = newPattern.z; } /* ======================================= draw ========================================== */ function draw() { background(palette[3]); // orbitControl(); // 時間に応じてアンビエントライトの明るさを調整 let hour = int(currentTime); let ambientBrightness = map(abs(hour - 12), 0, 12, 250, 5); ambientLight(ambientBrightness); let c = color(255); directionalLight(c, 1, 1, 0); // transitionDurationフレームごとに全てのパスを再生成 if (frameCount % (transitionDuration * 10) === 0) { for (const pg of pathGenerators) { pg.generatePath(); } } // transitionDurationフレームごとに次の回転パターンを設定 if (frameCount % transitionDuration === 0) { setNewTargetRotation(); } // 補間係数を計算 const t = (frameCount % transitionDuration) / transitionDuration; const easedT = ease(t); // 開始回転値から目標回転値へと補間する const interpolatedRotationX = lerp( startRotations.x, targetRotations.x, easedT ); const interpolatedRotationY = lerp( startRotations.y, targetRotations.y, easedT ); const interpolatedRotationZ = lerp( startRotations.z, targetRotations.z, easedT ); // Camera let camDist = ww * 0.4; let camCenter = createVector(0, 0, 0); let eyeX = camDist * interpolatedRotationX; let eyeY = camDist * interpolatedRotationY; let eyeZ = camDist * interpolatedRotationZ; camera(eyeX, eyeY, eyeZ, camCenter.x, camCenter.y, camCenter.z, 0, 1, 0); // 全てのパスを描画 for (const pg of pathGenerators) { pg.drawPath(); } } const colorArray = [ { id: 0, colors: ["#253276", "#3a4a9c", "#4e62c2", "#b3b9e0"], }, { id: 1, colors: ["#f9d3cc", "#fbbeb0", "#fda99a", "#ffeceb"], }, { id: 2, colors: ["#f07433", "#f48f5a", "#f7aa81", "#ffe2d1"], }, { id: 3, colors: ["#437800", "#6ea800", "#a3d900", "#e6f7c2"], }, { id: 4, colors: ["#f2c732", "#f2eb9b", "#c6e355", "#86c044"], }, { id: 5, colors: ["#c0b39e", "#d8d3cf", "#e7e4e0", "#f2f2f2"], }, { id: 6, colors: ["#3a274f", "#6f4199", "#414f99", "#5c67a3"], }, ]; function windowResized() { resizeCanvas(ww, wh); } /* ======================================= PathGenerator ========================================== */ class PathGenerator { constructor( startPoint, endPoint, stepSize, numBumps, bumpAmplitude, bumpWidth, bumpSpeed ) { this.startPoint = startPoint; this.endPoint = endPoint; this.stepSize = stepSize; this.pathPoints = []; this.numVertices = 400; // 描画する頂点の数 // グローバル変数から受け取った値で初期化 this.numBumps = numBumps; this.bumpAmplitude = bumpAmplitude; this.bumpWidth = bumpWidth; this.bumpSpeed = bumpSpeed; // 複数のUを管理するための設定 this.bumps = []; // 各Uの情報を格納する配列 // Uの初期化 for (let i = 0; i < this.numBumps; i++) { this.bumps.push({ position: i * (1 / this.numBumps), speed: this.bumpSpeed[i % this.bumpSpeed.length], amplitude: this.bumpAmplitude[i % this.bumpAmplitude.length], width: this.bumpWidth[i % this.bumpWidth.length], direction: 1, // 1は正方向、-1は逆方向 type: int(random(2)), }); } // パス上のサンプル点と接線ベクトルのキャッシュ this.sampleCount = this.numVertices; this.samplePositions = new Array(this.sampleCount + 1); this.sampleTangents = new Array(this.sampleCount + 1); } // Catmull-Romスプライン補間 catmullRom(a, b, c, d, t) { return ( 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (-a + 3 * b - 3 * c + d) * t * t * t) ); } // 経路を生成する generatePath() { this.pathPoints = []; let currentPoint = this.startPoint.copy(); this.pathPoints.push(currentPoint); const maxSteps = 1000; let loopCount = 0; while (loopCount < maxSteps) { let possibleMoves = []; let remainingDistance = p5.Vector.dist(currentPoint, this.endPoint); if (remainingDistance <= this.stepSize) { this.pathPoints.push(this.endPoint.copy()); break; } if (abs(this.endPoint.x - currentPoint.x) > 0) { possibleMoves.push( createVector( Math.sign(this.endPoint.x - currentPoint.x) * this.stepSize, 0, 0 ) ); } if (abs(this.endPoint.y - currentPoint.y) > 0) { possibleMoves.push( createVector( 0, Math.sign(this.endPoint.y - currentPoint.y) * this.stepSize, 0 ) ); } if (abs(this.endPoint.z - currentPoint.z) > 0) { possibleMoves.push( createVector( 0, 0, Math.sign(this.endPoint.z - currentPoint.z) * this.stepSize ) ); } if (possibleMoves.length > 0) { let move = random(possibleMoves); let nextPoint = p5.Vector.add(currentPoint, move); this.pathPoints.push(nextPoint); currentPoint = nextPoint; } else { break; } loopCount++; } // サンプル点と接線を事前計算 for (let i = 0; i <= this.sampleCount; i++) { const t = map(i, 0, this.sampleCount, 0, 1); const pos = this.getPointOnPath(t); this.samplePositions[i] = pos; const nextT = map(i + 1, 0, this.sampleCount, 0, 1); const nextPos = this.getPointOnPath(min(1, nextT)); const tangent = p5.Vector.sub(nextPos, pos); if (tangent.mag() > 0) tangent.normalize(); this.sampleTangents[i] = tangent; } } // パス上の任意の位置の点を取得する getPointOnPath(t) { if (t >= 1) { return this.pathPoints[this.pathPoints.length - 1].copy(); } let numSegments = this.pathPoints.length - 1; let segmentLength = 1 / numSegments; let segmentIndex = floor(t / segmentLength); let segmentT = (t % segmentLength) / segmentLength; let p0 = this.pathPoints[max(segmentIndex - 1, 0)]; let p1 = this.pathPoints[segmentIndex]; let p2 = this.pathPoints[min(segmentIndex + 1, numSegments)]; let p3 = this.pathPoints[min(segmentIndex + 2, numSegments)]; let x = this.catmullRom(p0.x, p1.x, p2.x, p3.x, segmentT); let y = this.catmullRom(p0.y, p1.y, p2.y, p3.y, segmentT); let z = this.catmullRom(p0.z, p1.z, p2.z, p3.z, segmentT); return createVector(x, y, z); } // パスを描画し、Uをアニメーションさせる drawPath() { for (let i = 0; i <= this.numVertices; i++) { let t = map(i, 0, this.numVertices, 0, 1); let currentPos = this.samplePositions[i] || this.getPointOnPath(t); let totalOffset = 0; // ベクトルの一時バッファを使い回し let finalNormalVector = this._tmpNormal || createVector(0, 0, 0); finalNormalVector.set(0, 0, 0); // 複数のUのオフセットを計算して合計する for (let bump of this.bumps) { let bumpIndex = floor(bump.position * this.sampleCount); let bumpPos = this.samplePositions[bumpIndex] || this.getPointOnPath(bump.position); let dx = currentPos.x - bumpPos.x; let dy = currentPos.y - bumpPos.y; let dz = currentPos.z - bumpPos.z; let distSq = dx * dx + dy * dy + dz * dz; if (distSq < bump.width * bump.width) { let dist1 = sqrt(distSq); let relativeDist = map( dist1, -bump.width, bump.width, -PI / 2, PI / 2 ); let offset = bump.amplitude * Math.tanh(cos(relativeDist)); totalOffset += offset; let pathVector = this.sampleTangents[i] || createVector(0, 0, 0); let normalVector = this._tmpNV || createVector(0, 0, 0); if (pathVector.mag() > 0) { // Uごとのtypeを使用 if (bump.type === 0) { normalVector .set(pathVector.y, pathVector.z, pathVector.x) .normalize(); } else { normalVector .set(pathVector.y, pathVector.z, -pathVector.x) .normalize(); } } else { normalVector.set(0, 0, 0); } finalNormalVector.add(normalVector); } } finalNormalVector.normalize(); let finalX = currentPos.x + finalNormalVector.x * totalOffset; let finalY = currentPos.y + finalNormalVector.y * totalOffset; let finalZ = currentPos.z + finalNormalVector.z * totalOffset; push(); let ct = map(i, 0, this.sampleCount, 0, 1); let alpha = lerp(0, 255, constrain(map(ct, 0, 0.4, 0, 1), 0, 1)) * (1 - constrain(map(ct, 0.6, 1, 0, 1), 0, 1)) + lerp(0, 255, constrain(map(ct, 0.6, 1, 0, 1), 0, 1)) * constrain(map(ct, 0.6, 1, 0, 1), 0, 1); if (ct < 0.4) { alpha = lerp(0, 255, map(ct, 0, 0.4, 0, 1)); } else if (ct > 0.6) { alpha = lerp(255, 0, map(ct, 0.6, 1, 0, 1)); } else { alpha = 255; } let baseCol = color(palette[0]); let elliCol = color(palette[2]); let gradCol = color(red(baseCol), green(baseCol), blue(baseCol), alpha); let gradElliCol = color( red(elliCol), green(elliCol), blue(elliCol), alpha ); translate(finalX, finalY, finalZ); push(); strokeWeight(1); stroke(gradElliCol); noFill(); let elliSize = lerp(1, ww * 2, 1 - pow(2 * ct - 1, 2)); rotateX(ct * PI); ellipse(0, 0, elliSize); pop(); noStroke(); fill(gradCol); box(5); pop(); } // 各Uの位置を更新 for (let bump of this.bumps) { bump.position += bump.speed * bump.direction; // パスの終点または始点を超えた場合、進行方向を反転し、範囲内に収める if (bump.position > 1) { bump.position = 1 - (bump.position - 1); // 逆側に折り返す bump.direction *= -1; } else if (bump.position < 0) { bump.position = -bump.position; // 逆側に折り返す bump.direction *= -1; } } } } // イージング function createEasing(p1x, p1y, p2x, p2y) { function getX(t) { return ( (1 - t) * (1 - t) * (1 - t) * 0 + 3 * (1 - t) * (1 - t) * t * p1x + 3 * (1 - t) * t * t * p2x + t * t * t * 1 ); } function getY(t) { return ( (1 - t) * (1 - t) * (1 - t) * 0 + 3 * (1 - t) * (1 - t) * t * p1y + 3 * (1 - t) * t * t * p2y + t * t * t * 1 ); } // ベジェ曲線のパラメータを二分探索 function bezierEasing(time) { if (time <= 0) return 0; if (time >= 1) return 1; let lower = 0; let upper = 1; let x = 0; let currentT = 0; for (let i = 0; i < 100; i++) { currentT = (lower + upper) / 2; x = getX(currentT); if (x < time) { lower = currentT; } else { upper = currentT; } } return getY(currentT); } return bezierEasing; }

Combination of Waves