Particle Earth Map

Developer
B.
Size
5,106 Kb
Views
30,360
  1. Particle Earth Map Previews
  2. Particle Earth Map HTML Codes
  3. Particle Earth Map CSS Codes
  4. Particle Earth Map JS Codes

How do I make an particle earth map?

What is a particle earth map? How do you make a particle earth map? This script and codes were developed by B. on 21 December 2022, Wednesday.

Particle Earth Map Previews
IQ Test

Particle Earth Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Particle Earth Map</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; padding: 0; overflow: hidden; background-color: #080808;
}
.map-canvas { text-align: center;
}
.map-canvas img { display: none;
}
.no-canvas .map-canvas img { display: inline-block; max-width: 100%; height: auto;
}
#canvas-map { max-width: 100%; margin: 0 auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="js-map-canvas" class="map-canvas"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16721/map-canvas-fallback.png">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Particle Earth Map - Script Codes CSS Codes

body { margin: 0; padding: 0; overflow: hidden; background-color: #080808;
}
.map-canvas { text-align: center;
}
.map-canvas img { display: none;
}
.no-canvas .map-canvas img { display: inline-block; max-width: 100%; height: auto;
}
#canvas-map { max-width: 100%; margin: 0 auto;
}

Particle Earth Map - Script Codes JS Codes

