//愛の結晶 //2023/12/3 pianocurve //1、名前と名前を表示　右から左へ流れる感じ //2、名前と名前を左に表示 //3、名前が回転しながらだんだんくっついて6角形になり結晶を表示 //5 小さく背景に //直接名前指定機能　URLの末尾に追加　 #名前　＋　全角空白　＋　名前　 const W = 1920; const H = 970; const LW = 768; const LH = 768; const rW = 1000; const bW = 550; const gW = 370; const PAIR = [ ["さんた", "となかい"], ["よぞら", "ほし"], ["まち", "いるみ"], ["きみ", "ぼく"], ["くりすます", "つりぃ"], ["こたつ", "みかん"], ["ゆき", "ゆきだるま"], ["わすれもの", "てぶくろ"], ] const I$ = { "CORNER_NUM": 5, "COLOR_LIST": [[50, 0, 15], [14, 35, 50]], //[r,g,b],[r,g,b],... and more. "P_COLOR_LIST": [[255, 228, 120], [255, 255, 255]],//[r,g,b],[r,g,b],... and more. "DELAY_TIME": 12000, //ms "DURATION_TIME": 3000, //ms //中央の名前の位置 "NAME_SIZE": 120, "TOP_NAME_SP": 100, "LEFT_NAME_SP": 50, "RIGHT_NAME_SP": 380, "DOT_SIZE": 5, //結晶のサイズ小 "MIN_SIZE": 0.45, //アニメーションのタイミング "LIFE_TIME": [2500, 3500, 4000, 6000, 12000, 14000, 20000], // 秒 "BLINK": 6000, //背景の星の数と基準サイズ "STAR_NUM": 200, "STAR_SIZE": [3.5, 3.5, 3.5, 5.6, 5.6, 5.6, 8, 8, 11, 11, 16], } let cm; let cm_p; let snowflakes = []; let tmp_season = -1; let countSeason = 0; let readNameBase = 0; let gNameTime; let gNameA = ""; let gNameB = ""; let gradient; let nameMatrix = []; let backImageData = []; class Snowflake { constructor(col, nameA, nameB) { this.t = millis();//時系列で動作させる this.col = col; this.nameA = nameA; this.nameB = nameB; //回転報告やおよびサイズ　に利用 //最大の文字数で this.r = int(LH / (nameA.length > nameB.length ? nameA.length : nameB.length) * 0.35); this.aX = random(LW / 16); this.aY = random(LH / 16); this.aR = random(10, 20); this.bX = LW / 16; this.bY = random(this.r, LH / 8); this.bR = random(-10, -20); this.age = random(0.75, 1); console.log(`aX:${int(this.aX)},aY:${int(this.aY)},aR:${int(this.aR)}, bX:${int(this.bX)},bY:${int(this.bY)},bR:${int(this.bR)}`) this.x = rW / 2 - LW / 2 this.y = H / 2 - LH / 2 this.sizeScale = 1; //左右は少し　サイズが大きいと早く this.xSpeed = random(-1, 1); this.ySpeed = this.r / 100; } createSnowflake(cv) { const age = millis() - this.t; const nAgle = frameCount * (Math.floor(this.xSpeed * 5) % 2 == 0 ? 1 : -1); if (age < I$.LIFE_TIME[0]) { //STEP 0 待機 //All シーズン drawName(layerM, age); return; } if (age < I$.LIFE_TIME[1]) { //STEP 1 名前を寄せる layerM.clear(); const lAge = age - I$.LIFE_TIME[0]; drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, 0, map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], LW / 8 - this.r, this.aX), map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], 0, this.aY), map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], 0, this.aR), map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], LW / 8 + (this.r), this.bX), map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], 0, this.bY), map(age, I$.LIFE_TIME[0], I$.LIFE_TIME[1], 0, this.bR), 1, false, 1); } else if (age < I$.LIFE_TIME[2]) { // STEP 2　反転コピーする drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, 0, this.aX, this.aY, this.aR, this.bX, this.bY, this.bR, 1, true, 1); } else if (age < I$.LIFE_TIME[3]) { // STEP 3 コピーをCORNER_NUM分作る drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, 0, this.aX, this.aY, this.aR, this.bX, this.bY, this.bR, map(age, I$.LIFE_TIME[2], I$.LIFE_TIME[3], 0, I$.CORNER_NUM), true, 1); } else if (age < I$.LIFE_TIME[4]) {// //STEP 4 その場で点滅する //this.age以上は回転させない const lAge = (age / I$.LIFE_TIME[4]) > this.age ? this.age * I$.LIFE_TIME[4] : age; //アングルを変化 const ang = cos(lAge / I$.BLINK * 720);//振動 drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, 0, ang * this.aX, ang * this.aY, ang * this.aR, ang * this.bX, ang * this.bY, ang * this.bR, I$.CORNER_NUM, true, 1 ); } else if (age < I$.LIFE_TIME[5]) {// //STEP 4 回転して縮む const ang = cos(this.age * I$.LIFE_TIME[4] / I$.BLINK * 720); drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, nAgle, ang * this.aX, ang * this.aY, ang * this.aR, ang * this.bX, ang * this.bY, ang * this.bR, I$.CORNER_NUM, true, map(age, I$.LIFE_TIME[4], I$.LIFE_TIME[5], 1, I$.MIN_SIZE, true) ); } else { //だんだん消える予定 const ang = cos(this.age * I$.LIFE_TIME[4] / I$.BLINK * 720); drawSnow(layerP, this.nameA, this.nameB, this.r, this.col, nAgle, ang * this.aX, ang * this.aY, ang * this.aR, ang * this.bX, ang * this.bY, ang * this.bR, I$.CORNER_NUM, true, I$.MIN_SIZE) } cv.blendMode(OVERLAY); cv.image(layerP, this.x, this.y); } moveSnowflake() { const age = millis() - this.t; if (age < I$.LIFE_TIME[4]) return; if (this.x < 0 - LW / 2) { this.x = width + LW / 2; } if (this.x > width + LW / 2) { this.x = 0 - LW / 2; } if (this.y < 0 - LH / 2) { this.y = height + LH / 2; } if (this.y > height) { this.y = - LH / 2; } this.x += this.xSpeed; this.y += this.ySpeed; } } class ColorMorphing { constructor(colors, delay, duration) { this.startTime = millis(); this.elapsed = 0; this.season = 0; this.nextSeason = 1; this.colors = colors.concat(); //Colors copy this.delay = delay; this.duration = duration; this.c = [0, 0, 0];//Default Color copy this.p = 0.0; //Progress } getColor() { const now = millis(); this.c = this.colors[this.season].concat(); this.elapsed = now - this.startTime; if (this.elapsed >= this.delay) { // Season++ and Reset startTime / this.p = (this.elapsed - this.delay) / this.duration; //progress　0.0 - 1.0 if (this.p >= 1) { this.season = this.nextSeason; this.nextSeason++; if (this.nextSeason == this.colors.length) { this.nextSeason = 0; } this.c = this.colors[this.season]; this.startTime = millis(); } else { this.c[0] = int(this.colors[this.nextSeason][0] * this.p + this.colors[this.season][0] * (1 - this.p)); this.c[1] = int(this.colors[this.nextSeason][1] * this.p + this.colors[this.season][1] * (1 - this.p)); this.c[2] = int(this.colors[this.nextSeason][2] * this.p + this.colors[this.season][2] * (1 - this.p)); } } return this.c; } } function setup() { pixelDensity(1); FR = frameRate(); myCanvas = createCanvas(W, H); //レイヤー layerB = createGraphics(W, H); layerM = createGraphics(W, H); layerF = createGraphics(W, H); //アイテム作成レイヤー layerP = createGraphics(LW, LH); layerT = createGraphics(bW, H); angleMode(DEGREES); layerF.angleMode(DEGREES); layerM.angleMode(DEGREES); layerB.angleMode(DEGREES); layerP.angleMode(DEGREES); layerT.angleMode(DEGREES); cm = new ColorMorphing(I$.COLOR_LIST, I$.DELAY_TIME, I$.DURATION_TIME); cm_p = new ColorMorphing(I$.P_COLOR_LIST, I$.DELAY_TIME, I$.DURATION_TIME); //URLパラメータに名前があればそちらを優先 //getURLNames(); //名前の読み込み位置をランダムにも readNameBase = 0; //int(random(PAIR.length)); //グラーデーション作成 gradient = drawingContext.createLinearGradient(0, 0, 0, H); // Add three color stops gradient.addColorStop(0, "black"); gradient.addColorStop(0.66, "gray"); gradient.addColorStop(1, "white"); //背景データ作成 for (let i = 0; i < I$.STAR_NUM; i++) { backImageData.push([random(W), random(H), random(I$.STAR_SIZE)]) } } function draw() { layerF.clear(); c = cm.getColor();//Return array [r,g,b] c_p = cm_p.getColor();//Return array [r,g,b] //一定間隔で結晶を作成 //シーズン切り替えのタイミングで if (tmp_season != cm.season) { if (snowflakes.length > 20) { snowflakes.shift(); } //最初に名前を取得 //URLパラメータに名前があればそちらを優先 if (gNameA != "" && gNameB != "") { nameA = gNameA nameB = gNameB } else { const pair = PAIR[(countSeason + readNameBase) % (PAIR.length)]; nameA = pair[1]; //縦書きなので左優先 nameB = pair[0]; } console.log(`${nameA},${nameB}`) snowflakes.push(new Snowflake(I$.P_COLOR_LIST[0], nameA, nameB)); setNameImage(layerT, nameA, nameB); tmp_season = cm.season; countSeason++; } //追加された雪の結晶の変化 for (let i = 0; i < snowflakes.length; i++) { snowflakes[i].col = c_p; snowflakes[i].createSnowflake(layerF); snowflakes[i].moveSnowflake(); } //5、背景に重ねる。 background(c); blendMode(OVERLAY); drawingContext.fillStyle = gradient; rect(0, 0, W, H); //雪の背景　ランダムきらきら drawStar(layerB); //ガイドON OFF //drawGuide(layerB); blendMode(BLEND); push(); drawingContext.shadowColor = color(255, 255, 220); drawingContext.shadowBlur = 20; image(layerB, 0, 0); image(layerM, 0, 0); image(layerF, 0, 0); pop(); } function drawStar(cv) { cv.clear(); cv.noStroke(); cv.fill(255, 255, 255, 150); //x,y で全体を少し揺らす大きほど揺れる let sX = sin(frameCount * .5) * .5; let sY = cos(frameCount) * .5; for (let i = 0; i < backImageData.length; i++) { let sS = random(-2, 2); cv.ellipse( backImageData[i][0] + sX * backImageData[i][2], backImageData[i][1] + sY * backImageData[i][2], backImageData[i][2] + sS); } } function drawGuide(cv, on = true) { if (!on) { return false; } cv.push(); //noStroke(); cv.noFill(); // 赤枠 //fill(200, 0, 0, 100); cv.stroke(200, 0, 0, 100) cv.rect(0, 0, rW, H); // 青枠 // fill(0, 0, 200, 100); cv.stroke(0, 0, 200, 100) cv.rect(rW, 0, bW, H); // 緑枠 // fill(0, 200, 0, 100); cv.stroke(0, 200, 0, 100); cv.rect(rW + bW, 0, gW, H); // 余白 cv.stroke(60); cv.noFill(); cv.rect(10, 10, W - 20, H - 20); cv.pop(); } function drawAreaB(cv) { cv.push(); cv.fill(0);//color(c_p) cv.noStroke(); cv.rect(rW, 0, bW, H); cv.pop(); } //中央の名前の配置を取得して配列に収める function setNameImage(cv, nameA, nameB) { //cv　に名前を書き、その情報を toCvに任意の図形で書き出す const mW = cv.width / I$.DOT_SIZE; const mH = cv.height / I$.DOT_SIZE; //セットした時間を記録 gNameTime = millis(); cv.clear(); cv.fill(255);//この値で判断 cv.strokeWeight(4); cv.textSize(I$.NAME_SIZE); cv.textWrap(CHAR); cv.push(); cv.text(nameA, I$.LEFT_NAME_SP, I$.TOP_NAME_SP, I$.NAME_SIZE) cv.pop(); cv.push(); cv.text(nameB, I$.RIGHT_NAME_SP, I$.TOP_NAME_SP, I$.NAME_SIZE) cv.pop(); nameMatrix = Array.from(new Array(mW), () => new Array(mH)) for (let x = 0; x < mW; x++) { for (let y = 0; y < mH; y++) { let tmpColor = cv.get(x * I$.DOT_SIZE, y * I$.DOT_SIZE); if (tmpColor[0] == 255) { nameMatrix[x][y] = true; } } } cv.clear(); } //中央の名前を描く function drawName(cv, age) { const size = sin(age / I$.LIFE_TIME[0] * 180) * 10; const ySize = sin(age / I$.LIFE_TIME[0] * 380) * 10; const move = cos(age / I$.LIFE_TIME[0] * 180) * 10; cv.clear(); cv.push(); cv.ellipseMode(CENTER); cv.translate(rW, 0); cv.fill(c_p); cv.strokeWeight(0.5) for (let x = 0; x < nameMatrix.length; x++) { for (let y = 0; y < nameMatrix[x].length; y++) { if (nameMatrix[x][y]) { //かがやき cv.ellipse(x * I$.DOT_SIZE + move, y * I$.DOT_SIZE, size * random(1)); // cv.ellipse(x * I$.DOT_SIZE + move, y * I$.DOT_SIZE, size); } } } cv.pop(); } function drawSnow(cv, nameA, nameB, size, col, r, aX, aY, aR, bX, bY, bR, drawNum, dup, scale) { //1、 Layer Pの円弧にランダムな図形を描く cv.clear(); cv.push(); cv.noFill(); cv.stroke(col); cv.textLeading(size + 10); //TEST // cv.background(60); const textRep = 2; const fontSize = size;//[16,32,60 cv.textSize(fontSize); cv.textWrap(CHAR); cv.strokeWeight(2); cv.push(); cv.rotate(aR); cv.text(nameA, aX, aY, fontSize); cv.pop(); cv.push(); cv.rotate(bR); cv.text(nameB, bX, bY, fontSize); cv.pop(); cv.pop(); //4、コピーして円形にする let gh = cv.get(); cv.clear(); cv.push(); cv.translate(LW / 2, LH / 2); // TEST cv.rotate(r); for (let i = 0; i < drawNum; i++) {//drawNum cv.push(); cv.scale(scale);//サイズ cv.rotate(i * 360 / I$.CORNER_NUM); cv.image(gh, 0, 0); if (dup) { cv.scale(-1, 1); cv.image(gh, 0, 0); } cv.pop(); } cv.pop(); }