Board Logo
« How to ERASE Graphics »

Welcome Guest. Please Login or Register.
Jan 18th, 2018, 3:52pm


Conforums Terms of Service | Membership Rules | Home | Search | Recent Posts | Notification | Format Your Message | Installation FAQ

This board is not meant for general discussion, it is meant for posting articles to help others.
For general discussions use the appropriate board, which best describes your problem area.

« Previous Topic | Next Topic »
Pages: 1  Notify Send Topic Print
 thread  Author  Topic: How to ERASE Graphics  (Read 1924 times)
Welopez
Moderator
ImageImageImageImageImage


member is offline

Avatar

Never let your beliefs get in the way of learning.


PM

Gender: Male
Posts: 4407
xx How to ERASE Graphics
« Thread started on: Jun 8th, 2013, 5:05pm »

Last week, madkaratemans asked how to erase circles from his graphic window. I was having a 'senior moment' at the time, I'll be 69 next month, so I jumped right in and gave him an incorrect answer. It's a good thing these web pages don't have 'olefactory properties' or everyone would know that I really stepped in it!

There are at least three ways to erase your pretty little finger paintings, which this demo should show you. We're going to paint a circle on a graphic box, and then use each of the three ways to erase that circle.
Code:
'  DEMO to erase drawn graphics
'  by Welopez, 06/08/2013

NOMAINWIN

WindowWidth=600
WindowHeight=600
UpperLeftX=INT(DisplayWidth-WindowWidth)/2
UpperLeftY=INT(DisplayHeight-WindowHeight)/2

label$="Press a button to choose your method of erasing graphics."+_
CHR$(13)+"Use 'RE-DRAW' to re-set your image."
STATICTEXT #g.st, label$, 50, 30, 500, 50
GRAPHICBOX #g.gbx, 150, 100, 400, 400
BUTTON #g.btn1, "QUIT", [quit], UL, 30, 380, 100, 30
BUTTON #g.btn2, "DRAW", [draw], UL, 30, 95, 100, 30
BUTTON #g.btn3, "CLS", [clear], UL, 30, 190, 100, 30
BUTTON #g.btn4, "FILL", [fill], UL, 30, 285, 100, 30
BUTTON #g.btn5, "RE-DRAW", [redraw], UL, 30, 475, 100, 30

OPEN "Erasing Graphics" FOR WINDOW AS #g
PRINT #g, "trapclose [quit]"
PRINT #g, "FONT arial 12 bold"
[redraw]  'draw the image using 'blue'
PRINT #g.gbx, "DOWN"
PRINT #g.gbx, "FILL 255 255 128"
PRINT #g.gbx, "COLOR 255 255 128"
PRINT #g.gbx, "BACKCOLOR blue"
PRINT #g.gbx, "PLACE 200 200"
FOR k=2 TO 100 STEP 2
    PRINT #g.gbx, "CIRCLEFILLED "; k
    TIMER 15, [resume]
    WAIT
    [resume]
    TIMER 0
NEXT k

WAIT
[draw]
'  Draw the image again using the background color to fill.
PRINT #g.gbx, "COLOR 255 255 128"
PRINT #g.gbx, "BACKCOLOR 255 255 128"
PRINT #g.gbx, "PLACE 200 200"
PRINT #g.gbx, "CIRCLEFILLED 100"

WAIT
[clear]
PRINT #g.gbx, "CLS"  '  Clears the graphicbox entirely!
'  Now add the background color.
PRINT #g.gbx, "FILL 255 255 128"

WAIT
[fill]
'  Fills the graphicbox entirely with the fill color.
PRINT #g.gbx, "FILL 255 255 128"

WAIT
[quit]
    CLOSE #g
    END
 

I'm using a graphicbox with a light yellow background, or FILL color. If I use the CLS statement to erase any drawn elements, the graphicbox will be blank white, so I'll have to apply the fill color again.

If I use the FILL command, and specify the color of the graphicbox, the fill color will overlay anything drawn, giving the appearance they have been erased.

Another method is to redraw the previously drawn image, using the same color as the FILL color. By erasing only a simple object, I won't have to redraw everything else in the graphicbox. You might want to use this method if you have constructed an analog clock, and want to show the movement of the second hand without having to redraw the minute hand, hour hand, and ordinals (hours) for the clock.

