Petit Computer Journal #15
Quickie Draw: A flipnote type app



I was reading messages in a Nintendo Life forum for Petit Computer when 2 people admitted to have inspiration to write a paint program over the weekend. I replied that it was unbelievable, because … me too! And suddenly, another one piped up and said that he too was inspired over the same weekend. Huh, sometimes real life is very strange.

So, anyway, I cooked up this drawing program real quick. I called it “Quickie Draw” because I wrote it in about one hour. It would have been faster, but it was done at the end of the day, and that day was extremely tiring because I was sick and was coughing and sneezing all day long. Overall, not a good condition to write computer programs.

QDRAW
@INIT
ACLS:GPAINT 1,1,1
PNLTYPE “OFF”
GPAGE 1: GPAINT 1,1,1

LOCATE 7,5:?”QUICKIE DRAW”
LOCATE 9,7:?”BY”
LOCATE 11,9:?”HARRY HARDJONO”

LOCATE 6,17:?”A CLEAR SCREEN”
LOCATE 6,18:?”B END PROGRAM”

So far, so good. There’s no problem at all here, or rather, there shouldn’t be at all. For some reason, I mixed up X and Y coordinates, so the “BY” somehow ended up in location 7,9. Ouch. How did that happen? Fixed it no problem.

@PRE
S=TCHST:X0=TCHX:Y0=TCHY
IF BTRIG()==16 GOTO @INIT
IF BTRIG()==32 GOTO @END
IF S==0 GOTO @PRE

You know, as simple as that @PRE is all about, I had a terrible time with it. The thing is, I knew it would be simple, but for some reason, I kept going off the deep end with various variables trying to keep track of different states of drawing. My brain was definitely jello when I did it. I kept thinking that my program was becoming too complicated and deleted my codes wholesale and started over. It was at my sixth attempt that I realized that S=TCHST should be the first thing I should grab. Doh! After that, no problem.

@LOOP
X1=TCHX:Y1=TCHY
GLINE X0,Y0,X1,Y1,14
X0=X1:Y0=Y1
IF TCHST==0 GOTO @PRE ELSE GOTO @LOOP

@END
END

@Loop is very simple, isn’t it? And in fact, that’s all there is to it. If you ever want to write a paint program where you never let the pen leave the paper, that’s all there is to it. Haha, joking aside, computer programming can be easy and fun. Just don’t do it while you’re on deathbed unless you’re addicted to it (like me).

So far so good.

I posted the program to the forum. Chat a little bit and 50 minutes later, I wrote: “BTW, I changed the program to flipnote type.”

Interesting, isn’t it? I was sick to my deathbed, but after a breakthrough, I just kept going, and changing it to flipnote app. It wasn’t hard at all!

‘PNLTYPE “OFF”:PP=6:GOTO@ANIM
PP=0
@INIT
IF PP>0 GOTO @FADE
ACLS:GPAINT 1,1,1
PNLTYPE “OFF”
GPAGE 1:GPAINT 1,1,15

@TITLE
LOCATE 7,5:?”QUICKIE DRAW”
LOCATE 9,7:?”BY”
LOCATE 11,9:?”HARRY HARDJONO”
LOCATE 6,15:?”(A) NEW PAGE”
LOCATE 6,16:?”(B) FLIP PICS”
LOCATE 6,17:?”(X) END PROGRAM”
LOCATE 10,20:?PP;”/99”

The first line is commented. This is because it goes to animator subroutine directly, just in case you want to see your masterpiece in action without having to redraw the whole thing. PP stands for number of pages, and although I peg it at 99 pages max, I doubt there is space in the program to hold that many.

@PRE
S=TCHST:X0=TCHX:Y0=TCHY
VSYNC 1
IF BTRIG()==16 THEN GOSUB @SP:GOTO @INIT
IF BTRIG()==32 THEN GOSUB @SP:GOTO @ANIM
IF BTRIG()==64 GOTO @END
IF S==0 GOTO @PRE
@LOOP
X1=TCHX:Y1=TCHY
GLINE X0,Y0,X1,Y1,14
X0=X1:Y0=Y1
IF TCHST==0 GOTO @PRE ELSE GOTO @LOOP
@END
END

