Exporting a little 2d sketch to transparent trimmed png

Dako_Jaxx

Hey everyone,

After a couple hours of browsing, reading and trying I'm finally going to give in to asking... I've got this super small sketch for children to start playing with code. The idea is for them to make their own little "Monster" or "Hero" witch we will then use in our own game. (where we use a transparent "character.png" file).

We first thought about screenshotting the sketch> Photoshop>Crop>Remove background>Trim. But this is a bit too much hassle and we want it to be easily accessible for children.

So my question is, can you do this all in processing, with perhaps the press of a button. This is the code:

void setup(){
  size(500,500); //de grootte van je canvas in pixels
  frameRate(60); //de frames per seconde waarin je spelletje draait
}









void draw(){
  background(255,255,255,0); // de achtergrond met tussen haakjes de kleur
  noStroke(); // deze regel code zorgt er voor dat je vormpjes geen omlijning krijgen

 //rect tekend een vierkante. Tussen de haakjes staat de positie en de groote. (Positie op de X as, Positie op de Y as, Breedte, Hoogte). 


//cirkel
fill(200,164,21); //kleur
ellipse(230,375,111,151);

fill(222,17,17); //kleur
ellipse(235,430,50,64);

fill(232,9,9); //kleur
ellipse(185,437,63,42);

fill(255,223,9); //kleur
ellipse(245,281,111,151); //cirkel met posities en BREEDTExHOOGTE

//cirkel
fill(202,202,208); //kleur
ellipse(216,242,70,70);

//cirkel
fill(143,143,146); //kleur
ellipse(274,243,70,70);

//vierkantje  
fill(255,0,0); 
rect(209,279,70,70);

if (key=='d' || key=='D'){

Code to remove background, trim and save to "Character.png" 

}

Seriously any help would be appreciated! (Comments are in dutch because we are creating this for dutch kids)

GoToLoop

As you mighta noticed, your posted code is a mess now!
Please, edit your code, select the code text, and hit CTRL+K in order to format it!

Dako_Jaxx

Thank you GoToLoop, was looking for that.

GoToLoop

We can draw in an off-screen PGraphics object.
We can choose its dimension and other characteristics w/o interfering the the main canvas:
http://processing.org/reference/PGraphics.html

I've got 2 online examples which draws the "sprite" inside a PGraphics. Check them out:

http://studio.processingtogether.com/sp/pad/export/ro.9ozYNbweyOpjT/latest
http://studio.processingtogether.com/sp/pad/export/ro.9ck0KLYubLcZG/latest

Dako_Jaxx

Arg, I just accepted both of your comments as an answer which I really didn't mean to do, could you somehow delete the acceptance?

Your examples are good but we are creating something for kids who have never ever dealt with code before, so the keyword I'm going to use is Simple.

We want to let the kids make their own little monster or hero, by just copying and pasting the circle and the rect code. Then using tweak mode to tweak stuff to their liking.

As your program is pretty cool, it is also way too complex for the kids (And also for me). Isn't there a simpler way to do this?

colouredmirrorball

You could for example put it in a separate tab and tell the kids to not edit it.

You'd better put the code to do this in the mousePressed() method as now, it will continuously execute as soon as someone presses the D key.

(Also, tekent* ;) )

GoToLoop

I thought you wanted some kinda image cropping. Like make a sprite outta your "doll" there!
Now I'm confused about what you wanna accomplish! :-S

... let the kids make their own little monster or hero, by just copying and pasting the circle and the rect code.

Do you mean copy 'n' paste the code snippets which render the geometric figures?
Problem is, those ellipse() & rect() primitives need coordinates & dimensions & color.

Perhaps you should try the intro video Hello Processing:
http://hello.processing.org

Also, Khan Academy got a web programming environment which allows to modify the code at the same time it's running.
So we can see the modification results on-the-fly:
https://www.khanacademy.org/cs

GoToLoop

Besides KhanAcademy.org, which uses Processing under JavaScript, there's also Greenfoot.org, which is Java for teens:
http://www.greenfoot.org

_vk

This is from save() reference:

All images saved from the main drawing window will be opaque. To save images without a background, use createGraphics().

maybe like this...

PGraphics pg;

void setup() {
  size(500, 500); //de grootte van je canvas in pixels
  pg = createGraphics(500, 500, JAVA2D);
  frameRate(60); //de frames per seconde waarin je spelletje draait
}


void draw() {

  background(255, 255, 255); // de achtergrond met tussen haakjes de kleur



  pg.beginDraw();
  pg.noStroke(); // deze regel code zorgt er voor dat je vormpjes geen omlijning krijgen

  //rect tekend een vierkante. Tussen de haakjes staat de positie en de groote. (Positie op de X as, Positie op de Y as, Breedte, Hoogte). 
  //cirkel
  pg.fill(200, 164, 21); //kleur
  pg.ellipse(230, 375, 111, 151);

  pg.fill(222, 17, 17); //kleur
  pg.ellipse(235, 430, 50, 64);

  pg.fill(232, 9, 9); //kleur
  pg.ellipse(185, 437, 63, 42);

  pg.fill(255, 223, 9); //kleur
  pg.ellipse(245, 281, 111, 151); //cirkel met posities en BREEDTExHOOGTE

  //cirkel
  pg.fill(202, 202, 208); //kleur
  pg.ellipse(216, 242, 70, 70);

  //cirkel
  pg.fill(143, 143, 146); //kleur
  pg.ellipse(274, 243, 70, 70);

  //vierkantje  
  pg.fill(255, 0, 0); 
  pg.rect(209, 279, 70, 70);

  pg.endDraw();

  // show in canvas what is done in pg
  image(pg, 0, 0);
}

void keyPressed() {
  if (key == 'd' || key == 'D') {
    //avoid overwriting
    String name = "monster" + frameCount + ".png";    
    pg.save(name);
  }

  // if you want... uncomment
  //exit();
}

Dako_Jaxx

Hey _VK thnx for your imput, this did the trick for me! Rest of you guys also thank you for your time, everyone has been really helpfull.