If your graphic shows the flight of the arrow as William Tell is shooting the apple off his son's head, you probably don't want to redraw the evil Gessler along with the onlookers and horses watching the event, so you'll use the re-draw method to show the flight of the arrow on it's way to splitting the apple.

My apologies if I confused anyone saying you could not use CLS in graphics commands. See also Animation (Without BMP Files).
« Last Edit: Jun 8th, 2013, 5:15pm by Welopez » User IP Logged

JB 1.01
Win7 64bit, 4 GB RAM, Pentium 6200@2.13 GHz (laptop)
WinXP, 1 GB RAM, Intel N270@1.6 GHz (netbook)
Valentin
Full Member
ImageImageImageImage


member is offline

Avatar




PM


Posts: 130
xx Re: How to ERASE Graphics
« Reply #1 on: Jun 9th, 2013, 05:47am »

Hello Welopez,
I put a pink sponge !

Code:
'  DEMO to erase drawn graphics
'  by Welopez, 06/08/2013

NOMAINWIN

WindowWidth=600
WindowHeight=600
UpperLeftX=INT(DisplayWidth-WindowWidth)/2
UpperLeftY=INT(DisplayHeight-WindowHeight)/2

label$="Press a button to choose your method of erasing graphics."+_
CHR$(13)+"Use 'RE-DRAW' to re-set your image."
STATICTEXT #g.st, label$, 50, 30, 500, 50
GRAPHICBOX #g.gbx, 150, 100, 400, 400
BUTTON #g.btn1, "QUIT", [quit], UL, 30, 380, 100, 30
BUTTON #g.btn2, "DRAW", [draw], UL, 30, 95, 100, 30
BUTTON #g.btn6, "SPONGE", [sponge], UL, 30, 135, 100, 30
BUTTON #g.btn3, "CLS", [clear], UL, 30, 190, 100, 30
BUTTON #g.btn4, "FILL", [fill], UL, 30, 285, 100, 30
BUTTON #g.btn5, "RE-DRAW", [redraw], UL, 30, 475, 100, 30

OPEN "Erasing Graphics" FOR WINDOW AS #g
PRINT #g, "trapclose [quit]"
PRINT #g, "FONT arial 12 bold"
[redraw]  'draw the image using 'blue'
PRINT #g.gbx, "DOWN"
PRINT #g.gbx, "FILL 255 255 128"
PRINT #g.gbx, "COLOR 255 255 128"
PRINT #g.gbx, "BACKCOLOR blue"
PRINT #g.gbx, "PLACE 200 200"
FOR k=2 TO 100 STEP 2
    PRINT #g.gbx, "CIRCLEFILLED "; k
    TIMER 15, [resume]
    WAIT
    [resume]
    TIMER 0
NEXT k

WAIT
[draw]
'  Draw the image again using the background color to fill.
PRINT #g.gbx, "COLOR 255 255 128"
PRINT #g.gbx, "BACKCOLOR 255 255 128"
PRINT #g.gbx, "PLACE 200 200"
PRINT #g.gbx, "PLACE 200 200"
FOR k=2 TO 100 STEP 2
    PRINT #g.gbx, "CIRCLEFILLED "; k
    TIMER 15, [resumeA]
    WAIT
    [resumeA]
    TIMER 0
NEXT k
wait
 [sponge]
   x=300:y=100
   for k=1 to 7
   FOR x=300 TO 70 STEP -3
      #g.gbx, "color pink; backcolor pink"
      #g.gbx, "PLACE ";x;" ";y
      #g.gbx, "CIRCLEFILLED 20"

      #g.gbx, "COLOR 255 255 128"
      #g.gbx, "BACKCOLOR 255 255 128"
      #g.gbx, "PLACE ";x+50;" ";y
      #g.gbx, "CIRCLEFILLED 25"
      TIMER 2, [resumeB]
      WAIT
      [resumeB]
      TIMER 0
   NEXT x
      #g.gbx, "PLACE ";x;" ";y
      #g.gbx, "CIRCLEFILLED 25"
   y=y+30
   next k
      #g.gbx, "size 2;COLOR black;BACKCOLOR 255 255 128"
      #g.gbx, "PLACE 150 60; CIRCLEFILLED 15"
      #g.gbx, "PLACE 180 60; CIRCLEFILLED 15"
      #g.gbx, "size 5;set 150 60":#g.gbx, "size 5;set 180 60"
      TIMER 700, [resumeC]
      WAIT
      [resumeC]
      TIMER 0
      #g.gbx, "size 2;COLOR  255 255 128;BACKCOLOR 255 255 128"
      #g.gbx, "size 6;set 150 60":#g.gbx, "size 5;set 180 60"
      #g.gbx, "size 2;COLOR black;BACKCOLOR 255 255 128"
      #g.gbx, "size 6;set 145 65":#g.gbx, "size 6;set 175 65"
      #g.gbx, "COLOR  blue;BACKCOLOR  255 255 128;font courier_new 28 bold"
      #g.gbx, "place 150 30"
      #g.gbx, "\!"
 WAIT
