Paint Transparent

Post Reply
User avatar
rbytes
Posts: 1936
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Paint Transparent

Post by rbytes » Thu Dec 13, 2018 5:54 am

Here is a program to remove the background from an image. This is done by loading the image and then painting over all of the areas that you wish to make transparent with your finger (or a stylus). Your paintbrush is a circular sprite that has an edge that fades to transparency (called a "feathered" edge). GRAPHICS MODE DESTOUT causes the sprite to erase the background as you paint, rather than stamping images of itself. As you draw, it feathers the edges of the transparent areas it leaves behind!

Brief instructions are included in the comments at the head of the program.

The images below are
1. "Phaedra.jpg" supplied for you to use if you wish. Our favorite Labradoodle!
2. Screen shot of the program when first run, showing the full interface.
3. Screen shot of the program after the Hide button is pressed. This produces a simpler interface so more of the image
can be seen. But you can paint using either interface.
4. The image after the larger brushes have painted away most of the background. At this point,
smaller and smaller brushes should be used for the fine work around the edges of the subject.
5. The finished image, saved as "painter.png". It and Phaedra.jpg can be used in Photo Zoom-In, posted recently.

Code: Select all

/*
Paint Transparent
by rbytes, December 2018
Paint the background of
a subject transparent and
save result as a .png image.

This program will run on an iPhone or iPod, but the
output image size will be very limited and a 4:3 image
will be cropped at the bottom. On an iPad, you will
be able to process and save a 2048 x 1536 image (~ 3 MB)

Basic instructions:
1. Set N$ as the name of the image you want to process. Do this in the green-
   highlighted code near the start of the program.
2. Use a large brush to paint large sections of background transparent.
   Brush size is adjusted with the slider
3. Use progressively smaller brushes as you paint closer to the edge of the
   center of interest (eg. person, animal, object)
4. When you are satisfied with the background removal, press the x button to
   show the other buttons.
5. Now press the Save button. Your transparent image will be saved as "painter.png"
*/

SET TOOLBAR OFF
OPTION SPRITE POS CENTRAL
SET ORIENTATION LANDSCAPE
SET BUTTONS CUSTOM
REFRESH OFF
laun$=LAUNCHER$ ()
dev$=DEVICE_TYPE$()
GET SCREEN SIZE sw,sh
iostest=0
IF iostest THEN
  sw=568
  sh=320
  dev$=""
ENDIF
rw=sw/1024!rh=sh/768
'c'
' name of the photo you wish to process
N$="Phaedra.jpg"

''
IF dev$="iPad" THEN vshift=20
GOSUB defaults

' load image and scale it to fill the screen
SPRITE "image" BEGIN sw,sh
GET IMAGE N$ SIZE WI,HI
DRAW IMAGE N$ AT 0,0 SCALE sw/WI
SPRITE "image" END

' create the drawing brush sprite
SPRITE "dsize" BEGIN 40*rw,40*rw
DRAW COLOR 0,0,0
a=1
DRAW ALPHA a
FOR t=0 TO 18*rw STEP .5
  DRAW CIRCLE 20*rw,20*rw SIZE t
  IF t>6*rw THEN
    a-=.04
    DRAW ALPHA a
  ENDIF
NEXT T
SPRITE "dsize" END
SPRITE "dsize" AT 140*rw,140*rh SCALE .2*rw
SPRITE "dsize" SHOW
DRAW ALPHA 1
GOSUB interface
drawing=0
DRAW COLOR 0,0,0
SPRITE "image" STAMP
REFRESH ON

main_loop:

pen.SIZE=1+SLIDER_VALUE("size")*TOOLBAR.border*10*rw ' I added 1 so pen.size is never 0!
IF pen.SIZE <> pen.oldsize THEN
  pen.oldsize=pen.SIZE
  IF NOT swap THEN
    SPRITE "dsize" AT 100*rw,100*rh SCALE .03*pen.SIZE
  ELSE
    SPRITE "dsize" AT oldpen.x,oldpen.y SCALE .03*pen.SIZE
  ENDIF
  REFRESH
