Algorithmic Animation with Javascript Tail

Developer
Wenting Zhang
Size
2,356 Kb
Views
12,144
  1. Algorithmic Animation with Javascript Tail Previews
  2. Algorithmic Animation with Javascript Tail HTML Codes
  3. Algorithmic Animation with Javascript Tail CSS Codes
  4. Algorithmic Animation with Javascript Tail JS Codes

How do I make an algorithmic animation with javascript tail?

What is a algorithmic animation with javascript tail? How do you make a algorithmic animation with javascript tail? This script and codes were developed by Wenting Zhang on 07 November 2022, Monday.

Algorithmic Animation with Javascript Tail Previews
IQ Test

Algorithmic Animation with Javascript Tail - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Algorithmic Animation with Javascript Tail</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="1440" height="768"></canvas> <script src="js/index.js"></script>
</body>
</html>

Algorithmic Animation with Javascript Tail - Script Codes CSS Codes

body { margin: 0px; padding: 0px;
}
#myCanvas { background-color: #000;
}

Algorithmic Animation with Javascript Tail - Script Codes JS Codes

function Point(x, y) { this.x = x; this.y = y;
}
function QueueLine(n, color, radius) { this.n = n; this.color = color; this.radius = radius; this.position = []; for (var i = 0; i < n; i++) { this.position.push(new Point(0, 0)); } this.positionB = []; for (var i = 0; i < n; i++) { this.positionB.push(new Point(0, 0)); } var self = this; window.addEventListener('mousemove', function(pos) { self.mouseMove(self, pos) }, false); //http://stackoverflow.com/questions/1338599/addeventlistener-this
}
QueueLine.prototype.draw = function() { context.fillStyle = this.color; context.arc(this.position[0].x + 0.5 * (this.positionB[0].x - this.position[0].x), this.position[0].y + 0.5 * (this.positionB[0].y - this.position[0].y), this.radius, 0, 2 * Math.PI); this.position[0].x = this.position[0].x + 0.5 * (this.positionB[0].x - this.position[0].x); this.position[0].y = this.position[0].y + 0.5 * (this.positionB[0].y - this.position[0].y); for (var i = 1; i < this.n; i++) { this.positionB[i].x = this.position[i - 1].x; this.positionB[i].y = this.position[i - 1].y; context.beginPath(); context.arc(this.position[i].x + 0.5 * (this.positionB[i].x - this.position[i].x), this.position[i].y + 0.5 * (this.positionB[i].y - this.position[i].y), this.radius - 0.4 * i, 0, 2 * Math.PI); this.position[i].x = this.position[i].x + 0.5 * (this.positionB[i].x - this.position[i].x); this.position[i].y = this.position[i].y + 0.5 * (this.positionB[i].y - this.position[i].y); context.fill(); }
};
QueueLine.prototype.mouseMove = function(self, pos) { self.positionB[0].x = pos.clientX; self.positionB[0].y = pos.clientY;
};
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
})();
var yourQueueLine = new QueueLine(14, "#ffff00", 7);
//var myQueueLine = new QueueLine(12, "rgba(255, 255, 255, 0.4)", 10);
function animate() { // update // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw stuff //myQueueLine.draw(); yourQueueLine.draw(); // request new frame requestAnimFrame(function() { animate(); });
}
animate();
Algorithmic Animation with Javascript Tail - Script Codes
Algorithmic Animation with Javascript Tail - Script Codes
Home Page Home
Developer Wenting Zhang
Username wentin
Uploaded November 07, 2022
Rating 3
Size 2,356 Kb
Views 12,144
Do you need developer help for Algorithmic Animation with Javascript Tail?

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!

Wenting Zhang (wentin) Script Codes
Name
Responsify images
Profession.is type transitions
P5.js start point
ResponsifyJS demo
Three.js start point
100 days of research
A Pen by Wenting Zhang
Comedy Central Loading SVG
Getting x-height and descender line
SVG Animation
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!