Explosive Shapes (Draw and release)

Developer
Darryl Huffman
Size
3,893 Kb
Views
6,072
  1. Explosive Shapes (Draw and release) Previews
  2. Explosive Shapes (Draw and release) HTML Codes
  3. Explosive Shapes (Draw and release) CSS Codes
  4. Explosive Shapes (Draw and release) JS Codes

How do I make an explosive shapes (draw and release)?

What is a explosive shapes (draw and release)? How do you make a explosive shapes (draw and release)? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

Explosive Shapes (Draw and release) Previews
IQ Test

Explosive Shapes (Draw and release) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Explosive Shapes (Draw and release) </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="start"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Explosive Shapes (Draw and release) - Script Codes CSS Codes

body, html { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px;
}
#start { cursor: crosshair; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: #2979FF;
}

Explosive Shapes (Draw and release) - Script Codes JS Codes

var requestframe = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || // IE Fallback, you can even fallback to onscroll function (callback) { window.setTimeout(callback, 1000 / 60); };
$('#start').ready(function(){	var drawable = false;	setTimeout(function(){	drawable = false;	drawlines([["drag", 80,70],["drag", 80,90],["drag", 75,82.5],["drag", 85,82.5],["drag", 80,90],[],[],[],[],[],["click", 80,90]]);	}, 8000);	var introArray = [	[["drag", 10,50],["drag", 20,70],["drag", 30,60],["drag", 40,80],["drag", 50,70],["drag", 60,40],["drag", 70,50],["drag", 80,30],["drag", 90,50],[],[],[],[],[],["click", 90,50]],	[["drag", 30,40],[],["drag", 40,60],[],["drag", 70,20],[],[],[],[],[],["click", 70,20]],	[["drag", 35,70],[],["drag", 50,10],[],["drag", 65,70],[],["drag", 30,30],[],["drag", 70,30],[],["drag", 35,70],[],[],[],[],[],["click", 35,70]],	[["drag", 50,35],["drag", 60,20],["drag", 70,35],["drag", 50,65],["drag", 30,35],["drag", 40,20],["drag", 50,35],[],[],[],[],[],["click", 50,35]]	];	var whichDesign = Math.floor((Math.random() * introArray.length) + 0);	$('#start').on('mouseup',function(e){	mousecout = 0;	draggable = false;	setTimeout(function(){	draggable = false;	}, 100);	});	$('#start').on('click tap',function(e){	new point({	x: e.pageX,	y: e.pageY	});	});	// Contexts	var canvas = $('<canvas/>')[0];	canvas.height = $('#start').height();	canvas.width = $('#start').width();	var context = canvas.getContext('2d');	$('#start').append(canvas);	// Timing Variables	var startTime = new Date().getTime();	var currentTime = 0;	var lineArray = [];	$('#start').on("mousedown", function(l) {	if(drawable == true){	var count = 0;	new line({x: l.pageX, y: l.pageY});	var log = function(e){	if(drawable == true){	count++;	if(count%5 == true){	new pointSM({	x: e.pageX,	y: e.pageY	});	lineArray.push([e.pageX,e.pageY]);	}	} else {	lineArray = [];	lines = [];	}	};	$(document).on("mousemove", log).one("mouseup", function(){	$(document).off("mousemove", log);	for(var i = 0; i < lineArray.length; i++){	new pointSM({	x: lineArray[i][0],	y: lineArray[i][1]	});	}	lineArray = [];	lines = [];	});	}	});	// Particles	var particles = [], points = [], lines = [];	var particle = function(coords){	this.startTime = new Date().getTime();	this.byTime = (this.startTime/1000) - (startTime/1000);	this.sides = Math.floor((Math.random() * 6) + 3);	this.radius = Math.floor((Math.random() * 18) + 8);	this.lineWidth = (Math.random() * 4) + 2;	this.startPosition = coords;	this.direction = {	x: (Math.floor((Math.random() * 500) + 300)) - 500,	y: (Math.floor((Math.random() * 500) + 300)) - 500	};	this.id = particles.length;	particles.push(this);	};	particle.prototype.draw = function(){	this.x = this.startPosition.x + (this.direction.x * (currentTime-this.byTime));	this.y = this.startPosition.y + (this.direction.y * (currentTime-this.byTime));	if(this.x > canvas.width + 100 || this.x < -100) {	delete particles[this.id];	}	if(this.y > canvas.height + 100 || this.y < -100) {	delete particles[this.id];	}	context.save();	// Map the first vertice to start with	var xPos;	var yPos;	context.moveTo(this.x,this.y);	context.beginPath();	// Loop through the vertices and map the lines	for (i = 0; i <= this.sides; i++) {	// Determine the coordinates of the next vertex	xPos = this.x + this.radius * Math.cos(2 * Math.PI * i / this.sides);	yPos = this.y + this.radius * Math.sin(2 * Math.PI * i / this.sides);	// Set line to the next vertex	context.lineTo(xPos,yPos);	}	context.strokeStyle = '#FFFFFF';	//context.strokeStyle = '#FFFFFF';	context.lineWidth = this.lineWidth;	context.lineJoin = 'round';	context.stroke();	//context.fill();	context.moveTo(0,0);	context.closePath();	context.restore();	}	var point = function(coords){	this.position = coords;	this.radius = 30;	this.scale = 1;	this.startTime = new Date().getTime();	this.byTime = (this.startTime/1000) - (startTime/1000);	for(i = 0; i < 6; i++){	new particle(coords);	}	points.push(this);	};	point.prototype.draw = function(){	this.scale = this.radius + ((currentTime-this.byTime) * 70);	context.beginPath();	context.arc(this.position.x,this.position.y,this.scale,0,2*Math.PI);	context.fillStyle = 'rgba(0,0,0,'+ (0.25 - ((currentTime-this.byTime) / 2)) +')';	context.fill();	context.closePath();	}	var pointSM = function(coords){	this.position = coords;	for(i = 0; i < 2; i++){	new particle(coords);	}	};	var line = function(coords){	this.position = coords;	lines.push(this);	}	line.prototype.draw = function(){	context.beginPath();	for(var i = 0; i < lineArray.length; i++){	if(i != undefined){	context.lineTo(lineArray[i][0],lineArray[i][1]);	}	}	context.strokeStyle = '#EEEEEE';	context.lineWidth = 4;	context.lineJoin = 'round';	context.stroke();	context.moveTo(0,0);	context.closePath();	}	function frameIt(){	context.clearRect(0, 0, canvas.width, canvas.height);	for (var i = 0; i < points.length; i++) {	if(points[i] != undefined){	points[i].draw();	}	}	for (var i = 0; i < particles.length; i++) {	if(particles[i] != undefined){	particles[i].draw();	}	}	for (var i = 0; i < lines.length; i++) {	if(lines[i] != undefined){	lines[i].draw();	}	}	}	function loop(){	var now = new Date().getTime();	currentTime = (now - startTime) / 1000;	frameIt();	requestframe(loop);	}	function init(){	frameIt();	loop();	}	init();	drawlines(introArray[whichDesign]);	function drawlines(theArray){	(function myLoop (i) {	new line();	setTimeout(function () {	l = theArray.length - i;	if(theArray[l][0] == 'drag'){	new pointSM({	x: canvas.width * (theArray[l][1] / 100),	y: canvas.height * (theArray[l][2] / 100)	});	lineArray.push([canvas.width * (theArray[l][1] / 100),canvas.height * (theArray[l][2] / 100)]);	} else if (theArray[l][0] == 'click'){	new point({	x: canvas.width * (theArray[l][1] / 100),	y: canvas.height * (theArray[l][2] / 100)	});	for(var x = 0; x < lineArray.length; x++){	new pointSM({	x: lineArray[x][0],	y: lineArray[x][1]	});	}	lineArray = [];	drawable = true;	}	if (--i) myLoop(i);	}, 50)	})(theArray.length);	}
});
Explosive Shapes (Draw and release) - Script Codes
Explosive Shapes (Draw and release) - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4.5
Size 3,893 Kb
Views 6,072
Do you need developer help for Explosive Shapes (Draw and release)?

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
End of the Rainbow
Spilled Galaxy
Spilled Paint
Fur
Blackhole
Spilled Paint v2
A Perfect Orbit
Red Oak
LightBulb
A Different Clock
Create amazing sales emails 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!