Shadowing without intersecting

Developer
Aitor
Size
4,645 Kb
Views
44,528
  1. Shadowing without intersecting Previews
  2. Shadowing without intersecting HTML Codes
  3. Shadowing without intersecting CSS Codes
  4. Shadowing without intersecting JS Codes

How do I make an shadowing without intersecting?

This can be rendered using WebGL making polygons for the shadows and then using this as a "shadow buffer". Using the depth buffer to prevent re-rendering and rendering as much as shadow buffers as lights we have in the scene. If you also order the rendering from near to far, rendering first what's near and rendering last what's far (in addition to depth buffer) you can get a very fast method to render visible areas.. What is a shadowing without intersecting? How do you make a shadowing without intersecting? This script and codes were developed by Aitor on 16 September 2022, Friday.

Shadowing without intersecting Previews
IQ Test

Shadowing without intersecting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shadowing without intersecting</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas></canvas> <script src="js/index.js"></script>
</body>
</html>

Shadowing without intersecting - Script Codes CSS Codes

html,
body,
canvas { width: 100%; height: 100%; overflow: hidden;
}

Shadowing without intersecting - Script Codes JS Codes

"use strict";
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d", { alpha: false
});
var shadowCanvas = document.createElement("canvas");
var shadowContext = shadowCanvas.getContext("2d", { alpha: true
});
var source = [200, 200];
var points = [[100, 100], [200, 150], [150, 200], [400, 200], [500, 300], [450, 350], [400, 250], [500, 500], [500, 550], [300, 550], [350, 500], [200, 600], [400, 650], [300, 700], [200, 750], [600, 200], [650, 150], [700, 500], [650, 550], [800, 100], [850, 100], [850, 800], [800, 800]];
var polygons = [[0, 1, 2], [3, 4, 5, 6], [7, 8, 9, 10], [11, 12, 13, 14], [15, 16, 17, 18], [19, 20, 21, 22]];
function update(t) {}
function render(t) { context.lineWidth = 1; context.fillStyle = "white"; context.fillRect(0, 0, canvas.width, canvas.height); for (var _iterator = polygons, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var polygon = _ref; for (var index = 0; index < polygon.length; index++) { var startPoint = polygon[index]; var endPoint = polygon[(index + 1) % polygon.length]; var _start = points[startPoint]; var end = points[endPoint]; var sdx = _start[0] - source[0]; var sdy = _start[1] - source[1]; var sdirection = Math.atan2(sdy, sdx); var sdistance = Math.sqrt(sdx * sdx + sdy * sdy); var edx = end[0] - source[0]; var edy = end[1] - source[1]; var edirection = Math.atan2(edy, edx); var edistance = Math.sqrt(edx * edx + edy * edy); var far = Math.max(canvas.width, canvas.height); context.beginPath(); context.moveTo(_start[0], _start[1]); var ax = source[0] + Math.cos(sdirection) * far * far; var ay = source[1] + Math.sin(sdirection) * far * far; var bx = source[0] + Math.cos(edirection) * far * far; var by = source[1] + Math.sin(edirection) * far * far; context.lineTo(ax, ay); context.lineTo(bx, by); context.lineTo(end[0], end[1]); context.closePath(); context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); } context.beginPath(); for (var index = 0; index < polygon.length; index++) { var startPoint = polygon[index]; var endPoint = polygon[(index + 1) % polygon.length]; var _start2 = points[startPoint]; var end = points[endPoint]; context.moveTo(_start2[0], _start2[1]); context.lineTo(end[0], end[1]); } context.closePath(); context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); } context.beginPath(); context.arc(source[0], source[1], 5, 0, Math.PI * 2); context.fillStyle = "black"; context.fill(); shadowContext.clearRect(0, 0, canvas.width, canvas.height); shadowContext.drawImage(canvas, 0, 0); context.fillStyle = "grey"; context.fillRect(0, 0, canvas.width, canvas.height); // Draws shadow context.globalAlpha = 0.25; context.globalCompositeOperation = "multiply"; context.drawImage(shadowCanvas, 0, 0); context.globalAlpha = 1.0; context.globalCompositeOperation = "source-over"; for (var _iterator2 = polygons, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var polygon = _ref2; context.beginPath(); for (var index = 0; index < polygon.length; index++) { var startPoint = polygon[index]; var endPoint = polygon[(index + 1) % polygon.length]; var _start3 = points[startPoint]; var end = points[endPoint]; //context.moveTo(start[0],start[1]); context.lineTo(end[0], end[1]); } context.closePath(); context.lineWidth = 4; context.lineCap = "round"; context.strokeStyle = "black"; context.stroke(); // WTF! Why this does not work? context.fillStyle = "black"; context.fill(); }
}
var frameID = undefined;
function frame(t) { update(t); render(t); frameID = requestAnimationFrame(frame);
}
function resize() { shadowCanvas.width = canvas.width = canvas.offsetWidth; shadowCanvas.height = canvas.height = canvas.offsetHeight;
}
function mouseMove(e) { source[0] = e.clientX; source[1] = e.clientY;
}
function start() { addEventListener("mousemove", mouseMove); addEventListener("resize", resize); dispatchEvent(new Event("resize")); frameID = requestAnimationFrame(frame);
}
start();
Shadowing without intersecting - Script Codes
Shadowing without intersecting - Script Codes
Home Page Home
Developer Aitor
Username AzazelN28
Uploaded September 16, 2022
Rating 4.5
Size 4,645 Kb
Views 44,528
Do you need developer help for Shadowing without intersecting?

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!

Aitor (AzazelN28) Script Codes
Name
Break Out
Superformula
Adventure
WebGL Point Sprites
Multiple CSS Backgrounds
AudioContext Concept
Fire
Date Input
Physics 101
Dancing Text
Create amazing web 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!