Compare commits
10 commits
2860e52aba
...
097ab47a26
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
097ab47a26 | ||
|
|
21a6e0720f | ||
|
|
a12ef20c1e | ||
|
|
5a037fae57 | ||
|
|
81cbc99a35 | ||
| e51556fd33 | |||
| 6a8377a761 | |||
| a35c251d3d | |||
| 01a9db8da1 | |||
| 4b9aec6611 |
7 changed files with 157 additions and 11 deletions
1
CNAME
Normal file
1
CNAME
Normal file
|
|
@ -0,0 +1 @@
|
|||
gallery.tacowolf.net
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 Daniel Gallegos
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
78
flame/flame.js
Normal file
78
flame/flame.js
Normal 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
19
flame/index.html
Normal 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="flame"/>
|
||||
<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>
|
||||
4
main.css
Normal file
4
main.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
<html>
|
||||
<head>
|
||||
<style> body{padding:0; margin:0;} </style>
|
||||
<title>rain | gallery@TacoWolf</title>
|
||||
<meta name="title" content="rain | 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/GI3sBtu.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="rain.js"></script>
|
||||
</head>
|
||||
|
|
|
|||
33
rain/rain.js
33
rain/rain.js
|
|
@ -2,33 +2,46 @@ function Drop() {
|
|||
this.x = random(displayWidth);
|
||||
this.y = -random(displayHeight);
|
||||
this.z = random(5, 15);
|
||||
this.length = random(4, 15);
|
||||
this.yspeed = map(this.z, 0, 20, 1, 20);
|
||||
this.gravity = 1;
|
||||
this.fall = function () {
|
||||
this.y += this.yspeed;
|
||||
this.y = this.y + this.yspeed;
|
||||
const grav = map(this.z, 0, 20, 0, 0.4);
|
||||
this.yspeed = this.yspeed + grav;
|
||||
|
||||
if (this.y > displayHeight) {
|
||||
this.y = -random(displayHeight);
|
||||
this.yspeed = 0;
|
||||
}
|
||||
};
|
||||
|
||||
this.show = function () {
|
||||
if (this.y > displayHeight) {
|
||||
this.y = -random(20);
|
||||
}
|
||||
strokeWeight(this.z / 4);
|
||||
stroke(62, 95, 163);
|
||||
line(this.x, this.y, this.x, this.y + 10);
|
||||
switch (round(random(50))) {
|
||||
case 48:
|
||||
stroke(177, 191, 218);
|
||||
break;
|
||||
case 49:
|
||||
stroke(235, 239, 245);
|
||||
break;
|
||||
default:
|
||||
stroke(62, 95, 163);
|
||||
}
|
||||
line(this.x, this.y, this.x, this.y + this.length);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const drops = [];
|
||||
let canvas;
|
||||
|
||||
function setup() {
|
||||
canvas = createCanvas(window.innerWidth, window.innerHeight);
|
||||
for (let i = 0; i < random(500, 1000); i += 1) {
|
||||
for (let i = 0; i < random(1000, 1500); i += 1) {
|
||||
drops[i] = new Drop();
|
||||
}
|
||||
}
|
||||
function draw() {
|
||||
background(29, 31, 35);
|
||||
background(12, 12, 12);
|
||||
for (let i = 0; i < drops.length; i += 1) {
|
||||
drops[i].fall();
|
||||
drops[i].show();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue