Fancy Background shapes
How do I make an fancy background shapes?
I was away for a while seeking for inspiration =D Now i am back with this little simple pen.. What is a fancy background shapes? How do you make a fancy background shapes? This script and codes were developed by Godje on 12 September 2022, Monday.
Fancy Background shapes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Background shapes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <script src='https://codepen.io/Godje/pen/aBbjza.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fancy Background shapes - Script Codes JS Codes
(function() { var canvasBody, $, w = window.innerWidth, h = window.innerHeight, gui = new dat.GUI(), stats = new Stats(), tick = 0, pi = Math.PI, pi2 = pi*2, piD2 = pi/2, piD3 = pi/3, piD6 = pi/6, pi2D3 = pi2/3, piDeg = pi/180, particles = [], canvasStyles = { position: "absolute", top: "0px", left: "0px", "background-color": "#222", "z-index": -1 }, Mouse = new Vector2(w/2, h/2), mousePressed = false, opts = { bgc: "#fcfcfc", showFPS: false, color: "#75b8d4", amount: 30, thickness: 5, radius: 12, rotSpeed: 0.4, gravity: 0.8, populate: function(){ particles = []; for(var i =0; i < opts.amount; particles[i++]= new Shape()); console.log(particles) } }, Shape = function(){ this.vertices = Math.floor(Math.random()*5); this.pos = new Vector2(opts.radius/2 + Math.random()*w - opts.radius, Math.random()*h - opts.radius); this.angle=Math.random()*180; this.d=Math.random()<.5?1:-1 }; Shape.prototype = { update: function(){ this.pos.y-opts.radius-opts.thickness<h?( this.pos.y+=opts.gravity, this.angle+=opts.rotSpeed*this.d ): this.pos.set(Math.random()*w, -opts.radius); }, render: function(){ if(this.vertices>0){ $.beginPath(); $.moveTo(Math.cos(this.angle*piDeg)*opts.radius+this.pos.x,Math.sin(this.angle*piDeg)*opts.radius+this.pos.y); for(var i=1; i<this.vertices;i++){ var a = pi2/this.vertices*i; var aa = this.angle*piDeg; $.lineTo(Math.cos(a+aa)*opts.radius+this.pos.x, Math.sin(a+aa)*opts.radius+this.pos.y); } $.closePath(); $.lineCap = "round"; $.lineJoin = "round"; $.lineWidth = opts.thickness; $.strokeStyle = opts.color; $.stroke(); } else { $.beginPath(); $.arc(this.pos.x, this.pos.y, opts.radius, 0,pi2); $.closePath(); $.lineWidth = opts.thickness; $.strokeStyle = opts.color; $.stroke(); } } } function setup(){ createCanvas(); addListeners(); opts.populate(); document.body.appendChild(stats.domElement); gui.addColor(opts, "color"); gui.add(opts, "radius", 5, 50); gui.add(opts, "thickness", 1, 20); gui.add(opts, "amount", 1, 1000).onFinishChange(opts.populate); gui.add(opts, "rotSpeed", 0.01, 10, 0.01); gui.add(opts, "gravity", 0.1, 10); gui.add(opts, "populate").name("respawn"); window.requestAnimationFrame(loop); } function loop(){ stats.begin(); drawBg(); particles.map(function(S){ S.update(); S.render(); }) opts.showFPS ? stats.domElement.style["display"] = "block" : stats.domElement.style["display"] = "none"; window.requestAnimationFrame(loop); stats.end(); } function createCanvas() { var el = document.createElement("canvas"), ctx = el.getContext("2d"); for (var style in canvasStyles) { el.style[style] = canvasStyles[style]; } document.body.appendChild(el); canvasBody = el; $ = ctx; canvasBody.width = w; canvasBody.height = h; document.body.style["overflow"] = "hidden" return [el, ctx]; } function drawBg() { $.fillStyle = opts.bgc; $.fillRect(0, 0, w, h); } function addListeners(){ window.addEventListener("resize", resize); window.addEventListener("mousemove", mouseMove); canvasBody.addEventListener("mousedown", mouseDown); canvasBody.addEventListener("mouseup", mouseUp); canvasBody.addEventListener("touchmove", touchMove); canvasBody.addEventListener("touchstart", touchStart); canvasBody.addEventListener("touchend", touchEnd); } function resize(){ w = canvasBody.width = window.innerWidth; h = canvasBody.height = window.innerHeight; } function mouseDown(event){ mousePressed = true; Mouse.set(event.pageX, event.pageY); } function mouseUp(event){ mousePressed = false; } function mouseMove(event){ Mouse.set(event.pageX, event.pageY); } function touchMove(event){ var touches = event.changedTouches; Mouse.set(touches[0].pageX, touches[0].pageY); } function touchStart(event){ e.preventDefault(); mousePressed = true; touchMove(event); } function touchEnd(event){ mousePressed = false; } setup();
})()
Developer | Godje |
Username | Godje |
Uploaded | September 12, 2022 |
Rating | 4 |
Size | 2,920 Kb |
Views | 24,288 |
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 |
Archimedean Spiral | 3,688 Kb |
Wavy thing | 3,246 Kb |
Nice multipart image slider | 4,041 Kb |
Color Chaos | 4,129 Kb |
Dot Digit Input | 4,156 Kb |
FIRE | 3,636 Kb |
Polygon Cursor Canvas | 3,449 Kb |
Just SMILE | 3,098 Kb |
Shoal of Pursuers | 4,099 Kb |
Just a simplest particle canvas | 2,454 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 |
Pomodoro Clock | Yas46 | 3,328 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Basic template | Tomcat | 1,675 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Calculator | Rzencoder | 4,572 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Collapsing Widget | Er40 | 4,279 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!