It is very interesting that it doesn’t take much more code to turn the paint program into a flip note app. That’s because most of the work is done by the subroutines. A sign of well-designed program is that the implementation of such program is effortless. I know I’m bucking the convention here, but I think that heroic effort in computer programming is misguided. I’d rather have heroic effort in program design and pedestrian implementation of it. Computer programs that are easy to understand tend to get maintained more, and it’s not about documentation. It’s about the cleanliness of the algorithm. How many of you are willing to throw out existing code out and start over? Because if you do not, then you’re effectively working with first draft. Just ask any Communication teacher about the value of first draft. Not much, eh? Then why are you satisfied with your first implementation? Be willing to discard bad code!

@SP
GOSUB @ERASE
FN$=”GRP1:FLIP”+STR$(PP)
SAVE FN$
PP=PP+1:IF PP>99 THEN PP=99
RETURN

@ANIM
WAIT 15:SYSBEEP=FALSE
IF I<0 THEN I-0
FN$="GRP1:FLIP"+STR$(I)
LOAD FN$,FALSE
I=I+1:IF I>=PP THEN I=0
VSYNC 1:IF BTRIG()==64 GOTO @END
GOTO @ANIM

@ERASE
FOR Y=0 TO 191:FOR X=0 TO 255
IF GSPOIT(X,Y)==1 THEN GPSET X,Y,15
NEXT X
NEXT Y
RETURN

@FADE
FOR Y=0 TO 191:FOR X=0 TO 255
IF GSPOIT(X,Y)==14 THEN GPSET X,Y,1
NEXT X
NEXT Y
GOTO @TITLE

OK, so now we have a fully functioning flip note program. Notice, however, that it is not user friendly. It’s still rough on edges. However, due to good design, the algorithm is clean and modular and easy to change. One more round of polishing, and we’re good to go.

‘QUICKIE DRAW
‘A SIMPLE FLIPNOTE
‘HARRY HARDJONO MAY 2013
DELAY=10
PNLTYPE “OFF”
INPUT “HOW MANY PAGES”;PP
IF PP>0 GOTO@ANIM
PP=0:CC=14
@INIT
IF PP>0 THEN GOSUB @FADE:GOTO @TITLE
ACLS:GPAINT 1,1,1
PNLTYPE “OFF”
GPAGE 1:GPAINT 1,1,15

The first thing you notice is that there is an INPUT statement, asking you how many pages. This is for the @ANIM function. If you enter 0, then it will go to editing mode. Otherwise, it will animate the pages. This change will enable us to run the program from the main menu, instead of having to go to EDIT screen and edit the program manually.

Another change is that there is a variable DELAY right in the beginning. This is for the delay loop for the animation. The more loops, the slower the flip. I simply set it to a number, instead of asking the user what he wants. This is for simplification of the program. With better UI, I may let the user specify the delay.

@TITLE
LOCATE 7,5:?”QUICKIE DRAW”
LOCATE 9,7:?”BY”
LOCATE 11,9:?”HARRY HARDJONO”
LOCATE 6,15:?”(A) NEW PAGE”
LOCATE 6,16:?”(B) SAVE AND FLIP PICS”
LOCATE 6,17:?”(X) COPY TO NEW PAGE”
LOCATE 6,18:?”(Y) PEN/ERASER”
LOCATE 10,20:?PP;”/99”

Nothing too new here. The biggest change is that I’m now very specific about (B). There is a concern that ending the drawing mode may not save the image. I simply made it explicit that yes, there will be a saving. If you do not intend to save it, then during program restart, simply specify 1 frame less than before. No problem.

(X) copy function is actually easier to do, since you’re not doing anything much. The Pen/Eraser function comes out of the copy function. This way, you can simply erase the difference, instead of drawing the whole thing over. I don’t really need to do this but it’s very convenient to the user.

@PRE
S=TCHST:X0=TCHX:Y0=TCHY
VSYNC 1
IF BTRIG()==16 THEN GOSUB @SP:GOTO @INIT
IF BTRIG()==32 THEN GOSUB @SP:GOTO @ANIM
IF BTRIG()==64 THEN GOSUB @SP:GOTO @TITLE
IF BTRIG()==128 THEN CC=29-CC
LOCATE 1,0:IF CC==14 THEN ?”X” ELSE ?”O”
IF S==0 GOTO @PRE