END IF

IF BUTTON_PRESSED("clear") THEN
  sprload=0
  GRAPHICS CLEAR
END IF

IF BUTTON_PRESSED("save") THEN
  swap=1
  SPRITE "image" SAVE "painter.png"
  ALBUM EXPORT "painter.png"
END IF

IF BUTTON_PRESSED("stop") THEN
  IF .laun$="desktop" THEN
    IF FILE_EXISTS("/launch") THEN
      RUN "/-Launch.sb"
    ELSE
      EXIT
    ENDIF 
  ENDIF
  END
ENDIF

GET TOUCH 0 AS x,y
IF BUTTON_PRESSED("hide") THEN
    swap=1
    BUTTON "clear" HIDE
    BUTTON "save" HIDE
    BUTTON "stop" HIDE
    BUTTON "swap" SHOW
    BUTTON "hide" HIDE
    FIELD "label" HIDE
    
  ENDIF
  
IF BUTTON_PRESSED("swap") THEN
    swap=0
    BUTTON "clear" SHOW
    BUTTON "save" SHOW
    BUTTON "stop" SHOW
    BUTTON "hide" SHOW
    BUTTON "swap" HIDE
    FIELD "label" SHOW
END IF

IF x = -1 THEN
  SPRITE "image" SCAN 0,0, sw,sh
  'IF drawing THEN drawing=0
  GOTO main_loop
ELSE
  GOSUB DRAW
ENDIF
GOTO main_loop

' drawing sub
DRAW:
'DRAW COLOR 0,0,0
REFRESH ON
IF x<>-1 THEN SPRITE "dsize" AT x,y SCALE .03*pen.SIZE
GRAPHICS MODE DESTOUT
  ' draw
  IF NOT drawing THEN
    drawing=1
  ELSE
    IF x<>oldpen.x OR y<>oldpen.y THEN SPRITE "dsize" STAMP
  END IF
  oldpen.x=x
  oldpen.y=y
  GET TOUCH 0 AS x,y
  IF x<>-1 THEN GOTO DRAW
  GRAPHICS MODE NORMAL
RETURN

interface:
SLIDER.x=TOOLBAR.border
SLIDER.y=450*rh
SLIDER.SIZE=TOOLBAR.width-TOOLBAR.border*2
BUTTON.height=30*rw
BUTTON.x=SLIDER.x*2
BUTTON.y=SLIDER.y+BUTTON.height*1.2*rh
SLIDER "size" VALUE .5 AT SLIDER.x*6*rw, SLIDER.y+220*rh+vshift SIZE SLIDER.SIZE*rw
DRAW COLOR 0,0,0
FILL COLOR 1,1,1
SET BUTTONS FONT SIZE 20*rw
BUTTON "clear" TEXT "CLEAR" AT BUTTON.x*16*rw, BUTTON.y+220*rh SIZE rw*SLIDER.SIZE/4, BUTTON.height
BUTTON "hide" TEXT "HIDE" AT BUTTON.x*19*rw, BUTTON.y+220*rh SIZE rw*SLIDER.SIZE/4, BUTTON.height
BUTTON "save" TEXT "SAVE" AT BUTTON.x*22*rw, BUTTON.y+220*rh SIZE rw*SLIDER.SIZE/4, BUTTON.height
BUTTON "stop" TEXT "STOP" AT BUTTON.x*25*rw, BUTTON.y+220*rh SIZE rw*SLIDER.SIZE/4, BUTTON.height
BUTTON "swap" TEXT "*" AT BUTTON.x*rw, BUTTON.y+220*rh SIZE rw*SLIDER.SIZE/8, BUTTON.height
BUTTON "swap" HIDE
FIELD "label" FONT SIZE 20*rw
FIELD "label" TEXT "BRUSH SIZE" AT BUTTON.x*3*rw,720*rh SIZE 135*rw,30*rh
FIELD "label" FONT COLOR 0,0,0
FIELD "label" BACK ALPHA .3
FIELD "label" FONT SIZE 20*rh
RETURN

