Rotating and cropping ofPixels to arbitrary angle?


#1

I am working on creating a linear gradient, and writing pixels into an image from left to right. I have this working well.

Now, I need to be able to generate the gradient based on an angle. I was thinking I could basically create the linear gradient, and the rotate based on the angle, and crop (since Ill need to fill a larger area when I rotate).

Looking of ofPixels, there are methods to rotate by 90 degrees, but not arbitrary angles. So, my question is, what is the best approach for rotating ofPixels (or ofImage) by an arbitrary angle, and then copying / cropping a region of those pixels.

Basically like the attached image.

linear-gradient

(I realize a better solution might be to just have my algorithm draw at an arbitrary angle, but I want to see if I can get this approach working first).


#2

I think this is much easier and faster to do on the gpu, just create a mesh with color coordinates to create your gradient, draw it to an fbo rotated and then draw a subsection of the fbo texture using drawSubsection. Even with drawing to an fbo it’ll be faster than generating the pixels one by one in the cpu


#3

Arturo,

Thanks for the response. Yes, this is definitely the easiest / fastest way, and I have this running. I am also doing it manually though so I have more control over how the gradients are generated.

You can see examples of the current different ways im generating here:

Btw, I was able to rotate the pixels using the following code:

ofRectangle outRect = ofRectangle(0, 0, 1280, 1280);

ofVec3f outCenter = outRect.getCenter();
//outCenter = center;

float angle = 0.785398;
for(int y = 0; y < outRect.height; y++) {
    for(int x = 0; x < outRect.width; x++) {
        
        //https://stackoverflow.com/a/695130
        angle = angle;
        
        float dx = x - center.x;
        float dy = y - center.y;
        
        float newX = cos(-angle) * dx - sin(-angle) * dy + (center.x);
        float newY = cos(-angle) * dy + sin(-angle) * dx + center.y;

        //rotated.setColor(newX, newY, pixels.getColor(x, y));
        
        rotated.setColor(x, y, pixels.getColor(newX, newY));            
    }
}

Based on this post : https://stackoverflow.com/a/695130

Now I just need to calculate the size of the rotated gradient to create so it completely fits.