GDV P.2.0 Hello, shape

This chapter was a kind of déjà vu because I already started making variations in January 2013. Here are the results of that session:
So I thought it would not be so much work to redo everything. But that was a wrong assumption. Here is the description from the Generative Design book of the Hello, shape chapter. The shape is reduced to one pixel when the cursor is located in the middle of the upper border of the display window. The x-value of the mouse position sets the length of the lines. The y-value sets the value and number of the lines. You can find the original outcome and code here:

I began with a minor change in the sketch. Changing the background color, stroke weight and transparency.

In the next variation I found that when your cursor is at the lower half of the display window  it could show the lower part of the circle. If you mouse over to the upper part of the display window  it displays the top half of the circle. Also replaced TWO_PI with radians because that gives me more freedom to choose a specific angle. And it is more readable for humans. All trigonometric functions in Processing need their parameters to be specified in radians.

Although it is possible to draw a circle with rectangles. It is obvious that you can draw a rectangle with rectangles.

Replaced the rectangles with circles / ellipses.

It seems that it is also possible to draw a rectangle with ellipses.

This approach shows a circle instead of a square on its point as the preview promised. Just click on the display window and the circles will appear. Drag the mouse to get more circles. I used radians (359.7) because the circles would close best with using this ridiculous number. But if you look closely there is still a very small line of gaps on the right side (or on the left side).

The circle resolution is here somewhere between 2 and 10. The preview also promises a square on one of its points but the program displays other geometry. Except if you move the mouse horizontally in the upper half of the display window it displays a rectangle on its point.

This variation draws a starlike image by repeating the x and y values divided by 2.

Another starlike variation. Increased the radians to 360 and doubled the x and y values.

Again a variation of a starlike image. Subtracted the y-values from the x values. And adding x-values to y-values. And here things are getting out of hand in Processing. The image quality was getting very bad. A lot of jaggies appeared. And I really did not know what was going on. Switched smoothing on but that gave no better result. smoothing is switched on automatically in Processing 2 anyway. So I checked the P2D, P3D and JAVA2D rendering modes. But using those did not improve the rendering quality.

And I still had not found what the reason was for this bad rendering quality. So I thought maybe there is a way to work around it. So I introduced some randomness in the vertices.

At this moment I had arrived at the same point where I was in January 2013. I compared the rendering quality with the images which I had made at that time. There was a big difference. The rendering in January 2013 was much smoother. What did I do wrong? Went to the main Processing page and checked:
I found a paragraph called ‘Drawing Quality’. It states: ‘Lines and strokes sometimes uglier – When using the default renderer, a stroke () on a shape may be uglier than in the past, due to recent changes that Oracle has made to Java. Usually this is a problem with single pixel strokes and rough edges, or thick strokes with many steps. To fix the problem, add hint (ENABLE_STROKE_PURE) to the setup () block of your sketch. We don’t enable it by default because it makes all sketches considerably slower.’ I think this is really weird. But maybe I am the only Processing user who cares about rendering quality 🙂 Well, I don’t mind if it makes my sketches slower because we are not dealing with animation. So I added the hint (ENABLE_STROKE_PURE) to the setup() block of my sketch. And (to my surprise) the problem was gone and solved. I also did that backwards to the sketches which lacked image quality.

In this variation I randomized the angle between 90 and 270 radians. Added one more color to the 1-4 keys.

Introduced a starting and ending angle. Increased the colors from the keyboard keys 1-7. In which 7 is a kind of black eraser.

Made the start angle 360 and the end angle 270. Keeping the colors the same as in the previous program. And that finishes the ‘Hello, shape’ sketches.

There is one more thing which I have to keep in mind. I had to comment out the hint (ENABLE_STROKE_PURE) in the JavaScript versions. Otherwise nothing would be rendered. Beside of that Processing.js gives an: Unable to execute pjs sketch: ReferenceError: Can’t find variable: ENABLE_STROKE_PURE. And one more last thing. If you comment that line out. The rendering quality of Processing.js with ENABLE_STROKE_PURE disabled is of the same rendering quality as Processing 2 with the ENABLE_STROKE_PURE enabled.


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s