Snow collision

Developer
Wojciech
Size
3,542 Kb
Views
26,312
  1. Snow collision Previews
  2. Snow collision HTML Codes
  3. Snow collision CSS Codes
  4. Snow collision JS Codes

How do I make an snow collision?

What is a snow collision? How do you make a snow collision? This script and codes were developed by Wojciech on 01 September 2022, Thursday.

Snow collision Previews
IQ Test

Snow collision - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snow collision</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="startstop">Start/stop</button>	<div id="snow">	</div> <script src="js/index.js"></script>
</body>
</html>

Snow collision - Script Codes CSS Codes

.sf{ position:absolute; z-index:9999999; /*background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); border-radius:50%; */ display:block; width:20px; height:20px; /* FOR DEV ONLY */ background:#FFF; opacity:1!important;
}
body{ background:#222; overflow:hidden;
}
#snow { position: absolute; width: 100%; height: 100%; overflow: hidden;
}
#startstop{ width:100px; height:30px; border:0; background:rgb(61, 95, 123); color:#FFF; outline:none;
}

Snow collision - Script Codes JS Codes

var flakePositions = [[]];
var temp = 0;
var move = 1;
// snowflake proto
function Snowflake() { this.pos = new Physics(); // snowflake guid this.id = ''; // inits this.MAX_X_START_POS = 250; this.X_START_OFFSET = 200; this.MAX_Y_START_POS = 50; this.Y_START_OFFSET = 50; this.MAX_X_SPEED = 4; this.MAX_Y_SPEED = 1.2; // use to get sin && cos this.animationStepsCounter = 0 this.fallFactor = 10; // snowflake html this.getId = function () { if (this.id == '') { this.id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } return this.id; } this.initalize = function () { temp++; //var size = 5 + Math.random() * 20; var size = 20; this.flakeDOM.innerHTML = temp; this.flakeDOM.style.width = size + "px"; this.flakeDOM.style.height = size + "px"; this.flakeDOM.style.opacity = Math.random(); this.pos.x = (Math.random() * this.MAX_X_START_POS); this.pos.y = this.Y_START_OFFSET+(Math.random() * this.MAX_Y_START_POS); this.pos.xSpeed = Math.random() * this.MAX_X_SPEED* Math.sign(-0.5 + Math.random()); this.pos.ySpeed = Math.random() * this.MAX_Y_SPEED; //create array flakePositions[temp] = []; flakePositions[temp]['id'] = this.id; flakePositions[temp]['x'] = this.flakeDOM.style.top; flakePositions[temp]['y'] = this.flakeDOM.style.left; flakePositions[temp]['radius'] = this.flakeDOM.style.width; flakePositions[temp]['xspeed'] = this.pos.xSpeed; flakePositions[temp]['yspeed'] = this.pos.ySpeed } this.move = function () { //console.log('move nr: ' + move); //console.log('start move'); this.flakeDOM.style.top = (this.pos.y+=this.pos.ySpeed) + "px"; this.flakeDOM.style.left = (this.pos.x += Math.sin(this.animationStepsCounter/this.fallFactor) * this.pos.xSpeed) + "px"; this.animationStepsCounter += this.pos.ySpeed; //update array flakePositions[temp]['x'] = this.flakeDOM.style.top; flakePositions[temp]['y'] = this.flakeDOM.style.left; //check position with rest if(move%2 == 0){ for (var i = 1, len = flakePositions.length; i < len; i++) { var rect1 = flakePositions[i]; var rect1d = rect1['id']; var firstBall_x = parseInt(rect1['x']); var firstBall_y = parseInt(rect1['y']); var firstBall_radius = parseInt(rect1['radius'])/2; var firstBall_Ax = firstBall_x + firstBall_radius; var firstBall_Ay = firstBall_y + firstBall_radius; //console.log('begin outer'); for (var j = 1, len = flakePositions.length; j < len; j++) { if(rect1 !== flakePositions[j]){ //console.log('begin inner'); var rect2 = flakePositions[j]; var rect2d = rect2['id']; var secondBall_x = parseInt(rect2['x']); var secondBall_y = parseInt(rect2['y']); var secondBall_radius = parseInt(rect2['radius'])/2; var secondBall_Ax = secondBall_x + secondBall_radius; var secondBall_Ay = secondBall_y + secondBall_radius; //console.log(rect1d + ': ' + firstBall_Ax + ', ' + firstBall_Ay); //console.log(rect2d + ': ' + secondBall_Ax + ', ' + secondBall_Ay); if (firstBall_x + firstBall_radius + secondBall_radius > secondBall_x && firstBall_x < secondBall_x + firstBall_radius + secondBall_radius && firstBall_y + firstBall_radius + secondBall_radius > secondBall_y && firstBall_y < secondBall_y + firstBall_radius + secondBall_radius) { //console.log('%c AABBs are overlapping', 'color: #FF0000'); distance = Math.sqrt( ((firstBall_x - secondBall_x) * (firstBall_x - secondBall_x)) + ((firstBall_y - secondBall_y) * (firstBall_y - secondBall_y)) ); if (distance < firstBall_radius + secondBall_radius) { console.log('%c balls have collided', 'color: #0000FF'); } } //console.log('end inner'); } } //console.log('end of loop'); } } //console.log('end of move'); //console.log('============='); move++; }
}
function Physics() { // pos this.x = 0; this.y = 0; this.z = 0; // speed this.xSpeed = 0; this.ySpeed = 0; this.zSpeed = 0; // acceleration this.xAccel = 1; this.yAccel = 1; this.zAccel = 1;
}
snowflakes = new Array();
var interval = 0;
function makeThisBoom() { // snowflakes container snowfield = document.getElementById('snow'); // snowflakes count snoflakesCount = 10; for (var i = 0; i < snoflakesCount; i++) { snowflakes[i] = new Snowflake(); var flake = document.createElement('div'); snowflakes[i].flakeDOM = flake; flake.id = snowflakes[i].getId(); flake.classList.add('sf'); snow.appendChild(flake); snowflakes[i].initalize(); snowflakes[i].move(); } interval = setInterval(anime,200);
}
function anime() { for (var flake of snowflakes) { flake.move(); }
}
function setInterface() { document.getElementById('startstop').onclick = function () { if (interval != 0) { clearInterval(interval); interval = 0; } else interval = setInterval(anime, 200); }
}
document.addEventListener("DOMContentLoaded", makeThisBoom);
document.addEventListener("DOMContentLoaded", setInterface);
Snow collision - Script Codes
Snow collision - Script Codes
Home Page Home
Developer Wojciech
Username wojtek1150
Uploaded September 01, 2022
Rating 3
Size 3,542 Kb
Views 26,312
Do you need developer help for Snow collision?

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!

Wojciech (wojtek1150) Script Codes
Name
React Chat App
Social media hovers
Angular advanced table filter
CSS only Transparent tooltip
JQuery toogle boxes
Google maps SVG
Falling snow
Simple eye follower
Get third wednesday
Make Your Own Fingal sign
Create amazing love letters 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!