What is magnetic modulo you ask? It’s nothing really…except the coolest thing ever.

Download the source PixelBender files here. You’ll find filters for creating square, diamond, and circle shapes, and how to plot them using Magnetic Modulo.

I’ve been working with the PixelBender Toolkit a lot lately, and I’ve written a placement algorithm that is very useful. I call it Magnetic Modulo because it uses modulo division to adhere to one of two points, based on a distance parameter. Below is a video example of a PixelBender effect that uses Magnetic Modulo to control plotting the numerous circles in the filter. Changing the distance parameter changes how far apart the circles are from each-other. Changing the radius changes the radius of each circle.

And here’s a Flash based example of how Magnetic Modulo works. Think of distance as the distance you want each point to be from eachother. So below, our two blue points represent the possible points that the red ball will be attracted to. Think of them like equally weighted charged magnets, both of which the red point is attracted to. The red point is lazy, just like Objects in the real world, it will be attracted to whatever point it is closest too. If remainder of its current position divided by distance is greater than or equal to half the distance, it goes to the rightmost point, otherwise the left most point. If that doesn’t make sense, just drag the below red ball and let go, you’ll get the hang of it.
Math is visual.

Flash Example 

This algorithm that I have named “magnetic modulo” has proven extremely useful whenever working with plotting points. Below is source code for the algorythm.

ActionScript

/**
* Rounds a point to the closest point evenly divisible by dist
* @param point The original point to round
* @param dist The distance of which points should be displaced from one another
* @return The original point rounded to the closest point evenly divisible by dist
*/
function magneticModulo(point:Number, dist:Number) : Number {
	var mod:Number = point % dist;
	if(mod >= dist / 2) point += (dist - mod);
	else point -= mod;
	return point;
}

PixelBender

    float magneticModulo(float val, float dist)
    {
        // do the slashes
        float mod = mod(val,dist);
        if(mod >= float(dist * float(0.5))) {
             val += (dist - qer);
        } else {
            val -= qer;
        }
        return val;
    }

Download the source PixelBender files here. You’ll find filters for creating square, diamond, and circle shapes, and how to plot them using Magnetic Modulo.