Bezier curve art

Developer
Loktar
Size
2,185 Kb
Views
60,720
  1. Bezier curve art Previews
  2. Bezier curve art HTML Codes
  3. Bezier curve art CSS Codes
  4. Bezier curve art JS Codes

How do I make an bezier curve art?

Messing around and this happened, looks purdy.. What is a bezier curve art? How do you make a bezier curve art? This script and codes were developed by Loktar on 20 August 2022, Saturday.

Bezier curve art Previews
IQ Test

Bezier curve art - Script Codes HTML Codes

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

Bezier curve art - Script Codes CSS Codes

body{background:#000; overflow:hidden;}
canvas{position:absolute; top:0;left:0}

Bezier curve art - Script Codes JS Codes

 var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), width = window.innerWidth, height = window.innerHeight, lines = [], cycle = 9; canvas.width = width; canvas.height = height; ctx.strokeStyle = "rgb(255,255,255)"; ctx.fillStyle = "rgba(0,0,0,0.01)"; init(); function init() { lines = []; for (var i = 0; i < 10; i++) { newLine(); } } function newLine() { lines.push({ x1: width / 2, y1: height, cp1x: width / 2 - Math.random() * width / 2, cp1y: height / 2 - Math.random() * height / 2, cp2x: width - Math.random() * width, cp2y: height - Math.random() * height, x2: width - Math.random() * width, y2: -height / 2, rotation: Math.random() * 360, angle1: Math.random() * 10, angle2: Math.random() * 10, angle3: Math.random() * 10 }); } function render() { ctx.strokeStyle = colorCycle(); for (var i = 0; i < lines.length; i++) { var line = lines[i]; line.cp1x += Math.sin(line.angle1 += 0.005); line.cp1y += Math.sin(line.angle1); line.cp2y -= Math.sin(line.angle2 -= 0.005); line.cp2x -= Math.sin(line.angle2); line.x1 -= Math.sin(line.angle3 += 0.005); line.y1 -= Math.sin(line.angle3); line.x2 -= Math.sin(line.angle3 += 0.005); line.y2 -= Math.sin(line.angle3); ctx.save(); ctx.beginPath(); ctx.moveTo(line.x1, line.y1); ctx.bezierCurveTo(line.cp1x, line.cp1y, line.cp2x, line.cp2y, line.x2, line.y2); ctx.stroke(); ctx.restore(); } requestAnimationFrame(render); } function colorCycle() { cycle += .01; if (cycle > 100) { cycle = 0; } var r = Math.floor(Math.sin(.3 * cycle + 0) * 127 + 128), g = Math.floor(Math.sin(.3 * cycle + 2) * 127 + 128), b = Math.floor(Math.sin(.3 * cycle + 4) * 127 + 128), a = Math.random() * 1; return "rgba(" + r + "," + g + "," + b + "," + 0.1 + ")"; } render();
Bezier curve art - Script Codes
Bezier curve art - Script Codes
Home Page Home
Developer Loktar
Username loktar00
Uploaded August 20, 2022
Rating 4.5
Size 2,185 Kb
Views 60,720
Do you need developer help for Bezier curve art?

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!

Loktar (loktar00) Script Codes
Name
Planets with points
Exploding 3D Clock
Pastel paint dripping
Tribute to the C64
Javascript 2d dynamic lighting
Part 2 platformer tutorial
Rough Seas re-creation for compo
Slime Text
Meteor Shower
Smoke Particles
Create amazing blog posts 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!