PAINT #1

index.html

<canvas id="screen"></canvas>
<div class="overlay">PAINT #1</div>

paint-1.markdown

PAINT #1

A Pen by Victor Lawrence on CodePen.

License.

script.js

var context = document.getElementById("screen").getContext("2d");

context.globalCompositeOperation = 'xor';

var canvas = context.canvas;

var DROPLET_COUNT = 10;
var DROPLET_TOP = -20;
var DROPLET_THRESHHOLD = 10;
var DROPLET_SPEED = 10;
var DROPLET_GROWTH = 5;
var DROPLET_WANDER = 3;
var DROPLET_LIFESPAN = screen.height / 2;

var droplets = [];

var colors = ["gold"];

function randomX(ctx){
	return Math.floor(Math.random() * ctx.canvas.width)
}

function randomItemFrom(array){
	var index = Math.floor(Math.random() * array.length);
	return array[index];
}

function Droplet(ctx){
	
	var self = this;
	self.draw = draw;
	
	function setup(){
		self.Y = DROPLET_TOP;
		self.X = randomX(ctx);
		self.size = 1;
		self.color = randomItemFrom(colors);
		self.speed = Math.random()
		self.lifespan = DROPLET_LIFESPAN * Math.random();
		self.threshhold = DROPLET_THRESHHOLD * Math.random() + 2;
	}setup();
	
	function draw(){
		if(self.lifespan > 0){
			if(isPastBottom()){
				setup()
			}
			if(self.size > self.threshhold){
				self.size += Math.random() * 0.03;
				self.X += ((Math.random() - 0.5) * DROPLET_WANDER ) * (self.lifespan / DROPLET_LIFESPAN);
				self.Y += DROPLET_SPEED * Math.random()	* self.speed * (self.lifespan / DROPLET_LIFESPAN);
			}else{
				self.size += Math.random() * DROPLET_GROWTH;
			}
			ctx.beginPath();
			ctx.fillStyle = self.color;
			ctx.arc(self.X, self.Y, self.size, 0, Math.PI * 2)
			ctx.fill();
		}else{
			setup();
		}
		self.lifespan --;
	}
	
	function wanderingX(){
		return Math.Random()
	}
	
	function isPastBottom(){
		return self.Y > ctx.canvas.height;
	}
	
}

while(droplets.length < DROPLET_COUNT){
	droplets.push(new Droplet(context))
}

function heartbeat(){
	sizer();
	render();
	requestAnimationFrame(heartbeat);
}
requestAnimationFrame(heartbeat);

function sizer(){
	var d_ratio = window.devicePixelRatio || 1;
	var targetWidth = canvas.clientWidth * d_ratio;
	var targetHeight = canvas.clientHeight * d_ratio;
	if(context.canvas.width !== targetWidth || context.canvas.height !== targetHeight){
		context.canvas.width = targetWidth;
		context.canvas.height = targetHeight;
	}
}

function render(){
	droplets.map(function(drop){
		drop.draw();
	})	
}

style.css

body{
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
}
canvas{
	background: #e7e7e7;
	height: 100%;
	width: 100%;
	display: block;
}
.overlay{
	position: absolute;
	color: black;
	font-size: 5vw;
	background: rgba(255,255,255,.8);
	padding: .2em .3em;
	border-radius: .2em;
}