Coding Challenge 145: 2D Raycasting
Why Stack Overflow recommends it
Stack Overflow users link it when someone wants to implement 2D raycasting, light and shadow effects, or ray-segment intersection in canvas, SVG, Python or other graphics code.
Recommended by 3 people across 3 different months, 2019 to 2022.
What it is
Daniel Shiffman of The Coding Train builds a 2D ray casting engine in p5.js, using line segment walls and vector rays to simulate a light source casting shadows on a canvas. He covers line-line intersection, casting many rays, handling multiple boundaries and moving the source with Perlin noise.
What people said
Recommends enxaneta · 2021-01 · Stack Overflow · on “SVG & JS - Light stopped by obstacle”
I would recommend you to take a look at this video: [this video] It's canvas and p5.js but you'll get an idea of what to aim for
Recommends Gianluca Fuoco · 2022-03 · Stack Overflow · on “Setting raycast directions in a circle using HTML Canvas 2D”
I am trying to implement raycasting in typescript with HTML Canvas 2D following this video: [this video] . However, the rays being cast tend to point towards a single direction. My goal is to have the rays extend out in each direction to make contact with each line like in the video. I have tried normalizing the direction vector, and I have tried multiplying the direction of the rays with a scalar value like 10 but both did not work. [LINK] gif of html 2D raycast The rays are working sometimes, but mostly point in a single direction. Here is the code for the Vector class: export default class Vector2D { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } getX(): nu
Recommends Cascades · 2022-05 · Stack Overflow · on “How can I use Python and PIL to draw a shape that would simulate how light/shadow is cast around shapes/objects from a point in a (2D) image?”
I believe there is a lot of information online about this sort of thing. One popular method is called Raycasting, specifically in 2D. Some introductory material could be found in these links: [this video] [LINK] [LINK] A term to search could be "2D Raycasting"
Cites Lobsternator · 2019-05 · Stack Overflow · on “Line-to-line intersect with pygame's inverted y-axis”
[LINK] [this video] I have tried to implement this method in my code but to no avail, I do believe the issue is the inverted y-axis in pygame or is something else hiding under my sight? Any suggestions? Here's my code: x1 = other.pos1[0] y1 = other.pos1[1] x2 = other.pos2[0] y2 = other.pos2[1] x3 = self.pos1[0] y3 = self.pos1[1] x4 = self.pos2[0] y4 = self.pos2[1] den = (x1 - x2) * (y3 - y4) - (y1 * y2 * (x3 - x4)) if den == 0: return t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den u = -(((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3))) / den if t > 0 and t < 1 and u > 0: point = (x3 + u * (x4 - x3), y3 + u * (y4 - y3)) pygame.gfxdraw.filled_circle(surface, point[0], point[1], 3, (255, 0
Cites enxaneta · 2021-01 · Stack Overflow · on “SVG & JS - Light stopped by obstacle”
The next demo is inspired by this tutorial: 2D Raycasting [this video] ; The main idea is using the white rays as a mask for your image. Please change the stroke-width in css for a dimmer / clearer image. Please move the mouse over the svg canvas to see it changing. Also read the comments in the code and do not forget to see Daniel Shiffman's tutorial. let SVG_NS = " [LINK] "; let SVG_XLINK = " [LINK] "; let svg = document.querySelector("svg"); let m = { x: 0, y: 0 };// the initial mouse position let record = 600;//the maxim length of a ray let walls = [];//the array of the walls //list of points for the boundary (walls) let p1 = { x: 300, y: 100 }; let p2 = { x: 200, y: 300 }; let p3 = { x: 10,
Cites tahabashar11 · 2022-04 · Stack Overflow · on “How to make a line that follows the mouse(It follows it only by direction and don't change it's size)in tkinter”
[this video] 18:09 How to do the same thing in Tkinter what i tried from multiprocessing.connection import wait from pickle import PicklingError from tkinter import * import win32api from sklearn import preprocessing root = Tk() canvas = Canvas(root,bg = "pink",height = "500" ,width="1000") def UpdateLine(): position = win32api.GetCursorPos() x = position[0] y = position[1] wx = root.winfo_x() wy = root.winfo_y() if x < wx +1000 and x > wx and y < wy + 500 and y> wy: canvas.coords(Line1, 100, 200,x-100 + 3 ,y-200) root.after(1,UpdateLine) def Create_Line(x, y, r, canvasName): #center coordinates, radius position = win32api.GetCursorPos() x = position[0] y = position[1] return canvasName.create_li