[clear]
PRINT #g.gbx, "CLS"  '  Clears the graphicbox entirely!
'  Now add the background color.
PRINT #g.gbx, "FILL 255 255 128"

WAIT
[fill]
'  Fills the graphicbox entirely with the fill color.
PRINT #g.gbx, "FILL 255 255 128"

WAIT
[quit]
    CLOSE #g
    END
 
« Last Edit: Jun 9th, 2013, 05:53am by Valentin » User IP Logged

Welopez
Moderator
ImageImageImageImageImage


member is offline

Avatar

Never let your beliefs get in the way of learning.


PM

Gender: Male
Posts: 4407
xx Re: How to ERASE Graphics
« Reply #2 on: Jun 9th, 2013, 07:37am »

ROFL @ Valentin! Now all I need is to load my shotgun and shoot 'skeet' with your pink sponges! Oops! I better not do that... this is supposed to be a 'G' rated forum. embarassed
User IP Logged

JB 1.01
Win7 64bit, 4 GB RAM, Pentium 6200@2.13 GHz (laptop)
WinXP, 1 GB RAM, Intel N270@1.6 GHz (netbook)
Valentin
Full Member
ImageImageImageImage


member is offline

Avatar




PM


Posts: 130
xx Re: How to ERASE Graphics
« Reply #3 on: Jun 9th, 2013, 07:54am »

cool
« Last Edit: Jun 9th, 2013, 2:07pm by Stefan Pendl » User IP Logged

tsh73
JB-Supporter


member is offline

Avatar




PM

Gender: Male
Posts: 3636
xx Re: How to ERASE Graphics
« Reply #4 on: Jun 10th, 2013, 08:59am »

Two more ways to erase drawn graphics.
First one is to use RULE XOR.
Main idea that with rule XOR, drawing same thing second time (with same colors!) completely removes it.
Caveat is that it might behave weird on colored backgrounds, so you have to experiment.
(and I have no idea how but I got some leftover points.)

Second - instead of actually erasing thing, we restore picture without it, in a single call to DRAWBMP.
Of cource we should store that bitmap with GETBMP beforehand. But it would be fast way to restore "onlookers and horses" ;)

