Drawing shapes interactive

Developer
Erik Terwan
Size
2,569 Kb
Views
42,504
  1. Drawing shapes interactive Previews
  2. Drawing shapes interactive HTML Codes
  3. Drawing shapes interactive CSS Codes
  4. Drawing shapes interactive JS Codes

How do I make an drawing shapes interactive?

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

Drawing shapes interactive Previews
IQ Test

Drawing shapes interactive - Script Codes HTML Codes

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

Drawing shapes interactive - 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;
}

Drawing shapes interactive - 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, mouseX = 0, mouseY = 0, randX = 0, randY = 0, lifetime = 0, colorUp = false, settings = { speed: 0.1, lineWidth : 1, linesEveryNumFrames: 10, minHue : 100, maxHue : 225, hueSpeed : 2.1, }; function setup() { setSizes(); t = 0; c = 200; lifetime = 0; colorUp = false; settings = { speed: 0.01, lineWidth : 1, linesEveryNumFrames: 3, minHue : 100, maxHue : 225, hueSpeed : 0.1, }; draw(); } function setSizes() { w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, mouseX = randX = x = x2 = w / 2, mouseY = randY = y = y2 = h / 2, 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 %250 == 0){ randX = (Math.random() * w); randY = (Math.random() * h); } var dx = mouseX - x; if(Math.abs(dx) > 1) { x += dx * 0.03; } var dy = mouseY - y; if(Math.abs(dy) > 1) { y += dy * 0.03; } var dx2 = randX - x2; if(Math.abs(dx2) > 1) { x2 += dx2 * 0.01; } var dy2 = randY - y2; if(Math.abs(dy2) > 1) { y2 += dy2 * 0.01; } 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.addEventListener('mousemove', function(e) { mouseX = e.pageX; mouseY = e.pageY; }, false);
})(document.body);
Drawing shapes interactive - Script Codes
Drawing shapes interactive - Script Codes
Home Page Home
Developer Erik Terwan
Username erikterwan
Uploaded July 04, 2022
Rating 3
Size 2,569 Kb
Views 42,504
Do you need developer help for Drawing shapes interactive?

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
Canvas Template
Livestream Audio Visualizer v2
Math.random at work
Drawing lines somewhat interactive.
Drawing lines
Connecting dots
Shape by attraction
Particle Storm - PixiJS
A Pen by Erik Terwan
Moving shape
Create amazing SEO content 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!