var jsonMap = [{"cx":102,"cy":252},{"cx":335,"cy":243},{"cx":595,"cy":209},{"cx":452,"cy":617},{"cx":487,"cy":593},{"cx":440,"cy":564},{"cx":516,"cy":544},{"cx":428,"cy":524},{"cx":388,"cy":341},{"cx":344,"cy":329},{"cx":419,"cy":296},{"cx":335,"cy":371},{"cx":274,"cy":360},{"cx":261,"cy":320},{"cx":329,"cy":296},{"cx":271,"cy":284},{"cx":302,"cy":224},{"cx":399,"cy":273},{"cx":385,"cy":305},{"cx":368,"cy":281},{"cx":344,"cy":270},{"cx":362,"cy":206},{"cx":319,"cy":187},{"cx":274,"cy":184},{"cx":223,"cy":249},{"cx":258,"cy":229},{"cx":223,"cy":204},{"cx":170,"cy":215},{"cx":135,"cy":192},{"cx":71,"cy":175},{"cx":89,"cy":195},{"cx":71,"cy":209},{"cx":89,"cy":221},{"cx":80,"cy":243},{"cx":77,"cy":284},{"cx":114,"cy":264},{"cx":149,"cy":246},{"cx":181,"cy":261},{"cx":206,"cy":293},{"cx":226,"cy":329},{"cx":229,"cy":374},{"cx":261,"cy":400},{"cx":293,"cy":442},{"cx":382,"cy":538},{"cx":392,"cy":567},{"cx":422,"cy":596},{"cx":416,"cy":648},{"cx":405,"cy":699},{"cx":401,"cy":738},{"cx":446,"cy":769},{"cx":428,"cy":755},{"cx":428,"cy":735},{"cx":431,"cy":710},{"cx":452,"cy":676},{"cx":464,"cy":654},{"cx":481,"cy":657},{"cx":500,"cy":635},{"cx":500,"cy":617},{"cx":524,"cy":607},{"cx":538,"cy":570},{"cx":561,"cy":538},{"cx":494,"cy":518},{"cx":458,"cy":494},{"cx":419,"cy":479},{"cx":398,"cy":497},{"cx":376,"cy":485},{"cx":356,"cy":464},{"cx":362,"cy":442},{"cx":335,"cy":451},{"cx":319,"cy":430},{"cx":332,"cy":409},{"cx":362,"cy":403},{"cx":385,"cy":427},{"cx":379,"cy":400},{"cx":402,"cy":383},{"cx":419,"cy":357},{"cx":452,"cy":335},{"cx":431,"cy":320},{"cx":475,"cy":299},{"cx":455,"cy":254},{"cx":428,"cy":261},{"cx":395,"cy":235},{"cx":408,"cy":200},{"cx":440,"cy":201},{"cx":379,"cy":164},{"cx":425,"cy":161},{"cx":353,"cy":178},{"cx":299,"cy":128},{"cx":277,"cy":148},{"cx":322,"cy":148},{"cx":232,"cy":164},{"cx":164,"cy":164},{"cx":108,"cy":148},{"cx":720,"cy":264},{"cx":802,"cy":593},{"cx":769,"cy":448},{"cx":1319,"cy":243},{"cx":1316,"cy":212},{"cx":1330,"cy":198},{"cx":1359,"cy":215},{"cx":1368,"cy":198},{"cx":1327,"cy":164},{"cx":1297,"cy":173},{"cx":1262,"cy":161},{"cx":1233,"cy":151},{"cx":1197,"cy":131},{"cx":1191,"cy":145},{"cx":1155,"cy":151},{"cx":1146,"cy":125},{"cx":1104,"cy":128},{"cx":1057,"cy":131},{"cx":1093,"cy":96},{"cx":1071,"cy":75},{"cx":1022,"cy":85},{"cx":998,"cy":115},{"cx":973,"cy":118},{"cx":979,"cy":158},{"cx":949,"cy":178},{"cx":933,"cy":128},{"cx":902,"cy":164},{"cx":796,"cy":558},{"cx":756,"cy":617},{"cx":756,"cy":548},{"cx":785,"cy":512},{"cx":762,"cy":485},{"cx":723,"cy":470},{"cx":735,"cy":436},{"cx":692,"cy":454},{"cx":664,"cy":433},{"cx":660,"cy":397},{"cx":685,"cy":392},{"cx":708,"cy":383},{"cx":720,"cy":400},{"cx":756,"cy":397},{"cx":785,"cy":405},{"cx":802,"cy":424},{"cx":815,"cy":457},{"cx":833,"cy":485},{"cx":865,"cy":482},{"cx":849,"cy":512},{"cx":822,"cy":541},{"cx":874,"cy":604},{"cx":855,"cy":617},{"cx":871,"cy":582},{"cx":822,"cy":576},{"cx":805,"cy":610},{"cx":796,"cy":632},{"cx":772,"cy":657},{"cx":746,"cy":657},{"cx":732,"cy":625},{"cx":720,"cy":590},{"cx":729,"cy":561},{"cx":711,"cy":530},{"cx":711,"cy":506},{"cx":692,"cy":500},{"cx":651,"cy":506},{"cx":623,"cy":497},{"cx":617,"cy":464},{"cx":617,"cy":442},{"cx":632,"cy":415},{"cx":743,"cy":290},{"cx":772,"cy":261},{"cx":788,"cy":240},{"cx":737,"cy":227},{"cx":762,"cy":201},{"cx":865,"cy":178},{"cx":812,"cy":218},{"cx":796,"cy":189},{"cx":830,"cy":187},{"cx":799,"cy":167},{"cx":772,"cy":148},{"cx":740,"cy":170},{"cx":720,"cy":209},{"cx":695,"cy":232},{"cx":836,"cy":273},{"cx":723,"cy":338},{"cx":737,"cy":371},{"cx":711,"cy":344},{"cx":692,"cy":350},{"cx":676,"cy":374},{"cx":660,"cy":377},{"cx":645,"cy":374},{"cx":645,"cy":347},{"cx":673,"cy":347},{"cx":676,"cy":332},{"cx":667,"cy":323},{"cx":705,"cy":296},{"cx":657,"cy":305},{"cx":676,"cy":288},{"cx":667,"cy":260},{"cx":629,"cy":290},{"cx":635,"cy":276},{"cx":521,"cy":137},{"cx":521,"cy":167},{"cx":580,"cy":134},{"cx":583,"cy":158},{"cx":546,"cy":184},{"cx":521,"cy":212},{"cx":513,"cy":246},{"cx":490,"cy":215},{"cx":487,"cy":178},{"cx":478,"cy":145},{"cx":614,"cy":215},{"cx":620,"cy":195},{"cx":917,"cy":427},{"cx":943,"cy":439},{"cx":937,"cy":476},{"cx":958,"cy":506},{"cx":979,"cy":473},{"cx":995,"cy":442},{"cx":1016,"cy":442},{"cx":1046,"cy":473},{"cx":1063,"cy":488},{"cx":1078,"cy":476},{"cx":1060,"cy":454},{"cx":1081,"cy":442},{"cx":1113,"cy":424},{"cx":1110,"cy":394},{"cx":1107,"cy":371},{"cx":1121,"cy":360},{"cx":1140,"cy":383},{"cx":1143,"cy":363},{"cx":1179,"cy":400},{"cx":1206,"cy":389},{"cx":1221,"cy":357},{"cx":1161,"cy":347},{"cx":1188,"cy":317},{"cx":1170,"cy":281},{"cx":1203,"cy":252},{"cx":1250,"cy":237},{"cx":1244,"cy":289},{"cx":1262,"cy":293},{"cx":1280,"cy":249},{"cx":1224,"cy":670},{"cx":1200,"cy":676},{"cx":1173,"cy":660},{"cx":1158,"cy":641},{"cx":1130,"cy":651},{"cx":1096,"cy":654},{"cx":1093,"cy":632},{"cx":1093,"cy":604},{"cx":1124,"cy":587},{"cx":1149,"cy":579},{"cx":1155,"cy":564},{"cx":1176,"cy":567},{"cx":1170,"cy":579},{"cx":1191,"cy":590},{"cx":1197,"cy":564},{"cx":1075,"cy":535},{"cx":1113,"cy":554},{"cx":1063,"cy":544},{"cx":1030,"cy":506},{"cx":815,"cy":415},{"cx":836,"cy":451},{"cx":868,"cy":461},{"cx":892,"cy":448},{"cx":865,"cy":433},{"cx":855,"cy":406},{"cx":1253,"cy":186},{"cx":1179,"cy":181},{"cx":1099,"cy":175},{"cx":1019,"cy":170},{"cx":976,"cy":218},{"cx":880,"cy":224},{"cx":836,"cy":235},{"cx":830,"cy":348},{"cx":1033,"cy":347},{"cx":1054,"cy":402},{"cx":961,"cy":412},{"cx":899,"cy":380},{"cx":794,"cy":299},{"cx":812,"cy":389},{"cx":791,"cy":374},{"cx":775,"cy":354},{"cx":759,"cy":377},{"cx":750,"cy":350},{"cx":756,"cy":320},{"cx":717,"cy":314},{"cx":1309,"cy":702},{"cx":1306,"cy":688},{"cx":1283,"cy":710},{"cx":1333,"cy":676},{"cx":1218,"cy":599},{"cx":1241,"cy":620},{"cx":1233,"cy":648},{"cx":1203,"cy":635},{"cx":1167,"cy":610},{"cx":1127,"cy":622},{"cx":992,"cy":371},{"cx":839,"cy":320},{"cx":1143,"cy":311},{"cx":943,"cy":366},{"cx":1004,"cy":287},{"cx":874,"cy":299},{"cx":880,"cy":335},{"cx":905,"cy":299},{"cx":1093,"cy":302},{"cx":940,"cy":284},{"cx":1063,"cy":224},{"cx":1133,"cy":246},{"cx":1188,"cy":227},{"cx":1218,"cy":206},{"cx":665,"cy":476},{"cx":749,"cy":521},{"cx":908,"cy":254},{"cx":930,"cy":224},{"cx":1133,"cy":203},{"cx":1027,"cy":257},{"cx":1043,"cy":302},{"cx":1084,"cy":264},{"cx":1057,"cy":183},{"cx":947,"cy":338},{"cx":970,"cy":308},{"cx":984,"cy":258},{"cx":1007,"cy":228},{"cx":1043,"cy":375},{"cx":1066,"cy":345}];
/* ---- PARAMS ---- */
var numberParticlesStart = jsonMap.length, distanceLinkMax = 70, linkMax = 8, particleSize = 1, particleZone = 11, particleSpeed = 0.04, velocity = 2.5, x = 0, y = 0, particleFillColor = '#fff', particleStrokeColor = '#fff', particleLinkColor = '#fff', showZone = false;
/* ---- INIT ---- */
var particles = [];
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.id="canvas-map"; // ratio 16:9
canvas.width = 1440;
canvas.height = 810;
var container = document.getElementById('js-map-canvas');
if (container !== null) container.appendChild(canvas);
/* ---- CLASS ---- */
function Particle (x, y) { this.x = this.centerX = x; this.y = this.centerY = y; this.velX = _.random(-velocity, velocity); this.velY = _.random(-velocity, velocity); this.nbrOfLinks = 0; this.particles; //receive the table of particles
}
Particle.prototype.render = function() { context.beginPath(); context.fillStyle = particleFillColor; context.strokeStyle = particleStrokeColor; context.lineWidth = 0.25; context.arc(this.x,this.y,particleSize*2,0,Math.PI*2); context.fill(); context.stroke();
};
Particle.prototype.renderZone = function(){ context.beginPath(); context.fillStyle = "#ff0000"; context.arc(this.centerX,this.centerY,particleSize/5,0,Math.PI*2); context.fill(); context.beginPath(); context.strokeStyle = "#ff0000"; context.arc(this.centerX,this.centerY,particleZone,0,Math.PI*2); context.stroke();
}
Particle.prototype.update = function(){ var posRelativeToCenter = { x : this.x - this.centerX, y : this.y - this.centerY }; var distance = Math.sqrt( Math.pow(posRelativeToCenter.x,2) + Math.pow(posRelativeToCenter.y,2) ); if(distance > particleZone){ var force = (particleZone - distance) / particleZone; var forceDirection = { x : (posRelativeToCenter.x / distance) * force, y : (posRelativeToCenter.y / distance) * force }; this.velX += forceDirection.x; this.velY += forceDirection.y; } this.x += this.velX*particleSpeed; this.y += this.velY*particleSpeed; this.nbrOfLinks = 0;
}
Particle.prototype.renderLinks = function(particles) { var that = this; _.each(particles, function(p){ var distance = Math.sqrt( Math.pow(that.x - p.x, 2) + Math.pow(that.y - p.y, 2)); if(that.nbrOfLinks > linkMax) return; if(distance < distanceLinkMax && that.nbrOfLinks < linkMax && p.nbrOfLinks < linkMax){ context.beginPath(); context.moveTo(p.x, p.y); context.lineTo(that.x, that.y); context.strokeStyle = particleLinkColor; context.stroke(); that.nbrOfLinks++; p.addLink(); } });
}
Particle.prototype.addLink = function(){ this.nbrOfLinks++;
}
/* ---- Functions ----*/
function loop(){ context.clearRect(0,0, canvas.width, canvas.height); _.chain(particles).each(function(p, index){ p.update(); }); _.chain(particles).each(function(p, index){ p.renderLinks(_.without(particles, p) ); }); _.chain(particles).each(function(p, index){ p.render(); if(showZone){ p.renderZone(); } }); requestAnimationFrame(loop);
}
/* ---- START ---- */
for (var i = 0; i < numberParticlesStart; i++) { var x = jsonMap[i].cx, y = jsonMap[i].cy; particles.push(new Particle( x, y ));
}
loop();
Particle Earth Map - Script Codes
Particle Earth Map - Script Codes
Home Page Home
Developer B.
Username wearebold
Uploaded December 21, 2022
Rating 3.5
Size 5,106 Kb
Views 30,360
Do you need developer help for Particle Earth Map?

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!

B. (wearebold) Script Codes
Name
Simple Accordion
Slick Slider
Simple Preloader
Polaroid
Slide Content Module
Alerts
Slick Slider with Vimeo API - froogaloop
A Pen by B.
Plane, Goodbye
Snap.svg Mask faces
Create amazing marketing copy 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!