Dotskin
How do I make an dotskin?
Trying radial gradients on canvas for pastel dots. What is a dotskin? How do you make a dotskin? This script and codes were developed by Kittons on 09 September 2022, Friday.
Dotskin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dotskin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="dots" width="500" height="300" style="width:100%;height:100%"></canvas> <script src="js/index.js"></script>
</body>
</html>
Dotskin - Script Codes CSS Codes
body{ background-color: black;
}
Dotskin - Script Codes JS Codes
var dotSize = 14; var radius = 7; var divisions = 200; var squareSize = 7; var easingValues = [.5,1,0,1]; var colors = ['#1b85b8','#5a5255','#559e83','#ae5a41','#c3cb71','#ffd2c0','#b6f2ec','#fff5b0','#edd6b4','#ffa1a1','#ffd8bb','#8a96d6','#ffeb97','#9edda4']; var colorsRGB = [[27,133,184],[90,82,85],[85,158,131],[174,90,65],[195,203,113],[255,210,192],[182,242,236],[255,245,176],[237,214,180],[255,161,161],[255,216,187],[138,150,214],[255,235,151],[158,221,164]]; var cv = document.getElementById('dots'); cv.width = window.innerWidth; cv.height = window.innerHeight; var cvWidth = cv.width/2; var cvHeight = cv.height/2; var ctx = cv.getContext('2d'); var gridX, gridY, lastGridElem; function getMousePosition(e) { handleMouseMove(e.pageX,e.pageY); } function getTouchPosition(e) { handleMouseMove(e.targetTouches[0].e,targetTouches[0].pageY); } function handleMouseMove(x,y){ gridX = x-x%dotSize; gridY = y-y%dotSize; lastGridElem = gridX+'_'+gridY; if(!gridElements[lastGridElem]){ gridElements[lastGridElem] = new GridElem(gridX,gridY); } var initI,initJ, centerI,centerJ; centerI = Math.floor(gridX/dotSize); centerJ = Math.floor(gridY/dotSize); initI = centerI - squareSize; initJ = centerJ - squareSize; /*ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(initI*dotSize,initJ*dotSize,dotSize*(squareSize*2+1),dotSize*(squareSize*2+1));*/ ctx.clearRect(initI*dotSize,initJ*dotSize,dotSize*(squareSize*2+1),dotSize*(squareSize*2+1)); var endI = initI + squareSize*2; var endJ = initJ + squareSize*2; var gridNextX,gridNextY, gridNextName; var i, j,distance; for(i=initI;i<=endI;i+=1){ for(j=initJ;j<=endJ;j+=1){ distance = (squareSize-(Math.abs(i-centerI)+Math.abs(j-centerJ))/2)*1.5; gridNextX = i*dotSize; gridNextY = j*dotSize; gridNextName = gridNextX+'_'+gridNextY; if(!gridElements[gridNextName]){ if(!distance){ continue; } gridElements[gridNextName] = new GridElem(i*dotSize,j*dotSize); } gridElements[gridNextName].increment(distance); } } } var gridElements = {}; var GridElem = (function(){ var constructor = function(x,y){ this.currentState = 0; this.colorNum = Math.floor(Math.random()*colors.length); this.x = x+dotSize/2; this.y = y+dotSize/2; this.name = x+'_'+y; this.stateDir = 1; this.stopColor1 = 'rgba('+colorsRGB[this.colorNum][0]+','+colorsRGB[this.colorNum][1]+','+colorsRGB[this.colorNum][2]+',' + (.6)+')'; this.stopColor2 = 'rgba(0,0,0,1)'; }; constructor.prototype.increment = function(val){ if(this.stateDir == 1){ this.currentState += val; }else{ this.currentState -= val; } if(this.currentState < 0){ this.stateDir = 1; this.currentState = 0; }else if(this.currentState >= divisions){ this.stateDir = -1; this.currentState = divisions - 1; } ctx.beginPath(); var xDir, yDir, perc = this.currentState/divisions; xDir = this.x-dotSize/2+(dotSize)*perc; yDir = this.y-dotSize/2+(dotSize)*perc; var grd=ctx.createRadialGradient(xDir,yDir,radius/2,xDir,yDir,dotSize/2); grd.addColorStop(0,this.stopColor1); grd.addColorStop(1,this.stopColor2); ctx.fillStyle = grd; ctx.arc(this.x, this.y, radius, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); }; return constructor; }()); function resize(){ cv.width = window.innerWidth; cv.height = window.innerHeight; cvWidth = cv.width/2; cvHeight = cv.height/2; gridElements = {}; } cv.onmousemove = getMousePosition; cv.ontouchmove = getTouchPosition; window.onresize = resize;
Developer | Kittons |
Username | airnan |
Uploaded | September 09, 2022 |
Rating | 3.5 |
Size | 2,894 Kb |
Views | 20,240 |
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 |
Shapes | 1,817 Kb |
Animated form validation | 3,760 Kb |
SVG Animated icons | 3,819 Kb |
An animated year | 1,852 Kb |
Don dalek | 1,830 Kb |
La beta | 1,859 Kb |
After Effects to PIXI.js | 1,866 Kb |
HTML codepen banner | 1,488 Kb |
Movin bodymovin | 2,574 Kb |
Perricorn. a dog that was a unicorn | 1,893 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 |
Sort the Knowlege | Eprouver | 3,915 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Knockout Lists | Marinru | 2,531 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
STIKHOI | Denmch | 7,122 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Social.svg.min | Larsenwork | 13,849 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!