SpyroDraw v1.2 Drawing program (iPad & iPhone)

[rbytes]

I had forgotten about linecap too. It saves a lot of code. Until I remembered it, I was drawing a filled circle at the start and end of each line!

[rbytes]

This was an easy conversion for me, as I have a system I have used for several years.
I wanted to save you time, Dav, so you can work on new drawing features.

The screen shot is from my iPhone 6

Code: Select all

'spyrodraw.txt v1.2
'A simple finger drawing program
'Coded by Dav, September/2016
'Save function and all-device
'compatibility by ricardobytes

'Draws up to 4 points at a time.
'Choose basic colors and brush size.

'To use: Select the color you want.
'Select number of points to draw with.
'Use slider to choose brush size to use.
'Toggle brush shadows on/off with button.
'Clear the screen with the C button.
'Save to Camera Roll with the S button.
'Selecting X will exit program.



SET BUTTONS CUSTOM
SET TOOLBAR OFF
SET ORIENTATION TOP
laun$=LAUNCHER$ ()
GET SCREEN SIZE w,h
dev$=DEVICE_TYPE$()
iostest=0                ' set to 1 to test other devices on iPad
IF iostest THEN
  dev$=""
  w=375!h=667            ' to test iPhone 6
ENDIF
rw=w/768!rh=h/1024
SET BUTTONS FONT SIZE 42*rh
GRAPHICS
GRAPHICS CLEAR 0,0,0
FILL COLOR .5,.5,.5
F$="temp.jpg"
DRAW COLOR .5,.5,.5
SPRITE "line" BEGIN w,2
DRAW LINE 1,0 TO w,0
SPRITE "line" END
SPRITE "line" AT 1,h-60*rh
SPRITE "line" SHOW
SPRITE "square" BEGIN 50*rh,50*rh
FILL RECT 25*rh,25*rh SIZE 25*rh
SPRITE "square" END
SPRITE "square" AT w-210*rw,h-52*rh
SPRITE "square" SHOW
FILL COLOR 0,0,0
SPRITE "circle" BEGIN 50*rh,50*rh
FILL CIRCLE 25*rh,25*rh SIZE 25*rh
SPRITE "circle" END
SPRITE "circle" AT w-210*rw,h-52*rh SCALE 10/25
SPRITE "circle" SHOW
DRAW COLOR 1,1,1
BUTTON "quit" TEXT "X" AT w-50*rw,0 SIZE 50*rw,50*rh
BUTTON "clear" TEXT "C" AT 454*rw,0 SIZE 50*rw,50*rh
BUTTON "save" TEXT "S" AT 504*rw,0 SIZE 50*rw,50*rh

'defaults
SIZE=10
COLOR = 1
points =4
SHADOW = 1

'draw screen
GOSUB updatecolors
GOSUB updatepoints
GOSUB updatesize
DRAW LINECAP ROUND

'main loop
DO
    IF x<>-1 AND x<>0 THEN!oldx=x!oldx2=x2!ENDIF
    IF y<>-1 AND y<>0 THEN!oldy=y!oldy2=y2!ENDIF

    GET TOUCH 0 AS x,y
    IF (x=-1 AND y=-1) OR (x=oldx AND y=oldy) THEN connect=0

    IF x<>-1 AND y>(50*rh)+SIZE AND y < h-(65*rh)-SIZE THEN

       'draw 1 point where finger is
       IF connect THEN DRAW LINE oldx,oldy TO x,y
       
       IF points >1 THEN
         cx=w/2!cy=h/2 'find the center spot
         'the other side of the universe...
         x2=cx-x+cx!y2=cy-y+cy 
         '2nd one
         IF connect THEN DRAW LINE oldx2,oldy2 TO x2,y2
         
       END IF

       IF points > 2 THEN
          '3rd and 4th one
          IF connect THEN DRAW LINE oldx,oldy2 TO x,y2
          IF connect THEN DRAW LINE oldx2,oldy TO x2,y

       END IF
       connect=1

   ELSE


   'check colors change
   IF BUTTON_PRESSED("1") THEN 
     COLOR = 1 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("2") THEN 
     COLOR = 2 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("3") THEN 
     COLOR = 3 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("4") THEN 
     COLOR = 4 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("5") THEN 
     COLOR = 5 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("6") THEN 
     COLOR = 6 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("7") THEN 
     COLOR = 7 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("8") THEN 
     COLOR = 8 ! GOSUB updatecolors
   END IF
   IF BUTTON_PRESSED("9") THEN 
     COLOR = 9 ! GOSUB updatecolors
   END IF

   'check num of points change
   IF BUTTON_PRESSED("p1") THEN
     points=1 ! GOSUB updatepoints
   END IF
   IF BUTTON_PRESSED("p2") THEN
     points=2 ! GOSUB updatepoints
   END IF
   IF BUTTON_PRESSED("p4") THEN
     points=4 ! GOSUB updatepoints
   END IF

   'check size change
   IF SLIDER_CHANGED("size") THEN
    newsize=INT(25*SLIDER_VALUE("size"))
    'don't allow under 1
    IF newsize => 1 THEN
      SIZE=newsize ! GOSUB updatesize
    END IF
   END IF

   'turn shadows on/off
   IF BUTTON_PRESSED("shadow") THEN
      IF SHADOW=1 THEN
        SHADOW=0
      ELSE
        SHADOW=1
      END IF
      GOSUB updatepoints
   END IF

   'clear screen
   IF BUTTON_PRESSED("clear") THEN 
      GRAPHICS CLEAR 0,0,0
      GOSUB updatesize
   END IF
   
   'save image
   IF BUTTON_PRESSED("save") THEN
     GRAPHICS SAVE 0,0, w,h TO F$
     ALBUM EXPORT F$
   END IF

   'quit button check
   IF BUTTON_PRESSED("quit") THEN
     IF laun$="desktop" THEN RUN "/-Launch.sb"
     END
   END IF

   END IF

