Processing 1.0 - Processing Discourse - simple line drawing with touchpanel

artsound

simple line drawing with touchpanel
Jul 7^th, 2009, 4:39pm

My child is non verbal and developmentally disabled, I am a crestron programmer and am developing an assitive communication device/play center for her on a PC with a touchpanel. She has always been adverse to holding a crayon or pen in her hand but I am thinking that if there was a program that would allow her interaction with finger-elbow-lips(she kisses the screen) to produce interesting visual stimulus she would benifit greatly--I see that there is a great deal of programming that is open source in processing and would greatly appreciate some suggestions and guidance for a starting off point codewise---crestron is not a programming language and the last programming I did in a language was Pascal ,Fortran and assembler about 30 years ago in college--- so definatly a proggramming language novice--this could do her a lot of good if I could get something going with your help

artsound YaBB Newbies Offline Posts: 17	Re: simple line drawing with touchpanel Reply #1 - Jul 7^th, 2009, 4:45pm Oh, I have done a minimal amount of Siml+ programming in crestron--it is a C like language but I did not do very much, and a few scripts with someone holding my hand

Cedric

Re: simple line drawing with touchpanel
Reply #2 - Jul 7^th, 2009, 8:52pm

That sounds like a great idea and probably not to hard to do.
Did i get it right, you are using a PC Setup with a touch panel. A Touch Screen right? So if you wanna keep that setup you dont have to deal with any hardware setup or experiments.
Nevertheless i think a multitouch interface where she gets feedback for every touch and also can use gestures would be a great benefit.

No as it is clear that windows7 will support multitouch there will be some not to expensive multitouch screens i guess .
Albatron produces one that is 22" and only cost 20% more than a usual Multitouch Screen :
http://www.slashgear.com/albatron-multitouch-22-inch-lcd-for-windows-7-0411899/

anyway. If you got a setup the rest is pretty easy. There are a lot of libraries for your needs. Multitouch, Gesture recocnition, etc. but to start you dont need any of them.

So you can for sure start with a simple sketch that only produces different shapes and/or sounds / color everytime she touches it.
I have to admit, i dont know much about how disabled people see their environment. So i dont know what would be appropriate and what would be to much information/interaction. But you can easily adjust it to her needs by adding more features. Maybe with the multitouch. Drawing lines between her 2 fingers... letting her catch some objects. maybe Gestures, so that a special effect appears when she draws a line, circle, etc.

I really like your idea and would like to help. Im pretty sure everyone else would love to, too. So tell us a bit more about your plans, what it should do and look like and you will get a lot of help here.

twitter.com/CedricKiefer

artsound

Re: simple line drawing with touchpanel
Reply #3 - Jul 8^th, 2009, 5:16am