There is a little trick in changing the CC color. Notice that CC=29-CC. This is very useful mathematical formula if you ever want to toggle the value of a variable between two numbers. Let’s say you want to toggle the variable G between 4 and 7. Simply add the two values and use the formula above. So, we have G=(4+7)-G. In this case, CC=(14+15)-CC. I suppose I should have written it that way so it won’t be so much a magic number.

Also, the X and O, is actually filled block and hollow block in the program. I simply put the ASCII equivalent here.

@LOOP
X1=TCHX:Y1=TCHY
IF CC==14 THEN GLINE X0,Y0,X1,Y1,CC ELSE GFILL X1-3,Y1-3,X1+3,Y1+3,CC
X0=X1:Y0=Y1
IF TCHST==0 GOTO @PRE ELSE GOTO @LOOP
@END
SYSBEEP=TRUE
END

There is GLINE and GFILL. Why the difference? One is drawing (pencil) the other is erasing (eraser). I did try to erase with GLINE. Didn’t like it one bit. I also added SYSBEEP=TRUE. This is because I turned off SYSBEEP during @ANIM. In general, it’s good to have a specific exit point such as @END in the program even if you don’t know what you want to do with it.

@SP
GOSUB @ERASE
FN$=”GRP1:FLIP”+STR$(PP)
SAVE FN$
PP=PP+1:IF PP>99 THEN PP=99
RETURN

