Bresenham's Line of Sight

Developer
Ash Blue
Size
2,881 Kb
Views
46,552
  1. Bresenham's Line of Sight Previews
  2. Bresenham's Line of Sight HTML Codes
  3. Bresenham's Line of Sight CSS Codes
  4. Bresenham's Line of Sight JS Codes

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 Previews
IQ Test

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/>');
});
Bresenham's Line of Sight - Script Codes
Bresenham's Line of Sight - Script Codes
Home Page Home
Developer Ash Blue
Username ashblue
Uploaded July 18, 2022
Rating 3
Size 2,881 Kb
Views 46,552
Do you need developer help for Bresenham's Line of Sight?

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!

Ash Blue (ashblue) Script Codes
Name
JavaScript Anagram Generator Alpha
CSS Arrows
HTML5 Canvas Progress Bar
Responsive Gallery Grid Layout
Overflowing Gallery
HTML5 Editable Table
JavaScript Anagram Algorithm Explanation
CSS Sprite Animation
Loader Example
A Pen by Ash Blue
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!