defaults:
' tool bar
TOOLBAR.width=SCREEN_WIDTH()/3
TOOLBAR.height=SCREEN_HEIGHT()
TOOLBAR.border=TOOLBAR.width/20
SCREEN.SCALE=SCREEN_SCALE()
IF NOT FILE_EXISTS("PainTran") THEN DIR "PainTran" CREATE
GRAPHICS
REFRESH OFF
GRAPHICS CLEAR
FILL COLOR 1,1,1
RETURN
Attachments
Phaedra.jpg
Phaedra.jpg (523.97 KiB) Viewed 203 times
A8D10D48-370B-4C91-B07E-7BE0FD416AA5.png
A8D10D48-370B-4C91-B07E-7BE0FD416AA5.png (6.63 MiB) Viewed 204 times
ABE3555E-D760-442D-A978-52FCD9753338.png
ABE3555E-D760-442D-A978-52FCD9753338.png (6.69 MiB) Viewed 204 times
1BC00731-01C2-44FE-86B6-774E56B6C4D3.png
1BC00731-01C2-44FE-86B6-774E56B6C4D3.png (4.12 MiB) Viewed 204 times
E481F87E-73DC-4D39-8EC2-6CA2EF899FFB.png
E481F87E-73DC-4D39-8EC2-6CA2EF899FFB.png (2.05 MiB) Viewed 204 times
Last edited by rbytes on Sun Dec 16, 2018 2:37 pm, edited 1 time in total.
####### Living the colorful life #######

Henko
Posts: 844
Joined: Tue Apr 09, 2013 12:23 pm
My devices: iPhone,iPad
Windows
Location: Groningen, Netherlands
Flag: Netherlands

Re: Paint Transparent

Post by Henko » Fri Dec 14, 2018 4:33 pm

Is the dog real, or software generated ? 😎

User avatar
rbytes
Posts: 1936
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Paint Transparent

Post by rbytes » Fri Dec 14, 2018 4:40 pm

Phaedra says "bark bark bark bark woof". I translate that to "of course I am real - are you?" :lol: 🐕
Last edited by rbytes on Fri Dec 14, 2018 4:42 pm, edited 1 time in total.
####### Living the colorful life #######

Henko
Posts: 844
Joined: Tue Apr 09, 2013 12:23 pm
My devices: iPhone,iPad
Windows
Location: Groningen, Netherlands
Flag: Netherlands

Re: Paint Transparent

Post by Henko » Fri Dec 14, 2018 4:42 pm

To be serious, It might be a nice idea: a software dog, that can move in a number of ways.

User avatar
rbytes
Posts: 1936
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Paint Transparent

Post by rbytes » Fri Dec 14, 2018 4:46 pm

It could be done. One way would be using shapes. I had the crazy idea recently of creating the shape of an animal as a poly and then feeding it data to animate it. That would probably be best used for a cartoon dog. One of my recent programs used this technique in a random way to create an amoeba.

A more realistic dog could be created by generating separate sprites of the head, body and legs of a real dog and controlling their movement.
####### Living the colorful life #######

Henko
Posts: 844
Joined: Tue Apr 09, 2013 12:23 pm
My devices: iPhone,iPad
Windows
Location: Groningen, Netherlands
Flag: Netherlands

Re: Paint Transparent

Post by Henko » Fri Dec 14, 2018 5:51 pm

The real dog is at hand.....
We could dismember the needed parts (from the picture, that is), and turn them into sprites.
Deserves some more thinking.
We could give the software dog a software cat to play with..

User avatar
rbytes
Posts: 1936
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Paint Transparent

Post by rbytes » Fri Dec 14, 2018 7:51 pm

Perhaps you have a suitable cat? If not, there are thousands of cat photos and videos on the web! :ugeek:
####### Living the colorful life #######

Post Reply