diff --git a/css/main.css b/css/main.css index b414743..845e4f8 100644 --- a/css/main.css +++ b/css/main.css @@ -68,6 +68,7 @@ html { } #desk { + /* display: none; */ display: flex; flex-direction: column; align-items: center; diff --git a/index.html b/index.html index 5ca3617..5d2f141 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@ - + diff --git a/js/sketch.js b/js/sketch.js index 175d675..e80df6e 100644 --- a/js/sketch.js +++ b/js/sketch.js @@ -11,6 +11,9 @@ let sketch = function(p) { let stars; let bg; + let mover; + let shootingStarDirection; + let time = 0; @@ -22,7 +25,7 @@ let sketch = function(p) { bgInit(); - + mover = new Mover(); // p.noLoop(); } @@ -31,23 +34,23 @@ let sketch = function(p) { p.background(bgCol); p.image(bg, 0, 0); - // p.circle(30, time*1.5, 10); + if (time%72 == 0) { //72 is 3s at 24fps + if (p.random(1) < 0.3) { + mover.init(); + let accX = p.random(12, 18) * p.random([-1, 1]); + let accY = p.random(-4, 4); + mover.vel.set(accX, accY); + } + } + + if (mover.lifespan < 255) { + mover.update(); + mover.show(); + } + - // for (let i=0; i= p.height-this.r) { + this.pos.y = p.height-this.r; + this.vel.y *= -1; + } + + if (this.pos.x >= p.width-this.r) { + this.pos.x = p.width-this.r; + this.vel.x *= -1; + } else if (this.pos.x <= this.r) { + this.pos.x = this.r; + this.vel.x *= -1; + } + } + + + update() { + + this.lifespan += this.burnrate; + this.lifespan = p.constrain(this.lifespan, 0, 255); + if (this.lifespan < 255) { + + this.pos.add(this.vel); + this.vel.mult(0.98); + this.vel.add(this.acc); + } + + + + } + + show() { + // p.stroke(255); + // p.strokeWeight(2); + // p.fill(255, 100); + // p.ellipse(this.pos.x, this.pos.y, this.r * 2); + + p.strokeWeight(this.size); + // p.stroke(this.color); + p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan); + p.point(this.pos); + + } + } + p.windowResized = function() { //Redraw only if new size if bigger than previously let newWidth = p.windowWidth; @@ -112,24 +212,24 @@ let sketch = function(p) { starDensity = 0.01; } let nb = p.round(starDensity * currentWidth * currentHeight) - console.log('nbStars: ' + nb); + // console.log('nbStars: ' + nb); return nb; } function hexToRgb(hex) { - hex = hex.replace('#', ''); + hex = hex.replace('#', ''); - var bigint = parseInt(hex, 16); + var bigint = parseInt(hex, 16); - var r = (bigint >> 16) & 255; - var g = (bigint >> 8) & 255; - var b = bigint & 255; + var r = (bigint >> 16) & 255; + var g = (bigint >> 8) & 255; + var b = bigint & 255; - return p.color(r, g, b); + return p.color(r, g, b); } function setGradient(x, y, w, h, c1, c2) { bg.noFill(); - // Top to bottom gradient + // Top to bottom gradient for (let i = y; i <= y + h; i++) { let inter = p.pow(p.map(i, y, y + h, 0, 1),6); let c = bg.lerpColor(c1, c2, inter);