Generating graphics algorithmically

General Questions
#1

I want to generate some vector graphic op art, kind of like Bridget Riley’sstuff. The one I’m interested in is very similar to this one.
Ultimately, I’d like it to consist of rectangles with widths of

ABS(SIN( (i+1)*PI()/32)-SIN( (i)*PI()/32) ) for i = 0 to 64

I know this can be done in Mathematica, but I was wondering if there is free software out there that can do this for me without much cost or effort.

I imagine that since it’s just describing rectangles, it might be possible to do in in postscript or html or something like that. I’m an incompetent programmer who last seriously wrote code in c some 20 years ago.

I’d like to be able to generate one repeating square block of it and import the vector graphic into Illustrator. Alternatively, it would be fine to generate an entire image, so long as it ends up in a mainstream vector format.

#2

If you can write it in Mathematica, might you be able to do it with JavaScript and SVG?

#3

This looks like a job for FORTRAN!

#4

Use JavaScript to draw it on the HTML5 Canvas.

#5

Hmm, you want a vector output? Maybe make an SVG from scratch?

#6

It was hard to get JavaScript to generate something the browser could save as an .SVG, so I wrote it in PHP instead:



<?php
// Header stuff
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">';

//This is where the graphics work happens
for ($i=0; $i <= 64; $i++)
{
	$width=ABS(SIN( ($i+1)*PI()/32)-SIN( ($i)*PI()/32) );
	echo '<rect x="',$i,'" y="0" height="100" width="', $width, '" />';
}

//Close the file
echo '</svg>';
?>

Are you sure the math is correct? The resulting widths are pretty tiny. Here they are:


0.098017140329561
0.097073181686568
0.095194355238334
0.092398755110627
0.088713304460908
0.084173496193605
0.078823051144043
0.072713497022902
0.065903672176189
0.058459158939808
0.05045165204581
0.041958268162932
0.033060803220922
0.023844944671021
0.014399446268966
0.0048152733278032
0.0048152733278031
0.014399446268966
0.023844944671021
0.033060803220922
0.041958268162932
0.05045165204581
0.058459158939808
0.06590367217619
0.072713497022902
0.078823051144043
0.084173496193604
0.088713304460908
0.092398755110628
0.095194355238334
0.097073181686568
0.098017140329561
0.098017140329561
0.097073181686568
0.095194355238334
0.092398755110628
0.088713304460908
0.084173496193604
0.078823051144043
0.072713497022902
0.065903672176189
0.058459158939809
0.05045165204581
0.041958268162932
0.033060803220922
0.023844944671021
0.014399446268967
0.0048152733278031
0.0048152733278031
0.014399446268966
0.023844944671021
0.033060803220922
0.041958268162932
0.05045165204581
0.058459158939809
0.065903672176189
0.072713497022902
0.078823051144044
0.084173496193604
0.088713304460908
0.092398755110628
0.095194355238334
0.097073181686568
0.09801714032956
0.09801714032956
If you want to see an example, this is the image it generates (zoomed in) and here’s the raw SVG. You can open it directly in Illustrator, but you have to zoom in quite far before you see the math… otherwise it just looks like a tiny bunch of lines.

#7

And if you don’t have access to PHP, you can run it in this online PHP sandboxusing the following code, stripped of the header and footer:



echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">';

//This is where the graphics work happens
for ($i=0; $i <= 64; $i++)
{
	$width=ABS(SIN( ($i+1)*PI()/32)-SIN( ($i)*PI()/32) );
	echo '<rect x="',$i,'" y="0" height="100" width="', $width, '" />';
}

//Close the file
echo '</svg>';

Save everything in the textbox into a .SVG file and you’re done.

#8

You’ll want to avoid jagged diagonal lines by using appropriate gray levels along boundaries. An easy way to accomplish this might be to make an oversize version in black/white, and then reduce the size (e.g. via Photoshop) to automatically provide appropriate gray levels at boundaries.

If you’re comfortable writing your own low-level loops to generate values, arranging them into a simple image format like PBM would be trivial. That might be easier than finding and learning an image-specific program.

#9

Hey, thanks for all the work. Yeah, my algorithm is probably incorrect, at least from a visual perspective. I’ll spend some time screwing around with the SVG file and see if I can’t come up with more appropriate values. When I was a kid, I used to just draw small squares and squares maybe 4 times bigger on a piece of graph paper and that works also, although I was thinking the sine wave would make for a more pleasing transition. I noticed there was a significant difference between the thinnest and thickest lines, but at least you guys got me heading in the right direction.

#10

Have a look at http://processing.org/. Processing is a java based language from MIT which is popular for generative art. One particularly nice feature is that programs written in processing can be automatically converted to javascript or android.

#11

missed edit window:

I missed your vector based requirement. Processing is raster based, though live programs can re-size at will if scaling is your issue.

#12

I am pretty sure this can be done (and done efficiently) in Postscript. It’s been a while since I mucked with code level stuff but the core language is designed to do things just like this, with the graphics being the primary objective instead of a follow-on to the math.

But the web languages are a lot more au courant, I guess.

#13

I sort of got the basics working, but not with satisfactory graphics. This morning the sandbox is giving me resource errors that were not happening super late last night. I think I need a development system that is a bit friendlier.

I’m currently building a supercomputer (comparatively for me, that is) and I’m going to do a fresh Eclipse install on it. That will work for a development environment for PHP, right?

Thanks again.

#14

AFAIK, NotePad on a minimum-spec Vista system will work for PHP. Everything else is gravy. :smiley:

#15

That’s overkill for something like this, but yes. Just get a WAMP Server package and you can edit the PHP in any text editor.

Nothing wrong with Eclipse, but it’s just complex and slow for something like that. And you need Java.

It doesn’t really matter which language you choose; this isn’t necessarily a difficult programming exercise. Get the math right and the rest is just drawing rectangles with variables. If you’re familiar with another language, use that in conjunction with SVG. The SVG syntax is dead simple and any programming language can generate the required text output for you.

#16

Thanks, the math is easy for me. I’m pretty sure I have an algorithm that is straightforward and visually acceptable. I had been screwing around with Android development some time ago, so I already have the Eclipse environment in place. I need a modern 64 bit computer as I’m upgrading all my apps to 64 bit versions. I’m gonna wait until I build my new computer to install Eclipse, and then I’ll revisit the problem. The last part for my build should be here on Wednesday!

#17

You might want to take a look at D3.