Added shooting start, adding Umami
This commit is contained in:
@@ -68,6 +68,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#desk {
|
#desk {
|
||||||
|
/* display: none; */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@@ -73,7 +73,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script>
|
||||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||||
<script src="./js/vendor/p5.js"></script>
|
<script src="./js/vendor/p5.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
|
146
js/sketch.js
146
js/sketch.js
@@ -11,6 +11,9 @@ let sketch = function(p) {
|
|||||||
let stars;
|
let stars;
|
||||||
let bg;
|
let bg;
|
||||||
|
|
||||||
|
let mover;
|
||||||
|
let shootingStarDirection;
|
||||||
|
|
||||||
let time = 0;
|
let time = 0;
|
||||||
|
|
||||||
|
|
||||||
@@ -22,7 +25,7 @@ let sketch = function(p) {
|
|||||||
|
|
||||||
bgInit();
|
bgInit();
|
||||||
|
|
||||||
|
mover = new Mover();
|
||||||
|
|
||||||
// p.noLoop();
|
// p.noLoop();
|
||||||
}
|
}
|
||||||
@@ -31,23 +34,23 @@ let sketch = function(p) {
|
|||||||
p.background(bgCol);
|
p.background(bgCol);
|
||||||
p.image(bg, 0, 0);
|
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<nbStars; i++) {
|
|
||||||
// let x = p.random(p.windowWidth);
|
|
||||||
// let y = p.random(p.windowHeight);
|
|
||||||
// let d = 1 + p.random(2);
|
|
||||||
// let c = p.random(starCol);
|
|
||||||
// let a = p.random(230);
|
|
||||||
// c.setAlpha(a);
|
|
||||||
// // console.log(c);
|
|
||||||
//
|
|
||||||
// p.stroke(c);
|
|
||||||
// // p.point(x, y);
|
|
||||||
// p.circle(x, y, d);
|
|
||||||
// }
|
|
||||||
time += 1;
|
time += 1;
|
||||||
} //End of draw()
|
} //End of draw()
|
||||||
|
|
||||||
@@ -80,6 +83,103 @@ let sketch = function(p) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
class Mover {
|
||||||
|
// Simulating Forces
|
||||||
|
// The Nature of Code
|
||||||
|
// The Coding Train / Daniel Shiffman
|
||||||
|
// https://youtu.be/Uibl0UE4VH8
|
||||||
|
// https://thecodingtrain.com/learning/nature-of-code/2.1-simulating-forces.html
|
||||||
|
// https://editor.p5js.org/codingtrain/sketches/kYWcOmch
|
||||||
|
constructor() {
|
||||||
|
// this.pos = p.createVector(
|
||||||
|
// p.random(p.round(0.2 * p.width)),
|
||||||
|
// p.random(0, p.round(p.height/2))
|
||||||
|
// );
|
||||||
|
this.pos = p.createVector(0, 0);
|
||||||
|
this.vel = p.createVector(0, 0);
|
||||||
|
this.acc = p.createVector(0, 0);
|
||||||
|
// this.r = 16;
|
||||||
|
this.color = 'white';
|
||||||
|
// this.color.setAlpha(p.random(100,230));
|
||||||
|
this.size;
|
||||||
|
|
||||||
|
this.lifespan = 255;
|
||||||
|
this.burnrate;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.lifespan = 0;
|
||||||
|
this.burnrate = p.random(2, 8);
|
||||||
|
//
|
||||||
|
this.size = p.random(4,7)
|
||||||
|
this.acc.set(0, 0);
|
||||||
|
this.vel.set(0, 0);
|
||||||
|
this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width));
|
||||||
|
this.pos.y = p.random(0, p.round(p.height*0.3));
|
||||||
|
|
||||||
|
let gravity = p.createVector(0, 0.02);
|
||||||
|
this.applyForce(gravity);
|
||||||
|
|
||||||
|
// this.pos = p.createVector(200, 200);
|
||||||
|
|
||||||
|
// this.acc.x = p.random(7, 15) * (1 + p.random(0, 1) * -2);
|
||||||
|
// this.acc.y = p.random(0, 3) - 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
applyForce(force) {
|
||||||
|
this.acc.set(force);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
edges() {
|
||||||
|
if (this.pos.y >= 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() {
|
p.windowResized = function() {
|
||||||
//Redraw only if new size if bigger than previously
|
//Redraw only if new size if bigger than previously
|
||||||
let newWidth = p.windowWidth;
|
let newWidth = p.windowWidth;
|
||||||
@@ -112,24 +212,24 @@ let sketch = function(p) {
|
|||||||
starDensity = 0.01;
|
starDensity = 0.01;
|
||||||
}
|
}
|
||||||
let nb = p.round(starDensity * currentWidth * currentHeight)
|
let nb = p.round(starDensity * currentWidth * currentHeight)
|
||||||
console.log('nbStars: ' + nb);
|
// console.log('nbStars: ' + nb);
|
||||||
return nb;
|
return nb;
|
||||||
}
|
}
|
||||||
|
|
||||||
function hexToRgb(hex) {
|
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 r = (bigint >> 16) & 255;
|
||||||
var g = (bigint >> 8) & 255;
|
var g = (bigint >> 8) & 255;
|
||||||
var b = bigint & 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) {
|
function setGradient(x, y, w, h, c1, c2) {
|
||||||
bg.noFill();
|
bg.noFill();
|
||||||
// Top to bottom gradient
|
// Top to bottom gradient
|
||||||
for (let i = y; i <= y + h; i++) {
|
for (let i = y; i <= y + h; i++) {
|
||||||
let inter = p.pow(p.map(i, y, y + h, 0, 1),6);
|
let inter = p.pow(p.map(i, y, y + h, 0, 1),6);
|
||||||
let c = bg.lerpColor(c1, c2, inter);
|
let c = bg.lerpColor(c1, c2, inter);
|
||||||
|
Reference in New Issue
Block a user