78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
const fd = {
|
|
width: 150,
|
|
height: 0,
|
|
};
|
|
|
|
fd.height = fd.width * 2;
|
|
|
|
function Flame() {
|
|
this.x = window.innerWidth / 2;
|
|
this.y = (window.innerHeight / 2) - 20;
|
|
this.width = fd.width;
|
|
this.height = fd.height;
|
|
this.resize = function () {
|
|
this.x = window.innerWidth / 2;
|
|
this.y = (window.innerHeight / 2) - 20;
|
|
};
|
|
this.flicker = function () {
|
|
|
|
};
|
|
this.show = function (transValue) {
|
|
fill(249, 168, 37);
|
|
strokeWeight(0);
|
|
// outer flame
|
|
ellipse(this.x, this.y, this.width, this.height * 1.2);
|
|
fill(255, 235, 59);
|
|
// inner flame
|
|
ellipse(this.x, this.y + 10 + (this.height / 6), this.width * 0.66, this.height * 0.8);
|
|
};
|
|
this.overlay = function () {
|
|
fill(255, 2, 59, 0.3);
|
|
ellipse(this.x, this.y, this.width, this.height);
|
|
};
|
|
}
|
|
|
|
function Match() {
|
|
this.x = window.innerWidth / 2;
|
|
this.y = (window.innerHeight / 2) + 18;
|
|
|
|
this.resize = function () {
|
|
this.x = window.innerWidth / 2;
|
|
this.y = (window.innerHeight / 2) + 18;
|
|
};
|
|
this.show = function () {
|
|
const x = this.x;
|
|
const y = this.y;
|
|
fill(93, 64, 55);
|
|
// matchstick
|
|
rect(x - (fd.width / 6), y + 50, fd.width / 3, y + 10, 5);
|
|
// matchhead
|
|
fill(84, 110, 122);
|
|
// base trapezoid
|
|
quad(x - 40, y + 20, x + 40, y + 20, x + 30, y + 100, x - 30, y + 100);
|
|
// round tip
|
|
arc(x, y + 20, 80, 85, 360, 20, OPEN);
|
|
};
|
|
}
|
|
|
|
let flame;
|
|
let match;
|
|
function setup() {
|
|
canvas = createCanvas(window.innerWidth, window.innerHeight);
|
|
flame = new Flame();
|
|
match = new Match();
|
|
}
|
|
|
|
function draw() {
|
|
background(38, 50, 56);
|
|
flame.show();
|
|
match.show();
|
|
}
|
|
|
|
window.onresize = function () {
|
|
const w = window.innerWidth;
|
|
const h = window.innerHeight;
|
|
resizeCanvas(w, h);
|
|
flame.resize();
|
|
match.resize();
|
|
};
|