@ANIM
LOCATE 6,15:?”                “
LOCATE 6,16:?”                “
LOCATE 6,17:?”(X) QUIT            “
LOCATE 6,18:?”                “
LOCATE 10,20:?RIGHT$(“0”+STR(I),2;”/99 “
SYSBEEP=FALSE
IF I<0 THEN I-0
@ANIM2
LOCATE 10,20:?RIGHT$("0"+STR$(I),2);"/99 "
FN$="GRP1:FLIP"+STR$(I)
LOAD FN$,FALSE
I=I+1:IF I>=PP THEN I=0
FOR J=0 TO DELAY:VSYNC 1:IF BTRIG()==64 GOTO @END
NEXT J
GOTO @ANIM2

I had to duplicate the screen displays so the screen will update properly. I suppose I can write yet another function to simplify the structure. Since I’m going to be done with this, I decided to just leave it out like that. It is a good idea to put the screen displaying routine to a function, though. It makes it cleaner.

@ERASE
LOCATE 0,0:?”Z”
FOR Y=0 TO 191:FOR X=0 TO 255
IF GSPOIT(X,Y)==5 THEN GPSET X,Y,15
NEXT X
NEXT Y
LOCATE 0,0:?” “
RETURN

@FADE
LOCATE 0,0:?”Z“
FOR Y=0 TO 191:FOR X=0 TO 255
IF GSPOIT(X,Y)==14 THEN GPSET X,Y,5
NEXT X
NEXT Y
LOCATE 0,0:?” “
RETURN

The “Z” is the clock in the program. It indicates that the program is busy. It does take a while for the computer to scan the whole screen.

And that’s about it. Not a bad program to write in a hurry.

Petit Computer Journal#10

Petit Computer Journal #10

Graphics and Paint

We are going to go ahead and do all the graphic routines. I think the best way to do it is to just make a paint program. It won't be the prettiest paint program ever, but it'll do to make us understand how the graphic works. For the interface, I'll use Directional Pad for choosing colors and Tools. Touchscreen is for drawing. Turn the panel off by PNLTYPE "OFF"

'SHAPE MAKER
ACLS:GPAGE1:PNLTYPE "OFF"
S=0:MAXS=12:

S is current shape number. MAXS is Max shape number. Starts with one, and as time goes on, keep increasing it.

@LOOP
GOSUB @DT
VSYNC 1:B=BUTTON(3)
IF B AND 1 THEN C=(C+1)%16
IF B AND 2 THEN C=(C+16-1)%16
IF B AND 4 THEN S=(S+MAXS-1)%MAXS
IF B AND 8 THEN S=(S+1)%MAXS

X=TCHX:Y=TCHY
FOR I=1 TO 1:I=!TCHST:IF I==0 THEN GOSUB SETR:GOSUB @DRAW
NEXT
GOTO @LOOP

The interface routine is simplicity itself. Basically, either use the directional pad to change color and shape, or detect Touch screen for drawing. This is done simply because it was done spontaneously while waiting for something. I added the number of shapes gradually over time.

@DT
CLS:COLOR 0
?"COLOR=";
GPAGE 0:GFILL 50,0,100,50,C:GPAGE 1
LOCATE 0,10:?"SHAPE=";
IF S==0 THEN ?"CIRCLE"
IF S==1 THEN ?"LINE"
IF S==2 THEN ?"BOX"
IF S==3 THEN ?"FILL"
IF S==4 THEN ?"LINETO"
IF S==5 THEN ?"PAINT"
IF S==6 THEN ?"PSET"
IF S==7 THEN ?"PAINT BORDER"
IF S==8 THEN ?"AIRBRUSH"
IF S==9 THEN ?"AIRBRUSH STENCIL"
IF S==10 THEN ?"PSET STENCIL"
IF S==11 THEN ?"HEAVY AIRBRUSH STENCIL"
RETURN

This is to draw the top screen, showing the color and the shape tools. If the selection is somewhat random, it is because I add to it random. The first four was done immediately. Then I add LINETO. PAINT,PSET follows. PAINT BORDER because I want to learn how to use it. The rest is my desire to add stipling to the graphic.
It is actually an improvisation. A good way to do it is using ELSE-IF ladder. A better way to do it would be using Array. The best way to do it is by using Graphics, icons, and highlights. I'm not going to do that for now.

@SETR
DX=TCHX-X:DY=TCHY-Y
R=SQR(DX*DX+DY*DY)
RETURN

Set Radius. This is used for CIRCLE.

@DRAW
GCOLOR C
S=S%MAXS:ON S GOSUB @CIR,@LIN,@BOX,@FIL,@LI2,@PAI,@SET,@BOR,@AIR,@STE,@PST,@HAIR

It doesn't get any simpler than that. Who knew computer programming can be so easy? I know I'm bucking the convention here, but I really don't think much about computer programming. Computer programming is merely the translation from English (human) language to BASIC (computer) language. It can be done mechanically. Design, which requires you to specify something that doesn't exists, is a much more challenging endeavour, simply because there is no way to be sure what you do is the best way to do it. You must experiments with different things.

I like to have 3 different solutions to the problem: A good one, a better one, and a best one. It has served me well throughout the years and something I suggest you adopt in order to expand your skills as computer programmer.

@CIR
FOR J=0 TO R:GCIRCLE X,Y,J:NEXT
RETURN

@LIN
GLINE X,Y,TCHX,TCHY
RETURN

@BOX
GBOX X,Y,TCHX,TCHY
RETURN

@FIL
GFILL X,Y,TCHX,TCHY
RETURN

Do I really need to explain these? They are self-explanatory. I will mention that loop for circle. The circle command isn't filled. I don't find much use for rings. I want circles. This is a design decision. So, I wrote it like that. Filled CIRCLE! It's not perfect, though, and you are encourage to fix it.

The color was set by GCOLOR C statement above. I could, and indeed, should, use the expanded command of specifying color at the end: GLINE X,Y,TCHX,TCHY,C on all commands. It's part of unifying aspect of the program.

@LI2
X2=TCHX:Y2=TCHY
GLINE X,Y,X2,Y2
X=X2:Y=Y2
RETURN

This is simply connecting line. If you look at the Touch screen code above, you will see that the last point of the line becomes the first point of the next line. Easy as pie!

@PAI
GPAINT X,Y
RETURN

@SET
IF TCHST==1 THEN GPSET TCHX,TCHY:GOTO @SET

@BOR
GPAINT X,Y,C,C+1
RETURN

GPAINT is easy enough. How about @BOR? That's GPAINT with border. I want to see how the paint functions with border color specified. Here, I specified C+1 as the border. Obviously, you can specify any color you want as the border, not just the next one.

Regarding GPSET, I put it in a loop because I want to do stippling technique. No mystery there.

@AIR
FOR W=1 TO 200:NEXT
IF TCHST==1 THEN GPSET TCHX+(RND(17)-8,TCHY+(RND(17)-8):GOTO @AIR
RETURN

@STE
VC=GSPOIT(X,Y)
@STE2
VSYNC 1:VX=TCHX+(RND(11)-5):VY=TCHY+(RND(11)-5)
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
IF TCHST==1 GOTO @STE2
RETURN

@PST
VC=GSPOIT(X,Y)
@PST2
VX=TCHX:VY=TCHY
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
IF TCHST==1 GOTO @PST2
RETURN

@HAIR
VC=GSPOIT(X,Y)
@HAIR2
VX=TCHX+(RND(11)-5):VY=TCHY+(RND(11)-5)
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
FOR W=1 TO 200:NEXT:'WAIT AWHILE
IF TCHST==1 GOTO @HAIR2
RETURN

The @AIR airbrush is simple enough. There is a WAIT 200 cycles because if not, the pixels are sprayed remarkably quickly. Otherwise, it's just a random GPSET within a square.

@STE Stencil is the same way with the added factor GSPOIT() where VC is set to the current color. The pixel won't be plotted unless the pixel color is the same as the original VC.

@PST GPSET with Stencil. Enough said.

@HAIR Heavy airbrush. This is where I experimented the most. The discoveries found here was shared with other functions, notably the WAIT 200 cycles.

And you know what? The implementation of the program itself was really quick. So much so, in fact, that it was done while there was still waiting time. I spent the rest of the time doodling. Dogs, Flowers, People, and other sketches. It really works! It makes me wonder whether or not I should spend points getting The New Art Academy!

Haha, joking aside, I did do several renderings that I like very much. I experimented with saving the pictures. Not too successful, so I will need to revisit the issue in later journal. Until then, please have fun with drawing sketches, and share!

UPDATE:

I managed to implement LOAD/SAVE GRP files. Pretty simple. SAVE GRP0:filename (top screen). GRP1:filename (bottom screen). Also GRP2, and GRP3, for back buffer screens. I will give you the subroutine codes only. I assume you know how to integrate it to the program.

@BIG :'BIG LINE TO
X2=TCHX:Y2=TCHY
GLINE X,Y,X2,Y2
GLINE X+1,Y,X2+1,Y2
GLINE X-1,Y,X2-1,Y2
GLINE X,Y+1,X2,Y2+1
GLINE X,Y-1,X2,Y2-1
X=X2:Y=Y2
RETURN

@SAV
SAVE "GRP1:G0"
RETURN

@LOA
LOAD "GRP1:G0"
RETURN

Also, there's no reason why we can't have at least reasonable User Interface. Try this:

@LOOP
GOSUB @DT
VSYNC 1:B=BUTTON(3)
IF B AND 8 THEN C=(C+1)%16
IF B AND 4 THEN C=(C+16-1)%16
IF B AND 1 THEN S=(S+MAXS-1)%MAXS
IF B AND 2 THEN S=(S+1)%MAXS

That's right. We just exchanged the up/down with left/right. What does this change give us? How about this?

@DT
CLS:GPAGE 0

GFILL 0,160,255,175
GFILL C*16,160,(C+1)*16,175,C
FOR I=0 TO 15
GFILL I*16,175,(I+1)*16-2,191,I
NEXT

COLOR 0
LOCATE 0,0:?"ACTION"
?"   CIRCLE"
?"   LINE"
?"   BOX"
?"   FILL"
?"   LINETO"
?"   PAINT"
?"   PSET"
?"   PAINT BORDER"
?"   AIRBRUSH"
?"   AIRBRUSH STENCIL"
?"   PSET STENCIL"
?"   HEAVY AIRBRUSH STENCIL"
?"   BIG LINETO"
?"   SAVE GRP1:G0"
?"   LOAD GRP1:G0"

LOCATE 0,S+1:?">"

GPAGE 1
RETURN

Now the interface have gone from only a Dilbert nerd would tolerate, to the average programmer would tolerate. Quite a big difference with only small changes involved. Small, but significant changes. I made the mistake of coding a lot of PRINT, only to take them out once I realized this small change is all it takes. The lessons here are:
1. Good is the enemy of Great
2. Do not be afraid in discarding bad code!
3. Think then Do. Do then Think results in a lot of time wasted writing and discarding bad code.

I would love to have zoom, but the whole interface must be redesigned. Maybe a speech balloon and layer option, hmmm?