jeudi 31 mars 2011

Printing material experiments

The students were obliged to experiment with paper....what is the effect of material?
Oooooh....a lot!



Hilde and Susanne







Martijn's plotting drumkit

Martijn came up with something special, (as usual!).
He found a possibility to connect his drumkit to Processing and using the plotter lib to plot his drumming etudes:



Guest lecturer Petr Blokland

Tuesday afternoon we had Petr Blokland talking about his experiences with letter design. Great lecture!





Using a CNC script to plot

Aldje came up with this link:

CNC plotter script
http://www.larsby.com/johan/?p=761

This is the script, making horizontal lines of a png image:

www.contrechoc.com/blogPics/plotter/cnc_plotter.zip

you have to add the plotterlib (either the one of Edwin, or the one of the blog) yourself :-), nice exercize!


Caroline



Plotting from Adobe Illustrator

To install:
http://www.ricardmarxer.com/geomerative/
as always unzip and place in Documents/Processing/libraries
and Edwin Jakobs has made a first start to get to a plotter with this script:

http://www.contrechoc.com/blogPics/plotter/plotsvg.zip

Edwin told us that this example was not really working well and should be modified.

You need his plotter library:

http://www.contrechoc.com/blogPics/plotter/hpgltest.zip

This is the total library of Edwin Jakobs.

http://www.contrechoc.com/blogPics/plotter/HPGL-0.1.0.zip



Lotte, Delany, Rivke









Juan

mardi 29 mars 2011

5x7 font workshop

basicDrawing_Plotter_5x7.pde

this is the template for the workshop

updated and tested
left top: the 5 x 7 matrix
just next to it the drawing area (basic area....)
then two "letters" are printed next to each other...

hitting a key plots the letter and saves the file on that letter.txt




tijn





Tim

lundi 28 mars 2011

Drawing and then plotting

With the script in the first link you can draw with the mouse ( by clicking ) and if you think the result is ok, by hitting a key on the keyboard the plotting commands are dispatched and you plot the drawing.

basicDrawing_Plotter.pde

(Update: this sketch detects if the plotter is attached and when not the error is caught and does not cause any damage.)

You can do the same without the plotter attached, but then the list of point of the drawing is saved to a file in your datafolder (of the sketch) and can be loaded later:

plottingletters_saveFile.pde

ok and then you can retrieve and plot this linedrawing using this sketch (if the plotter is connected). You only have to change the name of the file to load in this line of code:

String myName = "a";

(in the function draw() )
Now he is searching for a textfile called a.txt in the sketchfolder (in Documents Processing )

plottingletters_loadFile.pde

My name is BEAM from now on!

Very Basic Processing Plot Script

What is the absolute minimum we need for making a plotter print?

In our case, Processing and then this script...

basicPlotterExample.pde

Here you can see what happens with the command plotterLine ( x, y, c, d);

basicPlotterExample2.pde

Here we have myRect, myQuad, and myRectRotated( point2 ,30, 50, 15 );

we also have not x, y for a point nut a "point":

You can make a point like this:
MyPoint aPoint = new MyPoint( x, y);
and you can fill in aPoint, instead of x,y....

mercredi 23 mars 2011

Plotting Bezier curves

In the post about the Processing plotter library we practiced drawing straight lines. In fact we could spend a lifetime making exiting things with abstract patterns like this and many artist do this with great results.

But then, maybe, we would like to make a curve...

Processing has functions like arc and curve, but the curve which is used in most other software is the Bezier curve. There is a great tutorial about the Bezier curve on the Processing site:

bezier curve in processing http://processing.org/learning/curves/

But making a Bezier curve on the screen is different from plotting the Bezier curve. We need points, to plot the lines between the points on the Bezier curve.

Processing also has a solution for this:

points for plotting http://processing.org/reference/bezierPoint_.html

Having the points we can simple plot the line connecting the sequence of points.

We first master this on the screen and then proceed to plot the shapes.

Now we can do real drawing, designing letters and fonts and plot them.



You can find an example with the current lib here, the colored Bezier points can be changed like this: press the spacebar when you are near a Bezier anchor point or a control point and gently drag it along with the cursor. The curve is updated immediately.

mardi 22 mars 2011

Starting a plotter lib in Processing


Why start a library when the commands are that simple, Pen Up, Pen Down, Pen Absolute 200,300...?

Because we want to get the plotter commands from coding and the Serial commands are Strings, pieces of text. We have variable numbers for the points. We don't want to put all the points of a Lissajou figure in a piece of text by hand, do we?

So we make our first function for drawing a line

void myLine(int p1x, int p1y, int p2x, int p2y)
{
  //go to spot p1
 myPort.write ( "PU;PA" + str(p1x) + "," + str( p1y) + ";");
 //draw line to spot p2
 myPort.write ( "PD;PA" + str(p2x) + "," + str( p2y) + ";PU;");
}


This functions takes care of making the right string and sends it to the plotter. The variable point coordinates are included in the string using the str() function. This function makes a String from a number. So instead of 5 like a number str(5) is like "5" as text.

