Ray of thought – 2D graphics

Took the wonderful project of NCase’s Sight & Light code, and started tweaking it to my own uses.

I really love the project, since there is such immediate gratification when just scrolling through the demo page, and reading and grasping how the ray casting is done, step by step. The page shows how the end result is built.

This article:

  • is written during when I’m learning basics of 2D graphics
  • introduces fundamental concepts: point, ray, intercept
  • talks a bit about performance of finding an intercept of two lines
  • Khan Academy: Ray tracing intuition (superb video lesson)

I keep talking about intercept pretty much. Let’s get that out of the way.

Intercept in ray casting

An intercept is the Point where a ray meets another piece of line. You may call the piece of line also segment. Purpose is to shoot a ray, and see where (or whether) it collides on the other lines in the Scene.

Here’s a image to explain the intercept:

red ball marks the collision of a ray, cast from the beginning of the red line

The question that raycasting answers is basically:

if you (the viewer) are on a point in a 2D plane, where (a point) will your ray first collide into a wall?

There are a lot of applications of ray casting. Some are:

  • determine visibility of objects to a viewer
  • bullet collisions
  • determine the angle of collision between ray and object (though not directly from Intercept alone)
  • reflection of light beams (especially in ray tracing method of producing images)

Determine shadow areas vs visible areas

If a whole bunch of rays area cast, you will get basically 2 areas:

  • areas that are visible to you (where you can see into)
  • areas that will fall into shadow regions

Let’s look at picture probably worth a thousand words.

Each red dot (in the Aim) shoots a ray towards edge points in buildings.

The crucial code is about finding out the (X,Y) point of a Ray, in relation to all polygon objects present. The polygons are those oblique boxes. Poly means “many” – the object is made of many points connected by lines. If we have more than 3 points in a shape, it’s basically a polygon, whereas only 3 points would make a triangle.


What are rays?

Segments represent something concrete in the scene, like walls, or boundaries of objects. Rays are ‘invisible’ things used to gauge. They work as part of the graphics engineer’s toolbox.

Ray starts from a point (X,Y) and ends up in another point.

Rays are fundamentally important building blocks in computer graphics. They represent how light actually travels in our world: it’s a rather straight line. Real light does bend, however. This is due to the physics of light: light has both a wave and particle behavior. It’s called dualism.

But in many instances, especially your first 2D games, you don’t really need to think about bending of light. Think of rays. They are cast from a point to a direction.

Rays are represented often in parametric form. This kind of ray has three properties:

  • ray Point of origin
  • deltas
  • T

The ‘T’ runs from 0 to 1, smoothly. When it is 0, we will be at Ray origin. The T=1 will give end of the ray Point. So a line between these points will draw us the whole ray.

  • a drawing command line (P, E) will draw us a ray
  • P = (X,Y)
  • E = P + T*delta

Rays (think of them as lines) are stored in parametric form. If one were to do everything from scratch, you might possibly first consider a very primitive way to check the collision.

At least I thought of something like this: move along the line’s direction by using X and Y increments, until you either hit a boundary pixel of a polygon (“a building wall”), or you run out of the canvas – in which case you know the line does not collide with any of the polygons in scene.

The problem with such a traveling worm method is it’s s-l-o-w.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: