Hoisting

Javascript literally hoists the variable declaration to the global scope.

console.log(a);
var a = 1;

// results in undefined

In practice, what happens is:

var a;
console.log(a);
a = 1;

• The variable declaration goes to the top of the scope;
• The variable attribution remains in place;
• In practice, the variable already exists, it just does not have a value yet;

If you instead declare your variables using let or const, you end up witn an ReferenceError

In a previous raytracing project, we had to deal basically with two math operations:

1. Drawing circles in the screen
2. How to propagate traces throughout the screen

Let’s examine in detail how the circle drawing operation was done. The rays will be covered in a future post

Circles

Consider the following code:

struct Circle {
  double x;
  double y;
  double r;
};

This sctucture covers the most essencial parameters we need to perform math operations with circles.

You can think of mathematics as a building. Every building has a foundation, a solid basis upon which we can construct more complex structures brick by brick. In mathematics, specifically geometry, these foundations were laid long ago by Euclid in ancient Greece.

Euclid developed the Euclidean axioms: simple statements accepted as true without proof.

• Given any two points in a plane, you can draw a straight line connecting them.
• Given a point and a radius in a plane, you can draw a circle.
• Given a straight line and a point not on it, exactly one line through the point is parallel to the given line.

These axioms form the basis for proving more complex theorems. By tracing a theorem’s logical chain back to the axioms, we establish its truth, but, as mathematics evolved, new challenges emerged, like these famous ones:

Let’s walk through src/main.c – a clean raytracer using raylib.

Check the project’s source code at Github

The materials

• SphereMaterial: Holds Color, specular (0-1), shininess.
• Sphere: Material + Vector3 position + float radius.

Render Loop

Per frame, recompute all pixels (brute-force, no acceleration):

1. Ray Generation: For each x,y, GetScreenToWorldRay shoots ray from camera through pixels.

2. Intersection:

   • Init nearest collision distance to FLT_MAX.
   • For each sphere: GetRayCollisionSphere(ray, pos, radius).
   • Track closest hit + sphere.

3. Miss: BLACK pixel.

Building a 2D Raytracer in 150 Lines of C

A real-time 2D simulation where a point light source emits rays in all directions. When these rays hit an obstacle, they stop. The area behind the obstacle receives no light.

Here’s what the simulation does:

• A white circle acts as a light source, emitting yellow rays
• Another white circle acts as an obstacle that blocks light
• The obstacle bounces up and down automatically
• You can drag the light source around with your mouse to see how shadows change in real-time

The Foundation

Every raytracer needs to represent two fundamental concepts: shapes and rays.