Actually there is a third way, kind of.
If you use sprites, then single call to DRAWSPRITES restores sprite BG and all sprites you have (and if you drawn something after last DRAWBMP, it 'll get erased). But folks usually don't mix sprites and drawn draphics.
Code:
'  DEMO - 2 more ways to erase drawn graphics
'  by tsh73, inspired by Welopez

NOMAINWIN

WindowWidth=600
WindowHeight=600
UpperLeftX=INT(DisplayWidth-WindowWidth)/2
UpperLeftY=INT(DisplayHeight-WindowHeight)/2

label$="Press a button to choose your method of erasing graphics."+_
CHR$(13)+"Use 'RE-DRAW' to re-set your image."
STATICTEXT #g.st, label$, 50, 30, 500, 50
GRAPHICBOX #g.gbx, 150, 100, 400, 400
BUTTON #g.btn1, "QUIT", [quit], UL, 30, 380, 100, 30
BUTTON #g.btn2, "DRAW XOR", [drawXor], UL, 30, 95, 100, 30
BUTTON #g.btn3, "DRAWBMP", [drawbmp], UL, 30, 190, 100, 30

BUTTON #g.btn5, "RE-DRAW", [redraw], UL, 30, 475, 100, 30

OPEN "Erasing Graphics" FOR WINDOW AS #g
PRINT #g, "trapclose [quit]"
PRINT #g, "FONT arial 12 bold"
PRINT #g.gbx, "DOWN"

[redraw]  'draw the image using 'blue'
    'draw all but 5th
PRINT #g.gbx, "cls" 'draw anew, so better start with CLS
PRINT #g.gbx, "RULE OVER"   'restore drawing rule to normal one

PRINT #g.gbx, "BACKCOLOR blue"
PRINT #g.gbx, "COLOR blue"
FOR k=1 TO 10
    if k <>5 then
        PRINT #g.gbx, "PLACE 150 ";k*30+30
        PRINT #g.gbx, "CIRCLEFILLED "; 10
    end if
    TIMER 15, [resume]
    WAIT
    [resume]
    TIMER 0
NEXT k
'grab picture without 5th
PRINT #g.gbx, "getbmp bmpName 1 1 400 400"

    TIMER 150, [resume2]
    WAIT
    [resume2]
    TIMER 0

'draw 5th one
PRINT #g.gbx, "PLACE 150 ";5*30+30
PRINT #g.gbx, "CIRCLEFILLED "; 10

WAIT

[drawXor]
'Draw the 5th element using XOR rule
'It does draw on and off. Somehow it leaves dots on edges, though it shouldn't?
PRINT #g.gbx, "RULE XOR"
'draw 5th one
PRINT #g.gbx, "PLACE 150 ";5*30+30
PRINT #g.gbx, "CIRCLEFILLED "; 10

WAIT

[drawbmp]
'just put pre-saved image (without 5th dot)
PRINT #g.gbx, "drawbmp bmpName 1 1"

WAIT

[quit]
    CLOSE #g
    END
 
User IP Logged

Q: "And if I took your codes and compile them, and sell them for a profit"?
A: Go ahead. I had my share of good then I coded it for fun, if you can make better use of it - please do.
(enjoying JB 1.01 on WinXP, netbook and desktop)
Welopez
Moderator
ImageImageImageImageImage


member is offline

Avatar

Never let your beliefs get in the way of learning.


PM

Gender: Male
Posts: 4407
xx Re: How to ERASE Graphics
« Reply #5 on: Jun 10th, 2013, 11:13am »

Yeah... it sort of does leave a few pixels colored. I guess that's kind of like using a magic marker on bond paper. It will 'bleed' outside the lines you are drawing in. Funny, I thought the only time an LCD display would bleed was when I pulled the money out of my wallet to pay for it. undecided

Good tip about drawing with XOR. I'll have to give that a try. wink
User IP Logged

JB 1.01
Win7 64bit, 4 GB RAM, Pentium 6200@2.13 GHz (laptop)
WinXP, 1 GB RAM, Intel N270@1.6 GHz (netbook)
jaba
Global Moderator
ImageImageImageImageImage


member is offline

Avatar




PM

Gender: Male
Posts: 1049
xx Re: How to ERASE Graphics
« Reply #6 on: Jun 10th, 2013, 7:10pm »

Quote:
'It does draw on and off. Somehow it leaves dots on edges, though it shouldn't?

If you draw squares instead of circles you don't leave dots. Was there a discussion in the last year or two about the effect on adjacent pixels when using the drawing rules?
User IP Logged

JACK - Windows 8.1 64-bit; 2.5 GHz Intel i3 processor; 6.00 GB RAM;
tsh73
JB-Supporter


member is offline

Avatar




PM

Gender: Male
Posts: 3636
xx Re: How to ERASE Graphics
« Reply #7 on: Jun 11th, 2013, 01:03am »

Quote:
Was there a discussion in the last year or two about the effect on adjacent pixels when using the drawing rules?

I do not remember. Could you find a link?
(I tried looking for RULE XOR. Re-read/re-run bunch of great programs wink )
User IP Logged

Q: "And if I took your codes and compile them, and sell them for a profit"?
A: Go ahead. I had my share of good then I coded it for fun, if you can make better use of it - please do.
(enjoying JB 1.01 on WinXP, netbook and desktop)
jaba
Global Moderator
ImageImageImageImageImage


member is offline

Avatar




PM

Gender: Male
Posts: 1049
xx Re: How to ERASE Graphics
« Reply #8 on: Jun 11th, 2013, 08:02am »

Quote:
I do not remember. Could you find a link?

While I continue to research it, I'm wondering if it could have something to do with dithering (or, opengl)? If you are going to have the system working against you, using xor may not be a dependable method for erasing graphics. Other than the pure enjoyment of trying to get to the bottom of why xor leaves "ghosts", there is probably no reason to pursue the question. Nevertheless, someone reading this may remember something that will help...
User IP Logged

JACK - Windows 8.1 64-bit; 2.5 GHz Intel i3 processor; 6.00 GB RAM;
Rod
Administrator
ImageImageImageImageImage


member is offline

Avatar

Graphics = Goosebumps!


PM

Gender: Male
Posts: 3151
xx Re: How to ERASE Graphics
« Reply #9 on: Jun 11th, 2013, 12:46pm »

I think you are all recalling the antialiasing code, don't think this is similar. Logically it should be pixel by pixel with no overlap. So circle filled seems to color different pixels depending on the drawing mode?
User IP Logged

tsh73
JB-Supporter


member is offline

Avatar




PM

Gender: Male
Posts: 3636
xx Re: How to ERASE Graphics
« Reply #10 on: Jun 11th, 2013, 2:56pm »

OK I have an idea. I just wondered if anyone already have said something.

It looks like, if you try circlefilled with border color white, you'll see that in XOR mode circle is bigger.
My guess is that first it draws internal filled circle, then draws border.
In normal mode, white border makes colored part smaller
in XOR, white is transparent - it doesn't block things - so colored part is bigger.

Now, if we have blue fill and blue border, in normal mode they just add, making bigger smooth filled circle.
But in XOR mode - Since it's two different operations, and border does not exactly fit colored part, you get stray points and fuzzy edges.

Here's all possible combinations.

Code:
nomainwin
WindowWidth=400
open "test" for graphics_nsb as #gr
#gr "trapclose [quit]"
#gr "down"
size = 10

#gr "place 50 50"
#gr "backcolor white; color black"
#gr "\normal, white border"
#gr "backcolor blue"
#gr "color white"
#gr "circlefilled ";size

#gr "place 200 50"
#gr "backcolor white; color black"
#gr "\normal, blue border"
#gr "backcolor blue"
#gr "color blue"
#gr "circlefilled ";size

#gr "rule xor"
#gr "place 50 200"
#gr "backcolor white; color black"
#gr "\XOR, white border"
#gr "backcolor blue"
#gr "color white"
#gr "circlefilled ";size

#gr "place 200 200"
#gr "backcolor white; color black"
#gr "\XOR, blue border"
#gr "backcolor blue"
#gr "color blue"
#gr "circlefilled ";size


#gr "flush"
wait

[quit]
close #gr
end

 
« Last Edit: Jun 11th, 2013, 2:59pm by tsh73 » User IP Logged

Q: "And if I took your codes and compile them, and sell them for a profit"?
A: Go ahead. I had my share of good then I coded it for fun, if you can make better use of it - please do.
(enjoying JB 1.01 on WinXP, netbook and desktop)
tsh73
JB-Supporter


member is offline

Avatar




PM

Gender: Male
Posts: 3636
xx Re: How to ERASE Graphics
« Reply #11 on: Jun 11th, 2013, 3:01pm »

jaba,
Quote:
Other than the pure enjoyment of trying to get to the bottom of why xor leaves "ghosts", there is probably no reason to pursue the question.

"pure enjoyment " is the sole reason of programming JB wink
User IP Logged

Q: "And if I took your codes and compile them, and sell them for a profit"?
A: Go ahead. I had my share of good then I coded it for fun, if you can make better use of it - please do.
(enjoying JB 1.01 on WinXP, netbook and desktop)
Pages: 1  Notify Send Topic Print
« Previous Topic | Next Topic »

Conforums Terms of Service | Membership Rules | Home | Search | Recent Posts | Notification | Format Your Message | Installation FAQ

Donate $6.99 for 50,000 Ad-Free Pageviews!

| |

This forum powered for FREE by Conforums ©
Sign up for your own Free Message Board today!
Terms of Service | Privacy Policy | Conforums Support | Parental Controls