thanx for your response--At least initially I will need to just use the simple touchscreen--although multitouch sounds interesting , my goal is to have 2 pc's (running xp)running with touch panels in diff parts of the house--and budget etc..
But this may not be a bad thing as I really want this to be a rewarding "finger is the crayon" type thing --goal being eventual pick up of crayon and drawing on paper, as well as rewarding interaction.
so here are my basic thoughts:
1-Simple drawing bassed on finger movement on touchpanel
2-Large brush size
3-Dark color background( maybe something going on that will draw her to the screen)
4-Bright color (or changing bright color) brush
5-It would be nice if the image could self erase after a certain amount of time maybe preseving newest input and dumping oldest
6-possible link to a .wav file for auditory reinforcement(Mom's voice "good girl" type of thing) whenever she touches screen

I know that's alot but any starting point could be built on.
when she pushes a button now she gets a word spoken or a movie played which is rewarding to her--she is also rewarded by seeing her dad jumping up and down and laughing cause she pushed a button on her own Grin

Cedric

Re: simple line drawing with touchpanel
Reply #4 - Jul 8^th, 2009, 10:22am

Ok, i started with a really crappy drawing programm but i hope it gives you a good point to start.

You can check it out here, also the sourcecode :
http://www.dec32.de/public/p5/simpledrawing/

I interpreted pressed mouse button as a "touch" but you can change that to mouse movement, etc if you want to.
I tried to quickly imitate drawing with a brushStroke.
You can change it to whatever you want. Check out :
http://processing.org/learning/topics/customtool.html and
http://processing.org/learning/topics/pulses.html
http://processing.org/learning/topics/pattern.html

Change color by pressing one of the colored rects and delete everything by pressing the red X.

If you want it to be deleted the way you mentioned you need to use an array instead. I couldnt find the example for that, but im sure there was one...

Anyway I hope it helps

« Last Edit: Jul 8^th, 2009, 12:21pm by Cedric »

twitter.com/CedricKiefer

Cedric

Re: simple line drawing with touchpanel
Reply #5 - Jul 8^th, 2009, 12:05pm

i wrote a quick example of how to stare it in an array:

void setup(){
size(400,400);
background(255);
frameRate(40);

for(int i=0; i<anzahl; i++){
oldX[i] = 0;
oldY[i] = 0;

}

}

int anzahl=9;
float[] oldX = new float[anzahl];
float[] oldY = new float[anzahl];

void draw(){

float[] tmpX = new float[anzahl];
float[] tmpY = new float[anzahl];
for(int i=0; i<anzahl-1; i++){
tmpX[i+1] = oldX[i];
tmpY[i+1] = oldY[i];
}
tmpX[0]=mouseX;
tmpY[0]=mouseY;

oldX=tmpX;
oldY=tmpY;

background(255);
for(int i=0; i<anzahl; i++){

fill(200,250,0);
ellipse(oldX[i],oldY[i],30,30);

}

}

twitter.com/CedricKiefer

artsound

Re: simple line drawing with touchpanel
Reply #6 - Jul 8^th, 2009, 3:33pm

WOW, Many thanx Cedric--I am trying it out as we speak--made it bigger and had to adjust the touchpanel to "Draw" but man is it cool--I got her to try it guiding her hand a little bit--and she seems to like it but she always is a little shy with new stuff at first--Many Many thanx man this is great--where should I plug in the array code? and where can I look to figure out how to make the brush bigger Grin

Cedric

Re: simple line drawing with touchpanel
Reply #7 - Jul 8^th, 2009, 3:43pm

i was about to go to bed. but i will add the array stuff tomorrow and maybe add different brush strokes too.

And try to add some comments.

basicly the drawing happens here :

Code:


 if (mousePressed && (mouseButton == LEFT)) {
    stroke(brushColor,brushTrans);
    strokeWeight(random(1,10));
    line(mouseX, mouseY, pmouseX, pmouseY);
    noStroke();
    fill(brushColor,brushTrans);
    if(frameCount%5==0)ellipse(mouseX+random(-15,15), mouseY+random(-15,15),random(15),random(15));
  }

its a bit more complex as it has to be cause i added the splash effects etc. but if you change the above part to :

Code:

 if (mousePressed && (mouseButton == LEFT)) {
    fill(brushColor,brushTrans);
    ellipse(mouseX, mouseY,10,10);
  }

it just draws some ellipses along your drawing path. 10 is the ellipse Size (width,height) in this case. maybe that helps to understand...

twitter.com/CedricKiefer

artsound YaBB Newbies Offline Posts: 17	Re: simple line drawing with touchpanel Reply #8 - Jul 8^th, 2009, 7:01pm I tried this: strokeWeight(random(5,30)); and got a much fatter line without loosing your random effect this is very cool stuff you do

Cedric YaBB Moderator Offline Posts: 1838	Re: simple line drawing with touchpanel Reply #9 - Jul 8^th, 2009, 9:55pm great. try to take a look at the links i posted. there is shown how you can define an pulsing flower brush for example etc.
	twitter.com/CedricKiefer

artsound

Re: simple line drawing with touchpanel
Reply #10 - Jul 9^th, 2009, 5:50am

cool I will look closely at the code in the examples you linked
I am playing around with the array by changing the value of "anzahl" so if I am understanding correctly with a frame rate of 40
"int anzahl=80;" will give me a 2 second memory of mouse movement
is there a way to plug in a custom shape or gif rather than an elipse?
I'm thinking a gif of a goldfish (she loves fish) would be following her finger around the screen
I know you sent the array as a way of showing me how to erase older input--but I have got both of your sketches running in a "game " section of her X-panel GUI Grin

Cedric YaBB Moderator Offline Posts: 1838	Re: simple line drawing with touchpanel Reply #11 - Jul 9^th, 2009, 6:12am thats pretty easy, take a look at http://processing.org/reference/PImage.html and http://processing.org/reference/PShape.html to add images and shapes.
	twitter.com/CedricKiefer

artsound

Re: simple line drawing with touchpanel
Reply #12 - Jul 9^th, 2009, 5:11pm

I was able to patch this together bassed on the commands you suggested --I know you can't see it without the data file but I do not know how to post them--it is a little slow probably my gif and jpg are too big but it actually works to her advantage as a fish appears with every individual touch--I would love to have the gif background be see thru--or maybe thats why you suggested the vector graffics--how can I post something that can be opened and seen?
now I want to learn to play a wave on first touch
maybe praise when she does some drawing
or "fish" when she starts a fish gif

void setup(){
size(1000,660);
background(255);
frameRate(40);

for(int i=0; i<anzahl; i++){
oldX[i] = 0;
oldY[i] = 0;

}

}

int anzahl=30;
float[] oldX = new float[anzahl];
float[] oldY = new float[anzahl];

void draw(){

float[] tmpX = new float[anzahl];
float[] tmpY = new float[anzahl];
for(int i=0; i<anzahl-1; i++){
tmpX[i+1] = oldX[i];
tmpY[i+1] = oldY[i];
}
tmpX[0]=mouseX;
tmpY[0]=mouseY;

oldX=tmpX;
oldY=tmpY;

PImage c;
c = loadImage("underwater.jpg");
background(c);
for(int i=0; i<anzahl; i++){

fill(200,250,0);
PImage b;
b = loadImage("fish.gif");
image(b,oldX[i],oldY[i],70,70);

}

}

Cedric

Re: simple line drawing with touchpanel
Reply #13 - Jul 9^th, 2009, 10:01pm

The first problem is a common one :
you shouldnt put loadImage in the draw method cause then you load it every frame, that slows down your programm a lot.

so it should look like this :

Code:

PImage b;
PImage c;
void setup(){
size(1000,660);
background(255);
frameRate(40);

b = loadImage("fish.gif");
c = loadImage("underwater.jpg");
for(int i=0; i<anzahl; i++){
  oldX[i] = 0;
  oldY[i] = 0;

}

}

int anzahl=30;
float[] oldX = new float[anzahl];
float[] oldY = new float[anzahl];

void draw(){

float[] tmpX = new float[anzahl];
float[] tmpY = new float[anzahl];
for(int i=0; i<anzahl-1; i++){
  tmpX[i+1] = oldX[i];
  tmpY[i+1] = oldY[i];
 }
 tmpX[0]=mouseX;
 tmpY[0]=mouseY;
 
 oldX=tmpX;
 oldY=tmpY;
background(c);
for(int i=0; i<anzahl; i++){

 
  fill(200,250,0);

  image(b,oldX[i],oldY[i],70,70);

}

}

To use transparency just use a transparent gif like this one for example : http://www.aperfectworld.org/clipart/cartoons/fish.gif

or use PNG with transparency if you want smooth edges.
Or like you mentioned a SVG file.

For sound playback you should take a look at the sound libraries,
http://processing.org/reference/libraries/#sound
i havent worked with any of them but it looks like Sonia would do the job : http://sonia.pitaru.com/

Shouldnt be to hard to play a sound at the first touch and then everytime she changes the shape or color. so that it says "red" or "fish" when she changes the brush. If you have Problems, let me know

twitter.com/CedricKiefer

artsound YaBB Newbies Offline Posts: 17	Re: simple line drawing with touchpanel Reply #14 - Jul 12^th, 2009, 9:51am that works great--now I will take a look at the wav file setup