We could stop here and we would already having a lot of fun. For the students who are very brave explorers we go on:

What could we add to our library?

Well in our world of rectangles, in fact nearly all objects around us are rectangular, refrigerators, books, chairs, tables, we need a function to plot a rectangle. But couldn't we just draw a rectangle like this?


myLine(0, 0, 0, 200);
myLine(0, 200, 200, 200);
myLine(200, 200, 200, 0);
myLine(200, 0, 0, 0);


Yes of course, but what about draw 100 rectangles, are you going to do this every time using these four lines of code? We just want one function!


function myRectangle ( point leftTopPoint, point rightTopPoint, point rightBottomPoint, point leftBottomPoint)

{
myLine(leftTopPoint, rightTopPoint);
myLine(rightTopPoint, rightBottomPoint);
myLine(rightBottomPoint, leftBottomPoint);
myLine(leftBottomPoint, leftTopPoint); 

}






But now we see it is would be great to have something which is "a point", consisting of two coordinates, x and y. This point should be accepted by our first function myLine. So we have to enlarge the possibilities of myLine.

This is just what I have done, adding Quads's, Rectangles, and a possibility to rotate points, some results:






You can download the sketch here:
plotterLibExample.pde


For the ones working with the lib of Edwin Jakobs, here is his lib.
hpgltest.zip
Unzip this folder, and open and run the example, hpglTest.pde. The library sit in the tab next to it.



(it starts with the lissajou of the former post, but you can try out hitting the keys 0,1,2,3,4,5,6,7,8 and you get all kind of experimental stuff. Sometimes interactive, nearly alive. Feel free, or better, feel obliged to experiment!)

First Lissajou coding examples

To get a taste of the Lissajou fun, we do a few simple coding examples.
First start with the circle, from two old friends from maths, the sine and the cosine:


float t = 0;

void setup() {
  size(400, 400);
 stroke(125);
}

void draw() {
 
  while (t<7000){

  int x = int(200 + 150 * sin ( t/100 ) );
  int y = int(200 + 150 * cos ( t/100 ) );

  ellipse(x,y, 2, 2); //plotter point
 
  t++;// counter
  }
}


What you get is a nice circle.

Then do this: adding another sin()...change this line starting with "int x =" into 

int x = int(200 + 150 * sin ( t/100 ) * sin ( t/99 ) );


and you get a nice knotlike figure, you can very the density with the 99 parameter.

(hm some problems with the images?)






Fun2.
Start with a double knot, drawing parallel lines between these points, nice figure?
(In fact where you seem to perceive lines, there are rather big jumps in connections, start playing with the sketch!)


