byreqz/bubble-bg
1
0
Fork 0
mirror of https://github.com/byReqz/bubble-bg.git synced 2024-11-23 06:44:55 +00:00
Code Issues Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Nils 2019-08-13 02:29:26 +02:00 committed by GitHub
parent 097d9ac340
commit 9f4214c56d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/style.css Normal file
View File

@ -0,0 +1,5 @@
body {
box-sizing:border-box;
padding:0;
margin:0;
}

22
index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>bubbles</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js'></script>
<script src="js/index.js"></script>
</body>
</html>

83
js/index.js Normal file
View File

@ -0,0 +1,83 @@
var w = window.innerWidth;
var h = window.innerHeight;
var bubbleArray = [];
var c1,c2;
function Bubble(xloc, yloc, zloc, rise, rad) {
this.xloc = xloc;
this.yloc = yloc;
this.zloc = zloc;
this.rad = rad;
this.rise = rise;
}
function CreateBubbles(howManyBubbles) {
var count = howManyBubbles;
for (i = 0; i < count; i++) {
var x = random(0, w);
var y = random(0, h);
var z = random(0.3, 0.7);
var r = map(z, 0.3, 0.7, 7, 25);
var rise = map(z, 0.3, 0.7, 0.7, 1.7);
var b = new Bubble(x, y, z, rise, r);
bubbleArray.push(b);
}
}
function Show() {
for (i = 0; i < bubbleArray.length; i++) {
var x = bubbleArray[i].xloc;
var y = bubbleArray[i].yloc;
var z = bubbleArray[i].zloc;
var r = bubbleArray[i].rad;
fill(255, 255, 255, z);
ellipse(x, y, r, r);
}
}
function Rise() {
for (i = 0; i < bubbleArray.length; i++) {
var x = bubbleArray[i].rise;
bubbleArray[i].yloc -= x;
var zmin = bubbleArray[i].zloc * -1.5;
var zmax = bubbleArray[i].zloc * 1.5;
var slowy = bubbleArray[i].yloc * .08;
bubbleArray[i].xloc += map(cos(slowy), -1,1,zmin,zmax)
}
}
function Edges() {
for (i = 0; i < bubbleArray.length; i++) {
if (bubbleArray[i].yloc < -10) {
bubbleArray[i].yloc = h + 20;
bubbleArray[i].xloc = random(0,w);
}
}
}
function setGradient(x,y,w,h,c1,c2) {
noFill();
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter-0.35);
stroke(c);
line(x, i, x+w, i);
}
}
function setup() {
createCanvas(w, h);
noStroke();
CreateBubbles(200);
}
function draw() {
c1 = color(60, 195, 120, 1);
c2 = color(0, 100, 130, .2);
colorMode(RGB, 255, 255, 255, 1);
setGradient(0,0,w,h,c1,c2);
Show();
Rise();
Edges();
}