next »

[Bones]

Short for Calligraphic Line
Caliline
(java client on website)

School has introduced me to Processing
For a school project I had to make something that interacted with the mouse so I made a drawing application.
The idea came from some of the random gesture doodles I do occasionally.
Also this example helped me get started.



I've also heard experiences of it running slowly on peoples computers so it's a toss up for it to work.  






Examples done by other people:
Tim Barnard (used a tablet)



I'd say the result was fairly successful and rather fun to mess around with.
I've recently added invert color so you can draw on top of the black with white.
If you come up with anything good I'd be happy to see it posted.  

I find it to be an application that encourages surrealist automatism.

[Theophilus]

I like it a lot. I wish transitions were made smoother, (When you move the mouse violently, there is a pixel-wide line to a gargantuan trail of a paintbrush tool) but all around it's very good. Maybe a golden-ratio rectangle for a canvas would be a bit better; I can't stand drawing on a square digitally.

As for the page, I'd center the alignment.

[biomechanic]

A switch to invert width control - so that slower is thicker, faster is thinner - would be nice.

[Bones]

Whoops, resolution should be 800x600 not 640x480
I'll try to center it out and fix the resolution.

Except for the fact that it would be rather hard, since the width of the brush is controlled by the position of your mouse - previous position of your mouse/10
So basically it would need to have some kind of limit on how fat it would be when you moved slowly.

Code:

  float a=abs(mouseX/10-pmouseX/10);
  float b=abs(mouseY/10-pmouseY/10);
  float c=sqrt(pow(a,2)+pow(b,2));
  strokeWeight(c);

  if(mousePressed) {
    line(mouseX, mouseY, pmouseX, pmouseY);

I don't think it's generally possible to make it work in the opposite way.
I've tried multiplying, adding, inverting variables and nothing seems to work.  

[Christoffer]

Just have a max_width variable and make the width = max_width - clamped_speed.

Also, you could just move a variable towards the speed value with deltaTime.

Hope that helps!

[Bones]

Oh hey what do you know it was easier than I thought it would be.  
I have to say, this new form of line looks A LOT like something Jackson Pollock would make.

Pollock Line

So, by doing the reverse the actual calligraphic line is lost, hmm.. go figure eh.



and a color randomizer for fun. (color randomize doesn't seem to work in browser)

[Bones]

A switch to invert width control - so that slower is thicker, faster is thinner - would be nice.

By request, I have added the ability to do just that.

Left click for thin to thick : Right-click for thick to thin

Caliline
Would sure like to see your best creations.
Cant seem to export an image so you will have to print screen.

[HDSanctum]

Good start but a smoother transition, anti-aliasing and hold pen for splodge build up would make it easier to make the sexy splodges in your physical examples.

[biomechanic]

The width/speed inversion felt like a good idea at the time

Didn't reaaly make use of the width change feature

[Bones]

Good start but a smoother transition, anti-aliasing and hold pen for splodge build up would make it easier to make the sexy splodges in your physical examples.

I don't think it will smooth my transitions between lines.

1) Its width is determined by your speed and if your speed changes dramatically then it's going to be a big chunky transition.

2) smooth(); makes it vector.

I'm too much of a pixel art enthusiast to do such a thing, I like the aesthetic feel of raw pixels.

3) I repeat the speed of your mouse determines the width of your brush, if your mouse is moving at 0 speed. It produces a 0 sized brush.   which means no sexy splodges.

Code:

  if (mousePressed && (mouseButton == LEFT)) {
    strokeWeight(c);
  } else if (mousePressed && (mouseButton == RIGHT)) {
    strokeWeight(25/c);
  }

In the right mouse button, I can't divide 0.

The width/speed inversion felt like a good idea at the time

Didn't reaaly make use of the width change feature

From what I can see in your drawing you used a tablet.
You will notice a big difference if you use your mouse.

(EDIT) Nvm, I just plugged in my tablet and it seems to do pretty much the same thing, it's just weirder to use right-click as a main drawing tool.

Looks like you need to get more fearless with your drawing speed, I'm sure you don't want to because it's not super smooth. >,< but you've gotta work with what you get.
Liking the soldier guy with the spear and shield can tell you started to loosen up with those lines.

[Bones]

To try and add "Splodges" I tried creating some ellipses.
Right now they are set by middle mouse button.
I have *now added this to the web-version.

The circles could be set to two options, size based on speed or size = random
Right now they are strictly based on speed.

Do they look useful at all?
Not sure how I feel about the circles having strokes but it doesn't look too bad of an addition.
I just realized it was inverted, you get white circles when your on black, and black circles when your on white.



toStroke OR noStroke(); ?
That is the question.

[HDSanctum]

Smooth looks great but I can understand if you want the pixelly edges for now.

As for the transitions, you could get it to work by interpolating the line width between two mouse coordinates instead of setting the width to the speed at the next point or whatever you are doing. Linear interpolation is the easiest, but I would recommend playing with different kinds of interpolations at a later time.