void draw() {

while (t<700){

int x1 = int(100 + 100 * sin ( t/10 ) * sin ( t/15 ) );
int y1 = int(200 + 140 * cos ( t/10 ) );
int x2 = int(300 + 100 * sin ( t/10 ) * sin ( t/15 ) );
int y2 = int(200 + 140 * cos ( t/10 ) );
line(x1,y1, x2, y2); //plotter line 
t+=1;// counter }


Then fiddle with the parameters in one knot:

void draw() {

while (t<700){

int x1 = int(100 + 100 * sin ( t/100 ) * sin ( t/15 ) );
int y1 = int(200 + 140 * cos ( t/100 ) );
int x2 = int(300 + 100 * sin ( t/10 ) * sin ( t/15 ) );
int y2 = int(200 + 140 * cos ( t/10 ) ); 
line(x1,y1, x2, y2); //plotter line 
t+=1;// counter



sometimes you get chaos, sometimes you get beautiful order.

You can plot all the results, but then you burn a lot of pens. First exploring the possibilities of certain formula's on screen seems to be a good idea. We can vary the parameters using the mouse position, mouseX, mouseY.

Looking at the different drawings on screen we can choose some we like, and discard others.

You can download the sketch here:
plotterLibExample.pde

Plotter Pencils

The fun of a plotter is that you can use all kinds of drawing instruments, like pencils, crayons, even brushes:



We will be experimenting a lot with the pencils, and with the different kinds of paper.

Examples of wonderful things made with plotters

This post is just a bunch of links to great visual material on the web.
Use it as inspiration!

http://vimeo.com/9197319

http://music.columbia.edu/cmc/chiplotle/
http://music.columbia.edu/cmc/chiplotle/gallery/

http://scienceservice.si.edu/pages/008006.htm

Vera Molnar, an artist in the seventies did an awful lot of plotter drawings.

http://dam.org/exhibitions/plotter-drawings-from-1960s
http://www.secondenature.org/Vera-Molnar-Plotter-Drawing.html

http://www.decordova.org/art/exhibition/drawing-code-works-anne-and-michael-spalter-collection

http://www.verostko.com/archive/writings/epigen-art-revisited.html

Of course when coding is a way of drawing you are in the neighborhood of science...
Using algorithm to generate drawing:
http://www.verostko.com/algorithm.html
http://www.verostko.com/alg-isea94.html

Lissajou drawing is of course very well to do for plotters, but is it art?
http://www.boostworthy.com/blog/?p=92
(how is your Spanish?)
http://www.chochitopelao.com/las-curvas-de-lissajous/

When you are bored with the all to clean drawing styles you could start introducing "random" concepts
http://processing.org/learning/topics/scribbleplotter.html

There is a very real virtual hp plotter museum!
http://www.hpmuseum.net/exhibit.php?class=4&cat=24

More links will be added.

Petr Blokland our guest professor send us these links:

Hilde and Susanne

Marc

How to send commands to a plotter?

We use a serial connection, so we need software to talk through this serial port. This can be done in various languages.
We use Processing. ( www.processing.org )

But we also need a driver for the USB serial Converter, we use a generic one Prolific2303:
http://sourceforge.net/projects/osx-pl2303/

In the processing examples we find in File ->Examples ->Library ->Serial the sketch for sending commands using a serial port.

In the coding we connect to a certain port from the list Processing finds.
We get this list like this:

println(  Serial.list() );



Then we have to choose from this list: (this list can vary, then we hav to choose another number from the list...)

 String portName = Serial.list()[0];



and initialize this connection.

  myPort = new Serial(this, portName, 9600);


And then we can simply send commands like this:

myPort.write("PU;");


The next step is to shift these raw commands to a library and just use our very own functions:
for example

myLine ( point1, point2 );



the myline being a function using the raw commands.

Remark: Processing sends the commands way too fast for the plotter, so I had to add a delay(250) in the code, which makes the plotter very happy. Maybe we could speed it up to its limit in a few experiments...

So the plotter function in my lib is this:


void plotterLine(float x1, float y1, float x2, float y2) {
println("plotterline");
myPort.write("PU");
myPort.write("PA" + str(x1) + "," + str(y1) +";");
myPort.write("PD");
myPort.write("PA" + str(x2) + "," + str(y2) +";");
myPort.write("PU");
}


And this is where I call the plotterLine, because I first check the screen result varying with mouseX and mouseY before plotting, I have added a flag ( printOnce) so that when I decide to print (in my code press the key 'p' that the plotter gets the drawing commands only once.

if ( printOnce == 1 ){
float scaleF = 20;
plotterLine ( int(x1*scaleF), int(y1*scaleF), int(x2*scaleF), int(y2*scaleF));
println ( str(x1*scaleF) + " " + str(y1*scaleF) + " " + str(x2*scaleF) + " " + str(y2*scaleF) );
delay(250); //otherwise the commands are coming in to fast
}



<img alt="" class="aligncenter" src="http://www.contrechoc.com/blogPics/plotter/pi10.jpg" title="plotterdesign" width="400" />

What to send to a plotter?

We have a serial connection to a plotter. Than we can send commands to the plotter using this serial connection. We can send so called Strings, pieces of text.

First of all, what will be send?

First initialize the plotter:
send "IN;"

Then drawing
Pen Up: "PU;"
Pen Down: "PD;"
Draw a line (if Pen Down, otherwise Displace the plotterhead) to position x,y: "PAx,y;"

In fact there are other commands, like "CIr;", draw a circle with radius r, but we can do that also with our own sequence of commands, using coding.

Other commands can be found here:

http://www.tech-diy.com/HP%20Graphics%20Language.htm

But after that basic command to draw a line from the current position to an absolute position (PA stands for Position Absolute) people tend to make libraries. These libraries make life easier, that is the libraries take care of complex sequences of commands.

These more complex commands will be taken care of in the post about Processing.

How to connect to a plotter

We need technical stuff from the digital Middle Ages to connect to a plotter.
Ever heart from a serial port???

We need a USB Serial converter, we can by these at dealextreme.com, but the problem is we want to connect to the plotters using  both MACOS and Windows. These converters need a driver which is usually only for Windoes. SO beware. Eventually I bought USB Serial converter at amazon.com, checking the OS.



Then we need a connection between the serial plug and the serial in of the plotter. This is the 25 pins so called printer plug.



Beware, because I also found some serial printer port connectors which didn't work. Opening these connectors I found out that they had other connections and I used my soldering device to get the wiring right (for our plotters that is.)





The schema for the connections:


driver
for the plotter we need a driver
http://sourceforge.net/projects/osx-pl2303/


dip switch
The setting of the dip switch is critical:
here an image for a HP 7475a:
http://www.flickr.com/photos/24428637@N06/2954809025/

from this blog:
http://grandahl.net/feed/?p=19




What plotters?

Some pictures of some of the plotters we will use (or try to use....)









Mainly A3 plotters, but we also have Wilco's monster A0 plotter....



The plotters have switches to get the right settings for the serial connection. For example baud rate.
We use baud rate 9600.

One of the settings will be shown here:

WDKA Plotter Design

What about ... "plotters"?
Is there more to plotting than to printing on a modern device?
In a group of about 25 people we will investigate the things you can do with plotters (of about 30 years old! Certainly older than the students, most of the time older than the teachers, but the plotters still do a good job.).

About drawing from coding, algorithmic drawing?
About design of fonts?
About data visualization?

What plotters?

But first of all:
how to connect to a plotter?
How and what to send to a plotter?

Examples of wonderful things made with plotters?