Bresenham's Line of Sight
How do I make an bresenham's line of sight?
Optimized JavaScript line of sight algorithm implementation.. What is a bresenham's line of sight? How do you make a bresenham's line of sight? This script and codes were developed by Ash Blue on 18 July 2022, Monday.
Bresenham's Line of Sight - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bresenham's Line of Sight</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Bresenham's Line of Sight</h1>
<button id="btn-check-sight">Validate Sight</button>
<h2>Start</h2>
<label for="start-x">X</label>
<input value="3" size="1" maxLength="1" id="start-x" type="text/css" />
<label for="start-y">Y</label>
<input value="1" size="1" maxLength="1" id="start-y" type="text/css" />
<h2>End</h2>
<label for="end-x">X</label>
<input value="5" size="1" maxLength="1" id="end-x" type="text/css" />
<label for="end-y">Y</label>
<input value="3" size="1" maxLength="1" id="end-y" type="text/css" />
<h2>Map</h2>
<p id="result"></p>
<div id="map"></div>
<h2>References</h2>
<ul> <li>http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm</li> <li>http://www.cse.chalmers.se/edu/year/2010/course/TDA361/grid.pdf</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bresenham's Line of Sight - Script Codes CSS Codes
h1, h2 { font-family: helvetica, arial, sans-serif; margin: 15px 0 2px 0;
}
input { margin-right: 10px;
}
Bresenham's Line of Sight - Script Codes JS Codes
/*
Author: Ash Blue
Site: blueashes.com
Implementing Z-Axis support
- Tile map will need to indicate vision with a separate array or non-numeric value (ex 'v')
*/
var $BTN_SIGHT = $('#btn-check-sight');
var _event = { isVisible: function () { var start = rC.getStart(), end = rC.getEnd(), // Step directions stepX = rC.getDirection(start.x, end.x), stepY = rC.getDirection(start.y, end.y), // Boundary for largest movement point deltaX = Math.abs(end.x - start.x), deltaY = Math.abs(end.y - start.y), // deltaZ = Math.abs(end.z - start.z), // How many squares to advance in an increment (prevents reading corners) err = deltaX - deltaY; var x = start.x, y = start.y, valid = true, errCalc; for (var i = 0; i < 20; i++) { // Check for invalid tile if (rC.isBlocked(x, y)) { rC.setResult('Sight is blocked at ' + (x + 1) + ' ' + (y + 1)); break; } // Check for destination if (x === end.x && y === end.y) { rC.setResult('Valid line-of-sight'); break; } // Check error and increment x errCalc = 2 * err; if (errCalc > deltaY * -1) { err -= deltaY; x += stepX; } // Check for destination if (x === end.x && y === end.y) { rC.setResult('Valid line-of-sight'); break; } // Inrement y if (errCalc < deltaX) { err += deltaX; y += stepY; } } }
};
// Ray Casting API
var rC = { open: [], init: function () { this.bind(); }, bind: function () { $BTN_SIGHT.click(_event.isVisible); }, getStart: function () { return { x: parseInt($('#start-x').val() - 1, 10), y: parseInt($('#start-y').val() - 1, 10) }; }, getEnd: function () { return { x: parseInt($('#end-x').val() - 1, 10), y: parseInt($('#end-y').val() - 1, 10) }; }, // Get the direction between two points getDirection: function (a, b) { if (a < b) { return 1; } else { return -1; } }, setResult: function (message) { $('#result').html(message); }, isBlocked: function (x, y) { return map[y][x] === 0; }
};
rC.init();
// Output map
var $MAP = $('#map');
var map = [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 0, 0, 1, 1, 1, 1, 1 ], [ 1, 1, 0, 0, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
];
map.forEach(function (e) { $MAP.append(e.join(', ') + '<br/>');
});
Developer | Ash Blue |
Username | ashblue |
Uploaded | July 18, 2022 |
Rating | 3 |
Size | 2,881 Kb |
Views | 46,552 |
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!
Name | Size |
Fancy Image Zoom | 1,502 Kb |
JavaScript Anagram Algorithm Explanation | 1,897 Kb |
Overflowing Gallery | 1,566 Kb |
Pure CSS Responsive Modal | 1,161 Kb |
CSS Arrows | 1,921 Kb |
CSS Zoom Icon | 1,553 Kb |
CSS Sprite Animation | 3,732 Kb |
HTML5 Editable Table | 3,252 Kb |
A Pen by Ash Blue | 2,071 Kb |
Responsive Gallery Grid Layout | 2,071 Kb |
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!
Name | Username | Size |
Border image | JohnRiordan | 2,120 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Social buttons | Flacu | 2,022 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!