Soft
How do I make an soft?
What is a soft? How do you make a soft? This script and codes were developed by Khalkeus on 11 November 2022, Friday.
Soft - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>soft</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Hit space to regenerate. -->
<canvas id = "canvas"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js'></script>
<script src='https://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script>
<script src='https://cdn.rawgit.com/usefulthink/Javascript-Voronoi/master/rhill-voronoi-core.js'></script> <script src="js/index.js"></script>
</body>
</html>
Soft - Script Codes CSS Codes
body, html{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden;
}
canvas{ width: 100%; height: 100%;
}
Soft - Script Codes JS Codes
var map;
// Utilities
function randomFloatInRange(a, b){ return (Math.random() * (b - a) + a);
}
function randomIntInRange(a, b) { return Math.floor(randomFloatInRange(a, b));
}
function randomFromArray(arr) { return arr[randomIntInRange(0, arr.length)];
}
// Map class
function Map(numPoints, minX, minY, maxX, maxY){ this.voronoi = new Voronoi(); this.diagram; this.time = 0; this.numPoints = numPoints; this.points = []; this.baseColor; this.noiseInfluence; this.boundingBox = { xl: minX, xr: maxX, yt: minY, yb: maxY, }; this.buildVisuals = function () { // Set color controls this.baseColor = [randomFloatInRange(0, .3), randomFloatInRange(0, .3), randomFloatInRange(0, .3)]; this.noiseInfluence = [randomFloatInRange(0, 1), randomFloatInRange(0, 1), randomFloatInRange(0, 1)]; // Build a paper.js polygon for each cell for(var i = 0; i < this.diagram.cells.length; i++){ this.diagram.cells[i].object = new paper.Path(); for(var j = 0; j < this.diagram.cells[i].halfedges.length; j++){ this.diagram.cells[i].object.add(new paper.Point(this.diagram.cells[i].halfedges[j].getStartpoint().x, this.diagram.cells[i].halfedges[j].getStartpoint().y)); } this.diagram.cells[i].object.closed = true; this.diagram.cells[i].object.strokeJoin = 'round'; this.diagram.cells[i].object.fillColor = new paper.Color(this.diagram.cells[i].noiseValue); } } this.init = function(){ // Push random points in the given range this.points = []; for(var i = 0; i < this.numPoints; i++){ this.points.push({ x: randomIntInRange(this.boundingBox.xl, this.boundingBox.xr), y: randomIntInRange(this.boundingBox.yt, this.boundingBox.yb) }); } // Build the actual voronoi diagram this.voronoi = new Voronoi(); this.diagram = this.voronoi.compute(this.points, this.boundingBox); this.buildVisuals(); } this.init(); this.update = function(){ // Recolor each polygon w/ simplex noise for(var i = 0; i < this.diagram.cells.length; i++){ this.diagram.cells[i].noiseValue = (noise.simplex3(this.diagram.cells[i].site.x/window.innerWidth, this.diagram.cells[i].site.y/window.innerHeight, this.time) + 1)/2; this.diagram.cells[i].object.fillColor = new paper.Color( this.baseColor[0] + this.noiseInfluence[0] * this.diagram.cells[i].noiseValue, this.baseColor[1] + this.noiseInfluence[1] * this.diagram.cells[i].noiseValue, this.baseColor[2] + this.noiseInfluence[2] * this.diagram.cells[i].noiseValue); this.diagram.cells[i].object.strokeColor = this.diagram.cells[i].object.fillColor } this.time += .005; } // Build a new diagram + color palette this.reload = function () { paper.project.activeLayer.remove(); new paper.Layer(); this.init(); }
}
// Initial setup
window.onload = function () { var canvas = document.getElementById('canvas'); paper.setup(canvas); paper.resize = "true"; map = new Map(500, -100, -100, canvas.width + 100, canvas.height + 100); map.buildVisuals(); update();
}
// Make a new diagram on space
window.onkeydown = function (e) { if(e.keyCode === 32){ map.reload(); }
}
// Update colors
function update() { map.update(); requestAnimationFrame(update);
}
![Soft - Script Codes](http://shots.codepen.io/khalkeus/pen/VWPeaR-512.jpg)
Developer | Khalkeus |
Username | khalkeus |
Uploaded | November 11, 2022 |
Rating | 3 |
Size | 2,727 Kb |
Views | 16,192 |
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!
Name | Size |
Random walkers | 2,512 Kb |
Binary clock | 2,039 Kb |
Waves | 4,380 Kb |
Planet Generator | 2,984 Kb |
Metaballs | 2,277 Kb |
City generator | 2,750 Kb |
Css loaders ii | 2,294 Kb |
Flowers | 2,588 Kb |
Live pixel sorting | 2,314 Kb |
Particle fire | 3,152 Kb |
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!
Name | Username | Size |
Slider | Mohammed-fawzy | 2,634 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!