Fur
How do I make an fur?
Some fun trying to make some hair with the canvas. Runs surprisingly well for how many it's drawing!. What is a fur? How do you make a fur? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.
Fur - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fur</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://codepen.io/darrylhuffman/pen/zogYQW.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fur - Script Codes CSS Codes
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; background-color: #a7e091;
}
html canvas, body canvas { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%;
}
Fur - Script Codes JS Codes
var container = 'body';
var size = { x: $(container).width(), y: $(container).height()
};
var color = [157,208,136];
var resolution_scale = 1;
var bunchSize = 20;
var perlinSpread = 50;
var hairdist = 20;
var exS = 4;
var canvas = $('<canvas/>').attr({width: size.x * resolution_scale, height: size.y * resolution_scale}).appendTo(container), context = canvas.get(0).getContext("2d");
var startTime = new Date().getTime();
var currentTime = 0;
var wind = [];
function initWind(){ for(var x = 0; x <= size.x / bunchSize + exS; x++){ wind.push([]); for(var y = 0; y <= size.y / bunchSize + exS; y++){ wind[x].push([]); } }
}
initWind();
function updateWind(){ for(var x = 0; x <= size.x / bunchSize + exS; x++){ for(var y = 0; y <= size.y / bunchSize + exS; y++){ wind[x][y] = noise.simplex3((currentTime + x) / perlinSpread, (currentTime + y) / perlinSpread, currentTime * 1.25); } }
}
var hairs = [];
var hair = function(position, shape, shade){ this.position = position; this.drawShape = shape; this.shade = shade; this.draw = function(){ var windr = wind[Math.floor(this.position.x/bunchSize)][Math.floor(this.position.y/bunchSize)]; if(!windr){ windr = 0; } context.save(); context.translate((this.position.x - hairdist*2) * resolution_scale, (this.position.y - hairdist*2) * resolution_scale); context.rotate(windr * (Math.PI/2)); this.light = Math.floor(40 * (1 + windr)) + this.shade; this.drawShape(this.light); context.restore(); } this.id = hairs.length; hairs.push(this);
}
window.requestFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
function hairShape(light){ context.fillStyle = 'rgb('+(color[0]+light)+','+(color[1]+light)+','+(color[2]+light)+')'; context.fillRect(0,80 * resolution_scale,2 * resolution_scale,-80 * resolution_scale);
}
for(var x = 0; x < size.x/hairdist + exS; x++){ for(var y = 0; y < size.y/hairdist + exS; y++){ new hair({x: x*hairdist+Math.floor(Math.random() * hairdist), y: y*hairdist+Math.floor(Math.random() * hairdist)}, hairShape, Math.floor(Math.random() * 30)); }
}
function render(){ var now = new Date().getTime(); currentTime = (now - startTime) / 10000; context.clearRect(0,0,size.x * resolution_scale,size.y * resolution_scale); updateWind(); for(var i = 0; i <= hairs.length; i++){ if(hairs[i]){ hairs[i].draw(); } } requestFrame(render);
}
render();
Developer | Darryl Huffman |
Username | darrylhuffman |
Uploaded | January 07, 2023 |
Rating | 4.5 |
Size | 2,938 Kb |
Views | 6,072 |
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 |
Pixelot | 3,080 Kb |
BLACKHOLE - A Canvas Experiment | 3,676 Kb |
Red Oak | 4,332 Kb |
Orbit | 3,173 Kb |
Let it snow, let it snow, code the snow. | 2,884 Kb |
Math | 2,495 Kb |
LightBulb | 2,561 Kb |
Blackhole | 4,946 Kb |
Spilled Galaxy | 2,163 Kb |
A Different Clock | 3,613 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 |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Click handler test | Snapson | 2,329 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!