// #CURATION_FREE // { Title: "Nuclear Winds", Author: "Taito Otani"} // Full screen representation（11012px × 1080px） // https://www.taito-otani.com/ // Twitter https://twitter.com/home?lang=ja //------------------------------------------ let c_setup1 = "a7cecb-8ba6a9-75704e-cacc90-f4ebbe" .split("-") .map((c) => "#" + c); let c_setup2 = "dfd9e2-c3acce-89909f-538083-2a7f62" .split("-") .map((c) => "#" + c); let c_setup3 = "c9daea-03f7eb-00b295-191516-ab2346" .split("-") .map((c) => "#" + c); let c_setup4 = "233d4d-fe7f2d-fcca46-a1c181-619b8a" .split("-") .map((c) => "#" + c); let c_setup5 = "222e50-007991-439a86-bcd8c1-e9d985" .split("-") .map((c) => "#" + c); let c_setup6 = "090909-4b5043-9bc4bc-d3ffe9-8ddbe0" .split("-") .map((c) => "#" + c); let colors = [c_setup1, c_setup2, c_setup3, c_setup4, c_setup5]; let c; let player; let angle = 0; let down = 1; let cw = 11012 / down; let ch = 1080 / down; let date = new Date(); let winds = 1; let hour = 12; let min = 0.1; let rain = 0; let season = 0; let skyColor; // texture for the particle let drop = []; let ps = null; let cnv; function setup() { c = colors[int(random(colors.length))]; winds = random(-1, 1); rain = random(0, 1); cw = windowWidth; ch = windowWidth*1080/11012; cnv = createCanvas(cw, ch, WEBGL); cnv.id("p5cnv"); let mCnv = document.getElementById("p5cnv"); if(windowHeight<1060){ mCnv.style.marginTop = "15%"; }else{ mCnv.style.marginTop = "0%"; ch = windowHeight; } frameRate(24); noStroke(); pTex = createGraphics(height * 0.05, height * 0.05); pTex.background("#fff"); ps = new ParticleSystem(0, createVector(width * 0.5, height * 0.5), pTex); for (var i = 0; i < 200; i++) { drop[i] = new Drop(); } date = new Date(); hour = date.getHours(); min = date.getMinutes(); if (hour >= 6 && hour < 17) { skyColor = color("#829CBCB599"); } else if (hour >= 17 && hour < 19) { skyColor = color("#D66853AA"); } else if (hour >= 5 && hour < 6) { skyColor = color("#D66853A3"); } else if (hour >= 19 && hour < 23) { skyColor = color("#2A2E45A0"); } else if (hour >= 0 && hour < 6) { skyColor = color("#2A2E459B"); } } function draw() { translate(-width*0.5, -height*0.5); date = new Date(); hour = date.getHours(); min = date.getMinutes(); if (hour >= 6 && hour < 17) { skyColor = color("#829cbc"); } else if (hour >= 17 && hour < 19) { skyColor = color("#D66853"); } else if (hour >= 5 && hour < 6) { skyColor = color("#D66853"); } else if (hour >= 19 && hour < 23) { skyColor = color("#2a2e45"); } else if (hour >= 0 && hour < 6) { skyColor = color("#2a2e45"); } background(skyColor); sun(); fusha(width * 0.08, height * 0.5, winds); fusha(width * 0.2, height * 0.5, winds); mountain(); buildings(); powerPlant(); trees(); //rain if (rain >= 0.7) { for (let i = 0; i < 200; i++) { drop[i].show(); drop[i].update(); } } //winds push(); let wind = createVector(winds * height*0.01, 0); ps.applyForce(wind); ps.run(); for (let i = 0; i < 2; i++) { ps.addParticle(); } pop(); } function sun(_hour) { let t = map(hour, 0, 23, 0, 360) + 90; push(); fill("#FFFCFC"); translate(width * 0.5, height); let posX = width * 0.16 * cos(t); let posY = height * 0.85 * sin(t); let sun_color = map(posY, -height * 0.9, height * 0.9, 0, 255); drawingContext.shadowColor = color(sun_color, 175, 0); drawingContext.shadowBlur = width * 0.03; circle(posX, posY, width * 0.025); posX = width * 0.16 * cos(t); posY = height * 0.85 * sin(t); fill("#F3D55D"); circle(-posX, -posY, width * 0.025); pop(); } function trees() { push(); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.01, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.05, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.01, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.03, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.021, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.15, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.01, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); translate(width * 0.03, 0); fill(c[0]); rect(width * 0.3075, height * 0.95, width * 0.005, height * 0.05); fill(c[1]); triangle( width * 0.3, height * 0.95, width * 0.31, height * 0.7, width * 0.32, height * 0.95 ); pop(); } function buildings() { fill(c[2]); rect(width * 0.83, height * 0.5, width * 0.04, height * 0.5); rect(width * 0.68, height * 0.4, width * 0.04, height * 0.6); rect(width * 0.78, height * 0.55, width * 0.04, height * 0.45); fill(c[3]); rect(width * 0.7, height * 0.6, width * 0.04, height * 0.4); rect(width * 0.75, height * 0.3, width * 0.04, height * 0.7); rect(width * 0.8, height * 0.7, width * 0.04, height * 0.4); rect(width * 0.85, height * 0.6, width * 0.04, height * 0.4); rect(width * 0.9, height * 0.3, width * 0.03, height * 0.7); rect(width * 0.95, height * 0.5, width * 0.03, height * 0.5); } function powerPlant() { fill(c[4]); rect(width * 0.45, height * 0.7, width * 0.1, height * 0.3); rect(width * 0.488, height * 0.5, width * 0.02, height * 0.2); } function mountain() { fill(c[1]); triangle( width * 0.08, height, width * 0.14, height * 0.8, width * 0.18, height ); triangle( width * 0.02, height, width * 0.07, height * 0.8, width * 0.13, height ); triangle( width * 0.15, height, width * 0.2, height * 0.8, width * 0.25, height ); } function fusha(_x, _y, _winds) { let heightOffset; let maxWidth = width * 0.01; let turbineWidth = width * 0.01; let heliceHeight = height * 0.22; let heliceWidth = width * 0.01; let speed = _winds * 3; push(); translate(_x, _y); //base fill(c[3]); rect(maxWidth / -2, 0, maxWidth, height / 2); //center turbine fill(c[4]); circle(0, 0, turbineWidth); push(); angleMode(DEGREES); rotate(angle); let spaceFromCenter = turbineWidth / 5; let x = cos(-90) * turbineWidth - heliceWidth / 2; let y = (sin(-90) * turbineWidth) / 2 + spaceFromCenter; fill("#B6BEC79B"); //one rect(x, y, heliceWidth, -heliceHeight); //two rotate(360 / 3); rect(x, y, heliceWidth, -heliceHeight); //three rotate(360 / 3); rect(x, y, heliceWidth, -heliceHeight); pop(); angle += speed; pop(); } /** * This function draws an arrow showing the direction our "wind" is blowing. */ const guides = () => { line(0, -height, 0, height); rotate(360 / 3); line(0, -height, 0, 0); rotate(360 / 3); line(0, -height, 0, 0); }; function drawVector(v, loc, scale) { push(); let arrowsize = 4; translate(loc.x, loc.y); stroke(255); rotate(v.heading()); let len = v.mag() * scale; line(0, 0, len, 0); line(len, 0, len - arrowsize, +arrowsize / 2); line(len, 0, len - arrowsize, -arrowsize / 2); pop(); } //========= PARTICLE SYSTEM =========== /** * A basic particle system class * @param num the number of particles * @param v the origin of the particle system * @param img_ a texture for each particle in the system * @constructor */ let ParticleSystem = function (num, v, img_) { this.particles = []; this.origin = v.copy(); this.img = img_; this.img.width = height * 0.2; this.img.height = height * 0.2; for (let i = 0; i < num; ++i) { this.particles.push(new Particle(this.origin, this.img)); } }; ParticleSystem.prototype.run = function () { let len = this.particles.length; for (let i = len - 1; i >= 0; i--) { let particle = this.particles[i]; particle.run(); if (particle.isDead()) { this.particles.splice(i, 1); } } }; function windowResized() { let mCnv = document.getElementById("p5cnv"); if(windowHeight<1060){ ch = windowWidth*1080/11012; mCnv.style.marginTop = "15%"; }else{ mCnv.style.marginTop = "0%"; ch = windowHeight; } resizeCanvas(windowWidth, ch); } ParticleSystem.prototype.applyForce = function (dir) { let len = this.particles.length; for (let i = 0; i < len; ++i) { this.particles[i].applyForce(dir); } }; ParticleSystem.prototype.addParticle = function () { this.particles.push(new Particle(this.origin, this.img)); }; //========= PARTICLE =========== let Particle = function (pos, img_) { this.loc = pos.copy(); let vx = randomGaussian() * 0.3; let vy = randomGaussian() * 0.3 - 1.0; this.vel = createVector(vx, vy); this.acc = createVector(); this.lifespan = 100.0; this.texture = img_; }; Particle.prototype.run = function () { this.update(); this.render(); }; Particle.prototype.render = function () { imageMode(CENTER); tint(255, this.lifespan); image( this.texture, this.loc.x, this.loc.y, this.texture.width, this.texture.height ); }; Particle.prototype.applyForce = function (f) { this.acc.add(f); }; Particle.prototype.isDead = function () { if (this.lifespan <= 0.0) { return true; } else { return false; } }; Particle.prototype.update = function () { this.vel.add(this.acc); this.loc.add(this.vel); this.lifespan -= 2.5; this.acc.mult(0); }; function Drop() { this.x = random(-width, width * 2); this.y = random(0, -height); this.show = function () { noStroke(); fill(255); ellipse(this.x, this.y, random(0, 1), random(1, 5)); }; this.update = function () { this.speed = random(0.1, 1); this.gravity = 1.05; this.y = this.y + this.speed * this.gravity; this.x = this.x + winds * 8; if (this.y > height) { this.y = random(0, -height); this.gravity = 0; } if (this.x < 0 || this.x > width) { this.x = random(-width, width * 2); } }; }