#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Exporting a little 2d sketch to transparent trimmed png

edited June 2014

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)

Tagged:

• edited June 2014 Answer ✓

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!

• Thank you GoToLoop, was looking for that.

• edited June 2014 Answer ✓

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:

• 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?

• 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* ;) )

• edited June 2014

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:

• edited June 2014

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

• edited June 2014 Answer ✓

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();
}
``````
• 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.