UNTIL 0

END


'=======================================
'   G O S U B S / F U N C T I O N S
'=======================================

'============
updatecolors:  'Shows user color choice
'============

  DRAW COLOR 1,1,1 ! FILL COLOR 1,0,0
  IF COLOR=1 THEN a$="^" ELSE a$=""
  BUTTON "1" TEXT a$ AT 0,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 0,1,0
  IF COLOR=2 THEN a$="^" ELSE a$=""
  BUTTON "2" TEXT a$ AT 52*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 0,0,1
  IF COLOR=3 THEN a$="^" ELSE a$=""
  BUTTON "3" TEXT a$ AT 103*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 0,0,0 ! FILL COLOR 1,1,0
  IF COLOR=4 THEN a$="^" ELSE a$=""
  BUTTON "4" TEXT a$ AT 153*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 0,1,1
  IF COLOR=5 THEN a$="^" ELSE a$=""
  BUTTON "5" TEXT a$ AT 201*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 1,0,1
  IF COLOR=6 THEN a$="^" ELSE a$=""
  BUTTON "6" TEXT a$ AT 251*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 1,.5,0
  IF COLOR=7 THEN a$="^" ELSE a$=""
  BUTTON "7" TEXT a$ AT 303*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 0,0,0 ! FILL COLOR 1,1,1
  IF COLOR=8 THEN a$="^" ELSE a$=""
  BUTTON "8" TEXT a$ AT 353*rw,0 SIZE 50*rw,50*rh

  DRAW COLOR 1,1,1 ! FILL COLOR 0,0,0
  IF COLOR=9 THEN a$="^" ELSE a$=""
  BUTTON "9" TEXT a$ AT 403*rw,0 SIZE 50*rw,50*rh

  GOSUB setcolor

RETURN

'===========
updatepoints:  'shows how many points selected
'===========

  DRAW COLOR 1,1,1

  FILL COLOR 0,0,0
  IF points=1 THEN FILL COLOR .5,.5,1
  BUTTON "p1" TEXT "1" AT 554*rw,0 SIZE 50*rw,50*rh

  FILL COLOR 0,0,0
  IF points=2 THEN FILL COLOR .5,.5,1
  BUTTON "p2" TEXT "2" AT 605*rw,0 SIZE 50*rw,50*rh

  FILL COLOR 0,0,0
  IF points=4 THEN FILL COLOR .5,.5,1
  BUTTON "p4" TEXT "4" AT 656*rw,0 SIZE 50*rw,50*rh

  FILL COLOR 0,0,0
  IF SHADOW=1 THEN FILL COLOR .5,.5,1
  SET BUTTONS FONT SIZE 25*rw
  BUTTON "shadow" TEXT "Shadows" AT w-135*rw,h-50*rh SIZE 125*rw,50*rh
  SET BUTTONS FONT SIZE 42
  PAUSE .25
  GOSUB setcolor

RETURN

'==========
updatesize:  'brush slider choice
'==========

  SHADOW OFF
  FILL COLOR .5,.5,.5
  DRAW COLOR .5,.5,.5
  FIELD "brush" TEXT "Brush size:" AT 15*rw,h-48*rh RO
  FIELD "brush" BACK COLOR 0,0,0
  FIELD "brush" FONT COLOR 1,1,1
  FIELD "brush" FONT SIZE 20*rh
  SLIDER "size" VALUE SIZE/25 AT 150*rw,h-45*rh SIZE 400*rw
  FILL COLOR 0,0,0
  SPRITE "circle" AT w-210*rw,h-52*rh SCALE SIZE/25
  IF SHADOW=1 THEN SHADOW ON
  DRAW SIZE SIZE
  GOSUB setcolor

RETURN

'=======
setcolor:  'does the actual color setting 
'=======

  IF COLOR=1 THEN DRAW COLOR 1,0,0
  IF COLOR=2 THEN DRAW COLOR 0,1,0
  IF COLOR=3 THEN DRAW COLOR 0,0,1
  IF COLOR=4 THEN DRAW COLOR 1,1,0
  IF COLOR=5 THEN DRAW COLOR 0,1,1
  IF COLOR=6 THEN DRAW COLOR 1,0,1
  IF COLOR=7 THEN DRAW COLOR 1,.5,0
  IF COLOR=8 THEN DRAW COLOR 1,1,1
  IF COLOR=9 THEN DRAW COLOR 0,0,0
  IF SHADOW=1 THEN
     SHADOW ON ! SHADOW COLOR 1,1,1
  ELSE 
     SHADOW OFF
  END IF
  DRAW SIZE SIZE

RETURN

[Dav]

That's great, ricardobytes! Thank you. I'm glad I saw this before I got too far into a new layout. I was working on it without iPhone in mind. I'm going to post this new version at the top of the thread. No use for people to play with the old one.

Thanks again! I'm going to try to go up to 32 drawing points. It will be interesting to see how smart basic handles that many at a time.

- Dav

[rbytes]

You're welcome. If/when you add new code, it will usually work if you multiply horizontal position coordinates by rw and vertical position coordinates by rh. The same with horizontal and vertical sizes. Font sizes take more experimenting. I usually start with the larger value and then go smaller if the text won't fit where it is supposed to.

I think it will handle 32 points fine. The nice thing about drawing with straight lines is that if the drawing finger moves faster, the lines just get longer - the code doesn't need to cycle any faster.