Pointed

Developer
Nick Williams
Size
2,630 Kb
Views
34,408
  1. Pointed Previews
  2. Pointed HTML Codes
  3. Pointed CSS Codes
  4. Pointed JS Codes

How do I make an pointed?

Learning canvas and brushing up on math. Started out with a single arrow, decided to tile them and decrease opacity based on distance. What is a pointed? How do you make a pointed? This script and codes were developed by Nick Williams on 27 August 2022, Saturday.

Pointed Previews
IQ Test

Pointed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pointed</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="controls"> <label> Spacing: <input type="range" id="spacing" min="10" max="99" step="1" /> <output></output> </label> </div> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Pointed - Script Codes CSS Codes

body { margin:0; font-family: sans-serif;; } canvas { display: block; } .controls { position: absolute; top : 0; right: 0; padding: 0.75em 1em; background-color: rgba(0,0,0,0.75); color: white; }

Pointed - Script Codes JS Codes

/* global requestAnimationFrame */
var pixelRatio = window.devicePixelRatio || 1;
function initCanvas(elem, width, height) { elem.width = (width * pixelRatio); elem.height = (height * pixelRatio); elem.style.height = "100%"; elem.style.width = "100%"; var context = elem.getContext("2d"); context.scale(pixelRatio, pixelRatio); return context;
}
window.onload = function() { var width = window.innerWidth; var height = window.innerHeight; var canvas = document.querySelector("#canvas"); var context = initCanvas(canvas, width, height); var spacing = 50; var radius = Math.min(width, height); var mouseX = width / 2; var mouseY = height / 2; function clear(context, width, height) { context.clearRect(0, 0, width, height); } function drawArrow(context, x, y, angle, color) { context.save(); context.translate(x, y); context.rotate(angle); context.beginPath(); context.moveTo(20, 0); context.lineTo(-20, 0); context.moveTo(20, 0); context.lineTo(10, -10); context.moveTo(20, 0); context.lineTo(10, 10); context.lineWidth = 3; context.strokeStyle = color; context.stroke(); context.restore(); } function getColor(dx, dy) { var dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); var alpha = 1 - (dist / radius); return "rgba(0,0,0," + Math.max(0.2, alpha) + ")"; } function render() { clear(context, width, height); for(var arrowX = spacing / 2; arrowX < width; arrowX += spacing) { for(var arrowY = spacing / 2; arrowY < (height); arrowY += spacing) { var dx = mouseX - arrowX; var dy = mouseY - arrowY; var angle = Math.atan2(dy, dx); var color = getColor(dx, dy); drawArrow(context, arrowX, arrowY, angle, color); } } requestAnimationFrame(render); } render(); var output = document.querySelector("output"); var slider = document.querySelector("#spacing"); slider.value = spacing; output.innerHTML = spacing + "px"; slider.addEventListener("input", function(e) { spacing = this.valueAsNumber; output.innerHTML = spacing + "px"; }); document.addEventListener("mousemove", function(e) { mouseX = e.clientX; mouseY = e.clientY; }, false); document.addEventListener("touchmove", function(e) { var touch = e.touches[0]; mouseX = touch.clientX; mouseY = touch.clientY; });
};
Pointed - Script Codes
Pointed - Script Codes
Home Page Home
Developer Nick Williams
Username WickyNilliams
Uploaded August 27, 2022
Rating 4.5
Size 2,630 Kb
Views 34,408
Do you need developer help for Pointed?

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!

Nick Williams (WickyNilliams) Script Codes
Name
Gridzzz
Headroom.js demo
Block, Element, Modifier in LESS
Conditional Lightbox for Responsive Design
React starter template
A Pen by Nick Williams
Closure classic
Particle particulars
Got your callback
Bokeh
Create amazing love letters 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!