Moving shape

Developer
Erik Terwan
Size
2,555 Kb
Views
54,648
  1. Moving shape Previews
  2. Moving shape HTML Codes
  3. Moving shape CSS Codes
  4. Moving shape JS Codes

How do I make an moving shape?

Drawing some shapes.. What is a moving shape? How do you make a moving shape? This script and codes were developed by Erik Terwan on 04 July 2022, Monday.

Moving shape Previews
IQ Test

Moving shape - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving shape</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="main"></canvas> <script src="js/index.js"></script>
</body>
</html>

Moving shape - Script Codes CSS Codes

body
{ margin: 0; padding: 0; background: #000;
}
canvas#main
{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0;
}

Moving shape - Script Codes JS Codes

(function(body){ var canvas = document.getElementById('main'), ctx = canvas.getContext('2d'), t = 0, a = 500, c = 200, x = 0, y = 0, randX = 0, randY = 0, randX2 = 0, randY2 = 0, lifetime = 0, colorUp = false, settings = { speed: 0.01, lineWidth : 1, linesEveryNumFrames: 3, minHue : 100, maxHue : 225, hueSpeed : 0.1, speed1Change: 80, speed2Change: 250 }; function setup() { setSizes(); t = 0; c = 200; lifetime = 0; colorUp = false; draw(); } function setSizes() { w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, randX = randX2 = x = x2 = Math.random() * w, randX = randY2 = y = y2 = Math.random() * h, a = Math.max(w, h); } function draw() { if(lifetime %2 == 0){ ctx.shadowBlur = 0; ctx.shadowColor= "hsla(0, 0%, 0%, 0)"; ctx.fillStyle = "hsla(0,0%,0%,0.05)"; ctx.fillRect(0,0,w,h); } var xa = (a * Math.cos(t)); xa = xa / (1 + Math.pow( Math.sin(t), 2)); var ya = (a * Math.sin(t) * Math.cos(t)); ya = ya / (1 + Math.pow(Math.cos(t), 2)); xa += w / 2; ya += h / 2; if(lifetime %settings.speed1Change == 0){ randX = (Math.random() * a); randY = (Math.random() * a); } if((lifetime - (settings.speed2Change / 2)) %settings.speed2Change == 0){ randX2 = (Math.random() * (a - 250)); randY2 = (Math.random() * (a - 500)); } var dx = randX2 - x; if(Math.abs(dx) > 1) { x += dx * 0.003; } var dy = randY2 - y; if(Math.abs(dy) > 1) { y += dy * 0.003; } var dx2 = randX - x2; if(Math.abs(dx2) > 1) { x2 += dx2 * 0.003; } var dy2 = randY - y2; if(Math.abs(dy2) > 1) { y2 += dy2 * 0.003; } ctx.beginPath(); ctx.shadowBlur = 10; ctx.shadowColor= "hsla("+c+", 89%, 35%, 0.5)"; ctx.lineWidth = settings.lineWidth; ctx.bezierCurveTo(x,y,x2,y2,xa, ya); //ctx.quadraticCurveTo(startX,startY,xRand,yRand,x, y); ctx.strokeStyle = "hsla("+c+", 99%, 68%, 0.5)"; ctx.stroke(); ctx.closePath(); //} if(colorUp){ c += settings.hueSpeed; } else{ c -= settings.hueSpeed; } if(c > settings.maxHue){ c = settings.maxHue; colorUp = false; } else if(c < settings.minHue){ c = settings.minHue; colorUp = true; } t += settings.speed; lifetime++; window.requestAnimationFrame(draw); } document.addEventListener('DOMContentLoaded', setup, false); window.addEventListener('resize', setSizes, false);
})(document.body);
Moving shape - Script Codes
Moving shape - Script Codes
Home Page Home
Developer Erik Terwan
Username erikterwan
Uploaded July 04, 2022
Rating 3
Size 2,555 Kb
Views 54,648
Do you need developer help for Moving shape?

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!

Erik Terwan (erikterwan) Script Codes
Name
Shape by attraction
Moving lines
Drawing shapes interactive
Livestream Audio Visualizer v2
Livestream Audio Visualizer
Shape by attraction v2
Shape by attraction v3
Retina canvas w. resize
A Pen by Erik Terwan
Canvas Template
Create amazing video scripts with AI!

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!