help converting a processing sketch

beginners
#1

Hi, I’m trying to convert this processing sketch to openframeworks - code is at https://gist.github.com/liamstask/7312750

The renderings I’m seeing are similar, but not quite the same - pix are and

Not sure if this is possible to easily diagnose given this info, but does anybody have any hints on how I might adjust the openframeworks version to more closely match the processing sketch?

Thanks!
Liam

#2

Love the moire patterns generated in the OF version!

Your code is fine, you are just drawing the ofMesh as a wireframe instead of a filled shape. Change mesh.drawWireframe(); to mesh.drawFaces();

#3

Thanks!

I had actually tried that earlier, but I don’t see the details of the polygons getting rendered with mesh.drawFaces(): (sorry, I’m not sure what the correct term is for those!)

Liam

#4

When you say the details of the polygons are you talking about the moire pattern or the outline shape of each triangle?

The OF version is actually visually correct in comparison with the processing one- if you draw a triangle fan mesh/shape there should be no gaps/lines between the triangles. I remember this issue with processing when using beginShape() in the past.

There are a few tricks you could try if you really need it to look more like the processing sketch- eg. draw a white mesh wireframe over the top with low opacity. But i guess it’s good to know why the sketches are behaving slightly different.

#5

Right, talking about the moire pattern.

And yeah, I’m mostly curious to understand why they’re different if possible - it’s not mission critical software or anything :slight_smile:

Just to clarify, if I were to draw a low opacity mesh over the top, how would that mesh differ from the one that’s already being drawn? i.e., isn’t the existing mesh already specifying the windings that result in that moire pattern?

Thanks again.

#6

The moire pattern actually has nothing to do with the geometry of the shapes/meshes. It’s just an artefact of drawing lines closely together- in this case, it’s the outlines of the triangle wedges. If you want to see different patterns, you can experiment with the line width, number of segments, and the angle.

Drawing a low opacity mesh wireframe over the top of the current one will look exactly the same unless you change the mesh colours. The mesh winding has nothing to do with the moire pattern.

Back to the OF and Processing rendering differences… i can’t say exactly why the Processing sketch renders the filled triangle wedges with the gaps leading to the moire pattern- but i can tell you it’s most probably a bug/mistake. If you use the same code in Processing 1.5 it will render differently than 2.0. As mentioned, the OF version renders correctly (and surprisingly so does Processing 1.5)- drawing mesh faces will draw perfectly filled triangles with no gaps, and drawing the mesh wireframe will draw the outlines of the triangles only- which will result in the moire pattern. If you draw the filled faces first, then the outlines on top with a slight colour variation you might get something close to the Processing sketch.

Here’s a basic demo… I just added the line width and the bit after drawFaces(). I change the saturation slightly for each mesh colour, then draw the wireframe.

  
  
void testApp::draw(){  
  
    ofEnableSmoothing();  
    ofSetLineWidth(1.0);  
      
    int width = ofGetWindowWidth();  
    int height = ofGetWindowHeight();  
      
    float angleStep = 360 / segmentCount;  
      
    ofMesh mesh;  
    mesh.setMode(OF_PRIMITIVE_TRIANGLE_FAN);  
    mesh.addVertex(ofVec3f(width / 2, height / 2));  
      
    for (float angle = 0; angle <= 360; angle += angleStep) {  
        float vx = width/2 + cos(ofDegToRad(angle)) * radius;  
        float vy = height/2 + sin(ofDegToRad(angle)) * radius;  
        mesh.addVertex(ofVec3f(vx, vy));  
          
        float a = ofMap(angle, 0, 360, 0, 255);  
        float mx = ofMap(mouseX, 0, width, 0, 255);  
        float my = ofMap(mouseY, 0, height, 0, 255);  
        mesh.addColor(ofColor::fromHsb(a, mx, my));  
    }  
      
    mesh.drawFaces();  
    for(int i = 0; i < mesh.getNumColors(); i++) {  
        ofColor currentClr = mesh.getColor(i);  
        currentClr.setSaturation(currentClr.getSaturation() * .66);  
        mesh.setColor(i, currentClr);  
    }      
    mesh.drawWireframe();  
}

Hope this helps.

#7

That is super helpful, and definitely helps clarify how things are working.

Quite interesting to see the difference in behavior for Processing 1.x and 2.x - didn’t think to try that.

Thanks again!