TacoWolf/gallery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add initial flame project

Browse source
This commit is contained in:
Daniel Gallegos 2017-03-30 00:45:13 -05:00
parent 01a9db8da1
commit a35c251d3d
3 changed files with 98 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
flame/flame.js Normal file
View file

@ -0,0 +1,78 @@
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();
};

19
flame/index.html Normal file
View file

@ -0,0 +1,19 @@
<html>
<head>
<title>flame | gallery@TacoWolf</title>
<meta name="title" content="flame | gallery@TacoWolf">
<meta name="description" content="a digital art gallery, brought to you by tacowolf">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta property="og:url" content="https://tacowolf.net/gallery/rain"/>
<meta property="og:title" content="rain"/>
<meta property="og:site_name" content="gallery@TacoWolf"/>
<meta property="og:description" content="a digital art gallery, brought to you by tacowolf"/>
<meta property="og:image" content="http://i.imgur.com/mz7k3h8.png"/>
<link rel="shortcut icon" type="image/x-icon" href="https://tacowolf.net/favicon.ico">
<link rel="stylesheet" href="../main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="flame.js"></script>
</head>
<body>
</body>
</html>

2
rain/index.html
View file

@ -8,7 +8,7 @@
<meta property="og:title" content="rain"/> <meta property="og:title" content="rain"/>
<meta property="og:site_name" content="gallery@TacoWolf"/> <meta property="og:site_name" content="gallery@TacoWolf"/>
<meta property="og:description" content="a digital art gallery, brought to you by tacowolf"/> <meta property="og:description" content="a digital art gallery, brought to you by tacowolf"/>
<meta property="og:image" content="https://i.imgur.com/aqh0JKq.png"/> <meta property="og:image" content="http://i.imgur.com/GI3sBtu.png"/>
<link rel="shortcut icon" type="image/x-icon" href="https://tacowolf.net/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="https://tacowolf.net/favicon.ico">
<link rel="stylesheet" href="../main.css"> <link rel="stylesheet" href="../main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>