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 |
Character generator | 4,840 Kb |
Rasterization | 3,615 Kb |
Soft | 2,727 Kb |
Waves | 4,380 Kb |
Planet Generator | 2,984 Kb |
Color Name Game | 3,245 Kb |
Boids ii | 3,358 Kb |
Particle smoke | 2,887 Kb |
Live pixel sorting | 2,314 Kb |
Fish pond | 3,799 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 |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Header | Er40 | 1,542 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 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!