Spilled Paint v2

Developer
Darryl Huffman
Size
4,275 Kb
Views
4,048
  1. Spilled Paint v2 Previews
  2. Spilled Paint v2 HTML Codes
  3. Spilled Paint v2 CSS Codes
  4. Spilled Paint v2 JS Codes

How do I make an spilled paint v2?

What is a spilled paint v2? How do you make a spilled paint v2? This script and codes were developed by Darryl Huffman on 01 January 2023, Sunday.

Spilled Paint v2 Previews
IQ Test

Spilled Paint v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spilled Paint v2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>	$(document).ready(function(){	var slider = new gooSlider('body');	var l1,l2;	$('body').click(function(){	var c = 'hsla('+ (Math.floor(Math.random()*7) * 50) +',56%,68%,1)';	if(c != l1 && c != l2){	slider.wave(c, function(){});	l2 = l1;	l1 = c;	} else {	$('body').click();	}	});	var count = 5, cur = 0;	function start(){	slider.wave('hsla('+ (Math.floor(Math.random()*7) * 50) +',82%,64%,1)', function(){});	cur++;	if(cur<count){	setTimeout(function(){	start();	}, 1500)	}	}	start();	});
</script>
<div id="info">Click to spill more paint!</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://codepen.io/darrylhuffman/pen/zogYQW.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spilled Paint v2 - Script Codes CSS Codes

html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; overflow: hidden; display: flex;
}
#info { margin: auto; position: relative; z-index: 2; color: #ffffff; font-family: sans-serif; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
canvas { z-index: 1; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
}

Spilled Paint v2 - Script Codes JS Codes

window.requestFrame = (function(){	return window.requestAnimationFrame ||	window.webkitRequestAnimationFrame ||	window.mozRequestAnimationFrame ||	function( callback ){	window.setTimeout(callback, 1000 / 60);	};
})();
var gooSlider = function(parent, id){	var size = {	x: $(parent).width(),	y: $(parent).height()	};	var canvas = $('<canvas/>').attr({width: size.x, height: size.y, id: id}).appendTo(parent), context = canvas.get(0).getContext("2d");	var startTime = new Date().getTime(); // timing stuff	var currentTime = 0; // more timing, it just makes it so it always falls at the same rate	var dripDist = 100; // distance between each "drip"	var dripsAmount = Math.floor(size.x / dripDist) + 2; // amount of drips that will go across screen	waves = []; // this will contain the information for each wave (color, drip positions, etc...)	this.waves = waves; // making the waves variable available to the outside world	noise.seed(Math.random());	this.wave = function(settings, call){ // this creates the wave object. You pass through the color of the "wave" and the callback for when the wave covers the screen.	if(typeof call != 'function') { call = function(){} }	var it = {	drips: [],	callback: call,	defaults: {	color: '#99db81',	minSpeed: 1,	maxSpeed: 3	},	settings: {}	};	if(typeof settings == 'object'){	it.settings = $.extend(true, it.defaults, settings);	} else {	it.settings = $.extend(true, it.defaults, {color: settings});	}	for(var i = 0; i < dripsAmount; i++){	it.drips.push(0);	}	waves.push(it); // add the object to the waves array so it's animated.	}	function loop(){	var now = new Date().getTime();	currentTime = (now - startTime) / 10000; // more timing..	//context.clearRect(0,0,size.x,size.y);	for(var i = 0; i <= waves.length; i++){ // for each wave	if(waves[i] != undefined){ // make sure it's still getting animated	var done = true; // this tells me if we're on the last animation frame for this wave or not	var points = []; // this will contain the points for the wave	for(var c = 0; c < waves[i].drips.length; c++){ // for each drip in the wave	waves[i].drips[c] += waves[i].settings.minSpeed + ((noise.simplex2((i*dripsAmount)+c,currentTime) + 1) * waves[i].settings.maxSpeed); // add the "speed" of that drop to the y position	points.push({ // add this point to be animated	x: dripDist*c,	y: waves[i].drips[c]	});	if(waves[i].drips[c] < size.y){ // if this point is not to the bottom of the screen yet, set done to false. Once all points are below the screen, done will be set to true and the animation for this wave will end and the callback will be... called.	done = false; // ^^	}	}	if(done == true){ // The continuation of the comment above	waves[i].callback(); // callback	waves[i].callback = function(){}; // callback	waves[i-1] = undefined; // stop the waves before this ones animation.	// The reason why I do that ^ instead of setting this one to undefined, is to fix an issue where the previous wave will be undrawn before the current wave reaches the bottom. Which results in random colors flashing at the bottom which is no good.	} else {	context.beginPath(); // this is the animation	context.strokeStyle = waves[i].settings.color; // set the color of the wave	context.fillStyle = waves[i].settings.color; // ^^	context.moveTo(0, 0); // move to the top left	context.lineTo(points[0].x, points[0].y); // draw to the first point	var p = 0;	for (p = 1; p < points.length - 2; p ++){ // loop through almost all of the points, but leave the last 2 alone and we'll code that in by hand	var xc = (points[p].x + points[p + 1].x) / 2; // math for x offset	var yc = ((points[p].y + points[p + 1].y) / 2); // ^^ but for y	context.quadraticCurveTo(points[p].x, points[p].y, xc, yc); // draw the curve to this new point, using the x and y offsets	}	// curve through the last two points	context.quadraticCurveTo(points[p].x, points[p].y, points[p+1].x,points[p+1].y); // draw the last two by hand	context.lineTo(size.x, 0); // draw a line to the top right so the fill works properly	context.stroke();	context.fill();	}	}	}	requestFrame(loop);	}	this.clear = function(){ // this will come in handy for practical uses	waves = [];	context.clearRect(0,0,size.x,size.y);	}	loop(); // start the animation
}
Spilled Paint v2 - Script Codes
Spilled Paint v2 - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 01, 2023
Rating 4.5
Size 4,275 Kb
Views 4,048
Do you need developer help for Spilled Paint v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Darryl Huffman (darrylhuffman) Script Codes
Name
BLACKHOLE - A Canvas Experiment
Let it snow, let it snow, code the snow.
A Different Clock
Simple SVG Charts
Hot Arrrr Balloon.
End of the Rainbow
A Perfect Orbit
Orbit
Spilled Paint
Pixelot
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!