Converting Stroke to Open Frameworks

beginners
#1

Hello,

Can you help please?

I’m trying to convert some Processing code into Open Frameworks, but am struggling because OF doesn’t have Stroke.

Here is the original code:

void draw() {
// background(0, 0, 0, 1);
noStroke();

fill(0, 0, 0, 32);
rect(0, 0, width, height);

noFill();

float count = 12;

float i = 0; float j = 0;

float x = width / 2 + (sin(xmotion * 0.5) * width / 16);
float y = height / 2 + (cos(zmotion * 0.75) * height / 16);

for (j = 0; j < 1; j += 0.002) {
float jnorm_j = abs(0.5 - j) * 2;
for (i = 0; i < count; i += 1) {
float norm_i = i / count;
float unit_i = 1 / count;

float inorm_i = abs(0.5 - norm_i) * 2;

float n = noise(inorm_i + xmotion, jnorm_j + ymotion) / 128;
	
	float rad1 = radius + cos(xmotion * PI * 4 + inorm_i * PI * 32 + jnorm_j * PI * 8) / (0.4 + abs(sin(xmotion) * 2));
	float rad2 = radius + sin(ymotion * PI * 4 + inorm_i * PI * 32 + jnorm_j * PI * 8) / (0.4 + abs(cos(zmotion) * 2));

float cx = rad1 * sin(norm_i * PI * 2 + n * 4 + xmotion + (j * PI * 2)) + sin(xmotion*2) * 24;
float cy = rad1 * cos(norm_i * PI * 2 + n * 4 + ymotion + (j * PI * 2)) + cos(ymotion*2) * 24;

float cx2 = rad2 * sin((unit_i + norm_i) * PI * 2 + xmotion + (j * PI * 2)) + sin(xmotion*2) * 24;
float cy2 = rad2 * cos((unit_i + norm_i) * PI * 2 + ymotion + (j * PI * 2)) + cos(ymotion*2) * 24;

//stroke(0, 0, 0, 128);

// line(x + cx, y + cy, x + cx2, y + cy2);
line(x + cx / 2, y + cy / 2, x + cx2 / 2, y + cy2 / 2);
stroke(192 + inorm_i * 128 + jnorm_j * 128, 128 * (1-j), 256, 256 * (n * 32));

line(x + cx / j, y + cy / j, x + cx2 / j, y + cy2 / j);

noStroke();

Here is my adaptation:

ofFill();


     ofSetColor(0, 0, 0, 3);
     ofDrawRectangle(0, 0, ofGetWidth(), ofGetHeight());
     ofNoFill();

    // ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, ofRandom(100));



       count = 12;



       float i = 0;

       float j = 0;



       float x =  ofGetWidth() / 2 + (sin(xmotion * 0.5) * ofGetWidth() / 16);

       float y = ofGetHeight() / 2 + (cos(zmotion * 0.75) * ofGetHeight() / 16);



       for (j = 0; j < 1; j += 0.002) {

           float jnorm_j = abs(0.5 - j) * 2;



           for (i = 0; i < count; i += 1) {

               float norm_i = i / count;

               float unit_i = 1 / count;



               float inorm_i = abs(0.5 - norm_i) * 2;



               //float n = noise(inorm_i + xmotion, jnorm_j + ymotion) / 128;
               float n = ofNoise(inorm_i + xmotion, jnorm_j + ymotion) / 128;



               float rad1 = radius + cos(xmotion * PI * 4 + inorm_i * PI * 32 + jnorm_j * PI * 8) / (0.4 + abs(sin(xmotion) * 2));

               float rad2 = radius + sin(ymotion * PI * 4 + inorm_i * PI * 32 + jnorm_j * PI * 8) / (0.4 + abs(cos(zmotion) * 2));



               float cx = rad1 * sin(norm_i * PI * 2 + n * 4 + xmotion + (j * PI * 2)) + sin(xmotion*2) * 24;

               float cy = rad1 * cos(norm_i * PI * 2 + n * 4 + ymotion + (j * PI * 2)) + cos(ymotion*2) * 24;



               float cx2 = rad2 * sin((unit_i + norm_i) * PI * 2 + xmotion + (j * PI * 2)) + sin(xmotion*2) * 24;

               float cy2 = rad2 * cos((unit_i + norm_i) * PI * 2 + ymotion + (j * PI * 2)) + cos(ymotion*2) * 24;



               ofSetColor(192 + inorm_i * 128 + jnorm_j * 128, 128 * (1-j), 256, 256 * (n * 32));

               ofDrawLine(x + cx / 2, y + cy / 2, x + cx2 / 2, y + cy2 / 2);

               ofDrawLine(x + cx / j, y + cy / j, x + cx2 / j, y + cy2 / j);

I’ve dropped the original Stroke values, (192 + inorm_i * 128 + jnorm_j * 128, 128 * (1-j), 256, 256 * (n * 32)), into ofSetColor, without the desired effect. What might I be doing wrong? How can i do the same thing in OF without using Stroke?

Thanks in advance :):smiley:

#2

hey, you should check into the examples. i.e.:
OF/examples/graphics/graphicsExample

#3

hey, amazing - thanks. I’m in there now. Which bit in particular? Forgive me, i’m a noob

#4

Hi, that’s one very big difference with processing, but it is easily addressable.
In processing you set color for the stroke(...) and the fill(...) and then you draw what ever shape. As well you can disable either with noStroke() or noFill().
openFrameworks takes a slightly different approach.
ofSetColor(...) sets the color of what ever you want to draw after it, either fill or stroke. You can control which by calling ofNoFill() which will disable drawing filled shapes, thus drawing their “stroke” or ofFill() which has the opposite efect.
As an example, in processing to draw a rectangle with a red stroke and blue fill you would put the following:

fill(0,0,255);
stroke(255,0,0);
rect(100,100,100,100);

while on openFrameworks you would do,

//draw the fill
ofFill();//this is set by default.
ofSetColor(0,0,255);
ofDrawRectangle(100,100,100,100); 
 // draw the stroke
ofNoFill();
ofSetColor(255,0,0);
ofDrawRectangle(100,100,100,100);

Behind the scenes processing is doing the same thing, and at the end this gives you more control on what you draw, and it is easier to debug as there is only one color you can set.

#5

Roy, thanks so much for the clear help and advice! Very much appreciated :slight_smile:

1 Like