/** * color pallet */ // let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41"; // let curl = "https://coolors.co/d7263d-f46036-2e294e-1b998b-c5d86d"; let curl = "https://coolors.co/1b998b-ed217c-2d3047-fffd82-ff9b71"; let bgColor; let seed, noiseArg; let num; let obj; let row, col, scale; let prev_x, prev_y, prev_s, prev_i; let fuji; function setup() { createCanvas(windowWidth, windowHeight); // colorMode(HSB, 360, 100, 100, 100); angleMode(DEGREES); background(255); // noLoop(); // frameRate(240); pal = createPallete(curl); let cid = int(random(pal.length)); bgColor = color(300, 0, 0); pal.splice(cid, 1); pal = shuffle(pal); obj = []; // scale = 2.0; // scale = 0.6; // row = int(height / (530 * scale)) + 1; // col = int(width / (320 * scale)); row = 3; scale = (height / (row-1)) / 530 * 0.9; col = int(width / (320 * scale)); // col = 4; for (let i = 0; i < row; i++) { for (let j = 0; j < col; j++) { obj[i*col+j] = new Card(); obj[i*col+j].setPos(map(j, 0, col-1, 0, width), map(i, 0, row-1, 0, height)); obj[i*col+j].setScale(scale); } } fuji = new Card(); fuji.setPos(width/2, height/2); prev_i = 0; prev_x = 0; prev_y = 0; prev_s = 1; seed = random(1e+4); noiseArg = random(1e+4); } function init() { obj[prev_i].setScale(prev_s); prev_i = int(random(row * col)); prev_x = obj[prev_i].getPosX(); prev_y = obj[prev_i].getPosY(); prev_s = obj[prev_i].getScale(); } function update() { let d = width / (col - 1); let speed = width / 1000; for (let i = 0; i < row; i++) { for (let j = 0; j < col; j++) { let id = i * col + j; if (i % 2 == 0) { let x = (frameCount*speed + d * (j+1)) % (width + d) - d/2; obj[id].setPos(x, map(i, 0, row-1, 0, height)); obj[id].setScale(map(abs(width/2 - x), 0, width/2, scale, scale * 0.6)); } else { let x = (width + 200) - (frameCount*speed + d * (j+1)) % (width + d) - d/2; obj[id].setPos(x, map(i, 0, row-1, 0, height)); obj[id].setScale(map(abs(width/2 - obj[id].getPosX()), 0, width/2, scale, scale * 0.6)); } } } if (frameCount % 160 == 0) { init(); } let t = map(frameCount % 160, 0, 160-1, 0, 1); t = constrain(t * 1.4 - 0.1, 0, 1); let e = easeInQuart(t); let x = map(e, 0, 1, prev_x, width / 2); let y = map(e, 0, 1, prev_y, height / 2); obj[prev_i].setPos(x, y); let maxS = height / 530 * 0.9; let s = map(e, 0, 1, prev_s, maxS); obj[prev_i].setScale(s); } function draw() { background(bgColor); for (let i = 0; i < row * col; i++) { obj[i].draw(); } obj[prev_i].draw(); update(); noiseArg += 2e-3; } class Card { constructor() { this.x = 300; this.y = 300; this.w = 320; this.h = 530; this.b = 25; this.num = 5; this.scale = 1.0; this.fh = random(0.5, 0.8); this.fw = random(0.1, 0.4); this.cx1 = random(-this.w/3, this.w/3); this.cx2 = random(-this.w/3, this.w/3); this.cy1 = random(-this.h/3, -this.h/4); this.cy2 = random(-this.h/3, -this.h/4); this.cr1 = random(this.w/3, this.w/1.5); this.cr2 = random(this.w/3, this.w/1.5); this.ca1 = random(-30, 30) - 90; this.ca2 = random(-30, 30) - 90; this.init(); // generate Mt.fuji contents } init() { this.obj = []; for (let i = 0; i < this.num; i++) { this.obj[i] = new Fuji(); if (i == 0) { this.obj[i].isUpdate(false); } this.obj[i].setBasePos(this.x, this.y + this.h / 3); this.obj[i].setBaseWidth(this.w - this.b); this.obj[i].setBaseHeight(this.h * this.fh); this.obj[i].setBottom(this.y + this.h / 2 - this.b / 2); this.obj[i].setHeadWidth(this.w * this.fw); if (i != 0) { this.obj[i].setTop(this.obj[0].getTop()); } // base Mt.fuji this.obj[i].setStrokeColor(color(300, 0, 0)); this.obj[i].setFillColor(color(300)); if (i == 0) { this.obj[i].setFillColor(0); } // base Mt.fuji } } draw() { let w = this.w * this.scale; let h = this.h * this.scale; let b = this.b * this.scale; let cx1 = this.cx1 * this.scale; let cx2 = this.cx2 * this.scale; let cy1 = this.cy1 * this.scale; let cy2 = this.cy2 * this.scale; let cr1 = this.cr1 * this.scale; let cr2 = this.cr2 * this.scale; noStroke(); fill(300, 0, 0, 200); rectMode(CENTER); rect(this.x, this.y, w, h); rectMode(CORNER); // sun, moon noStroke(); fill(300); circle(this.x + cos(this.ca1) * cr1, this.y + sin(this.ca1) * cr2, h * 0.17); strokeWeight(5); stroke(300); noFill(); circle(this.x + cos(this.ca2) * cr1, this.y + sin(this.ca2) * cr2, h * 0.20); // base Mt.fuji this.obj[0].isStroke(false); this.obj[0].draw(); blendMode(DIFFERENCE); this.obj[0].isStroke(false); this.obj[0].draw(); // Mt.fuji for (let i = 1; i < this.num; i++) { this.obj[i].draw(); } blendMode(BLEND); // outline base Mt.fuji this.obj[0].isStroke(true); this.obj[0].draw(); drawFrame(this.x, this.y, w-b*2, h-b*2, b); } setPos(_x, _y) { this.x = _x; this.y = _y; let h = this.h * this.scale; let b = this.b * this.scale; for (let i = 0; i < this.num; i++) { this.obj[i].setBasePos(this.x, this.y + h / 3); this.obj[i].setBottom(this.y + h / 2 - b / 2); } } setScale(_scale) { this.scale = _scale; let w = this.w * _scale; let h = this.h * _scale; let b = this.b * _scale; let fh = this.fh * h; let fw = this.fw * w; for (let i = 0; i < this.num; i++) { this.obj[i].setBasePos(this.x, this.y + h / 3); this.obj[i].setBaseWidth(w); this.obj[i].setBaseHeight(h); this.obj[i].setBottom(this.y + h / 2 - b / 2); this.obj[i].setHeadWidth(fw); if (i != 0) { this.obj[i].setTop(this.obj[0].getTop()); } } } getPosX() { return this.x; } getPosY() { return this.y; } getScale() { return this.scale; } } class Fuji { constructor() { // base parameter this.bx = 300; this.by = 400; this.bw = 600; this.bh = 350; // shape parameter this.res = this.bw / 2; this.x = this.res / 2; this.w = this.bw * 0.5; this.minW = this.bw * 0.5; // head width this.sc = color(pal[0]); this.fc = color(pal[0]); this.lw = 5; this.btm = 550; this.top = this.bh * 0.5; this.maxY = 0; // variable for getter // variable for easing (source and destination) this.src_w = random(this.minW, this.minW * 1.5); this.dst_w = random(this.minW, this.minW * 1.5); this.src_x = random(this.res / 2); this.dst_x = random(this.res / 2); // others this.frame = int(random(1e+4)); this.step = 120; this.bUpdate = true; this.bStroke = false; } init() { this.src_x = this.dst_x; this.src_w = this.dst_w; let sign = 1; if (random(100) > map(this.x, 0, this.res, 100, 0)) { sign *= -1; } this.dst_x = constrain(this.dst_x + random(this.res * 0.05, this.res * 0.3) * sign, this.res * 0.2, this.res * 0.8); this.dst_w = random(this.minW, this.minW * 1.5); } update() { if (this.frame % this.step == 0) { this.init(); } let t = map(this.frame % this.step, 0, this.step-1, 0, 1); t = min(t * 1.2, 1); let e = easeInQuart(t); // let e = easeInOutQuart(t); // let e = easeInElastic(t); this.x = map(e, 0, 1, this.src_x, this.dst_x); this.w = map(e, 0, 1, this.src_w, this.dst_w); this.frame++; } draw() { let maxT = 6, minT = 3; let minX = this.res / 2 - this.bw / 2; let maxX = this.res / 2 + this.bw / 2; let tx = map(this.x, 0, this.res, minX, maxX); let b; // boundary if (tx <= this.res / 2) { b = map(tx, minX, this.res / 2, minT, maxT); } else { b = map(tx, this.res / 2, maxX, maxT, minT); } let w = map(this.w / (maxX - minX), 0, 1, 0, maxT - minT); let h = exp(b - w); let minY = 20, maxY = min(h, this.top); this.maxY = maxY; let sc = this.bh / exp(maxT); let ww = map(abs(b - log(minY)), 0, maxT - minT, 0, this.res / 2 - minX); let hh = map(h, 0, 250, 0, 50); if (this.bStroke) { line(tx - ww + (this.bx-this.res/2), this.by - minY, tx - ww + (this.bx-this.res/2), this.btm); line(tx + ww + (this.bx-this.res/2), this.by - minY, tx + ww + (this.bx-this.res/2), this.btm); line(tx - ww + (this.bx-this.res/2), this.btm, tx + ww + (this.bx-this.res/2), this.btm); } else { strokeWeight(0); noStroke(); fill(this.fc); rect(tx - ww + (this.bx-this.res/2), this.by - minY, ww*2, this.btm - (this.by - minY)); stroke(this.sc); } if (this.bStroke) { noFill(); strokeWeight(this.lw); stroke(this.sc); } else { noStroke(); fill(this.fc); } beginShape(); for (let x = minX; x < maxX; x++) { let t; if (this.x <= this.res/2) { t = map(x, minX, this.res/2-1, minT, maxT); } else { t = map(x, this.res/2, maxX-1, maxT, minT); } if (t > b) { t = b * 2 - t; } // reverse let y = constrain(exp(t), minY, maxY); y = (y - minY) * sc + minY; vertex(x + (this.bx - this.res/2), -y + this.by); } endShape(); if (this.bUpdate) { this.update(); } } setBasePos(_x, _y) { this.bx = _x; this.by = _y; } setBaseWidth(_w) { this.bw = _w; this.minW = _w * 0.5; } setBaseHeight(_h) { this.bh = _h; } setHeadWidth(_w) { this.w = _w; this.minW = _w; } setBottom(_y) { this.btm = _y; } setTop(_h) { this.top = _h; } setLineWidth(_lw) { this.lw = _lw; } setStrokeColor(_col) { this.sc = _col; } setFillColor(_col) { this.fc = _col; } isUpdate(_b) { this.bUpdate = _b; } isStroke(_b) { this.bStroke = _b; } getTop() { return this.maxY; } } function drawFrame(x, y, w, h, b) { noStroke(); fill(0); rectMode(CENTER); rect(x-(w+b)/2, y, b, h+b*2); rect(x+(w+b)/2, y, b, h+b*2); rect(x, y-(h+b)/2, w+b*2, b); rect(x, y+(h+b)/2, w+b*2, b); rectMode(CORNER); } function easeInQuart(t) { return 1 + (--t) * t * t * t * t; } function easeInOutQuart(t) { return t < 0.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; } function easeInElastic(t) { return (0.01 - 0.01 / t) * Math.sin(60 * t) + 1; } function createPallete(_url) { let slash_index = _url.lastIndexOf('/'); let pallate_str = _url.slice(slash_index + 1); let arr = pallate_str.split('-'); for (let i = 0; i < arr.length; i++) { arr[i] = '#' + arr[i]; } return arr; }

100 majestic styles