« previous next »
Pages: [1]   Go Down

Author Topic: A little graphics demo, spinning fog, balls & lines.  (Read 4246 times)

0 Members and 1 Guest are viewing this topic.

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
A little graphics demo, spinning fog, balls & lines.
« on: February 19, 2021, 11:07:45 am »
Played around with some old graphics code this morning over coffee, just wanting to make something.  This shows a spinning blue fog background, with balls attached to lines that bounce around.  Got the bouncing line idea from old Qbasic code I saved years ago. 

RotoZoom is awesome.

- Dav

Code: QB64: [Select]
  1. '===================
  2. 'FoggyBall&Lines.bas
  3. '===================
  4. 'Just a little graphics demo, by Dav FEB/2021
  5. 'Shows balls attached to lines, with some spinning fog.
  6. 'Inspired from code posted on the old QuickBasic echo.
  7. 'Credits go to that unknown QB coder from the 1990's.
  8. 'RotoZoom taken from the QB64 wiki.
  9.  
  10. SCREEN _NEWIMAGE(700, 700, 32)
  11.  
  13.  
  14. 'Make a blue fog background image
  15. back& = _NEWIMAGE(_WIDTH, _HEIGHT, 32)
  16. _DEST back&
  17. FOR i = 1 TO 10000
  18.     ball RND * _WIDTH, RND * _HEIGHT, RND * 30, 128, 128, 200, RND * 20
  21.  
  22. NumOfLines = 20
  23. Speed = 10
  24.  
  25. DIM LineX(NumOfLines), LineY(NumOfLines)
  26. DIM XDir(NumOfLines), YDir(NumOfLines), XSpd(NumOfLines), YSpd(NumOfLines)
  27. DIM RedVal(NumOfLines), GrnVal(NumOfLines), BluVal(NumOfLines), BallSize(NumOfLines)
  28.  
  29. 'generate random starting values
  30. FOR c = 1 TO NumOfLines
  31.     LineX(c) = RND * _WIDTH
  32.     LineY(c) = RND * _HEIGHT
  33.     XSpd(c) = RND * Speed
  34.     YSpd(c) = RND * Speed
  35.     RedVal(c) = RND * 200 + 50
  36.     GrnVal(c) = RND * 200 + 50
  37.     BluVal(c) = RND * 200 + 50
  38.     BallSize(c) = RND * 20 + 10
  40.  
  41.  
  43.  
  44.     CLS
  45.  
  46.     RotoZoom _WIDTH / 2, _HEIGHT / 2, back&, 2, a
  47.     a = a + .5: IF a >= 360 THEN a = a - 360
  48.  
  49.     'compute values
  50.     FOR t = 1 TO NumOfLines
  51.         IF LineX(t) > _WIDTH THEN XDir(t) = 0: XSpd(t) = RND * Speed
  52.         IF LineX(t) < 1 THEN XDir(t) = -1: XSpd(t) = RND * Speed
  53.         IF LineY(t) > _HEIGHT THEN YDir(t) = 0: YSpd(t) = RND * Speed
  54.         IF LineY(t) < 1 THEN YDir(t) = -1: YSpd(t) = RND * Speed
  55.         IF YDir(t) THEN LineY(t) = LineY(t) + YSpd(t) ELSE LineY(t) = LineY(t) - YSpd(t)
  56.         IF XDir(t) THEN LineX(t) = LineX(t) + XSpd(t) ELSE LineX(t) = LineX(t) - XSpd(t)
  57.     NEXT
  58.  
  59.     'draw NumOfLines and ball
  60.     FOR i = 1 TO NumOfLines - 1
  61.         LINE (LineX(i), LineY(i))-(LineX(i + 1), LineY(i + 1)), _RGB(RedVal(i), GrnVal(i), BluVal(i))
  62.         ball LineX(i), LineY(i), BallSize(i), RedVal(i), GrnVal(i), BluVal(i), 255
  63.     NEXT
  64.  
  65.     'connect last one to first one
  66.     LINE (LineX(NumOfLines), LineY(NumOfLines))-(LineX(1), LineY(1)), _RGB(RedVal(NumOfLines), GrnVal(NumOfLines), BluVal(NumOfLines))
  67.     ball LineX(NumOfLines), LineY(NumOfLines), BallSize(NumOfLines), RedVal(NumOfLines), GrnVal(NumOfLines), BluVal(NumOfLines), 255
  68.  
  69.     _DISPLAY
  70.     _LIMIT 60
  71.  
  73.  
  74.  
  75. SUB ball (BallX, BallY, size, r&, g&, b&, a&)
  76.     FOR s = 1 TO size STEP .4
  77.         CIRCLE (BallX, BallY), s, _RGBA(r&, g&, b&, a&)
  78.         r& = r& - 2: g& = g& - 2: b& = b& - 2
  79.     NEXT
  81.  
  82. SUB RotoZoom (X AS LONG, Y AS LONG, Image AS LONG, Scale AS SINGLE, Rotation AS SINGLE)
  83.     DIM px(3) AS SINGLE: DIM py(3) AS SINGLE
  84.     W& = _WIDTH(Image&): H& = _HEIGHT(Image&)
  85.     px(0) = -W& / 2: py(0) = -H& / 2: px(1) = -W& / 2: py(1) = H& / 2
  86.     px(2) = W& / 2: py(2) = H& / 2: px(3) = W& / 2: py(3) = -H& / 2
  87.     sinr! = SIN(-Rotation / 57.2957795131): cosr! = COS(-Rotation / 57.2957795131)
  88.     FOR i& = 0 TO 3
  89.         x2& = (px(i&) * cosr! + sinr! * py(i&)) * Scale + X: y2& = (py(i&) * cosr! - px(i&) * sinr!) * Scale + Y
  90.         px(i&) = x2&: py(i&) = y2&
  91.     NEXT
  92.     _MAPTRIANGLE _SEAMLESS(0, 0)-(0, H& - 1)-(W& - 1, H& - 1), Image& TO(px(0), py(0))-(px(1), py(1))-(px(2), py(2))
  93.     _MAPTRIANGLE _SEAMLESS(0, 0)-(W& - 1, 0)-(W& - 1, H& - 1), Image& TO(px(0), py(0))-(px(3), py(3))-(px(2), py(2))
  95.  
  96.  
Logged

Offline 191Brian

  • Newbie
  • Posts: 91
    • View Profile
    • My Itch page
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #1 on: February 19, 2021, 04:07:58 pm »
That is very cool so impressive what  you can achieved is QB64, I cribbed Rotozoom for hover boy its great even though I don't fully understand how it works.

Brian ...
Logged
Brian ...

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #2 on: February 19, 2021, 04:48:12 pm »
Dammit Dav, you owe me a new laptop. I had it running full screen, but I heard a noise outside, so I went out to investigate. I left the door open, and when I returned, the cat apparently got in, saw your program running, and tore the computer to shreds.

Pete
Logged
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #3 on: February 19, 2021, 06:50:02 pm »
Oh! Now I see where all those lines are coming from in background!
Code: QB64: [Select]
  1. 'Make a blue fog background image
  2. back& = _NEWIMAGE(_WIDTH, _HEIGHT, 32)
  3. '_DEST back&
  4. FOR i = 1 TO 1000
  5.     ball RND * _WIDTH, RND * _HEIGHT, RND * 30, 128, 128, 200, RND * 20
  7. '_DEST 0
  8.  

Very very nice! for 'old fashioned' lines and circle sort of thing ;-))
Logged

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #4 on: February 19, 2021, 06:51:52 pm »
Quote from: Pete on February 19, 2021, 04:48:12 pm
Dammit Dav, you owe me a new laptop. I had it running full screen, but I heard a noise outside, so I went out to investigate. I left the door open, and when I returned, the cat apparently got in, saw your program running, and tore the computer to shreds.

Pete

I thought my Hoover Board's gyro-scope was on the fritz.
Logged

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #5 on: February 19, 2021, 07:02:23 pm »
Sounds like you have a SCREEN 0 loving cat too, @Pete.  Congratz.  My wife acts close to that sometimes when I change TV channels.

@191Brian.  Bplus put together a RotoZoom3 version, it seems faster for me.  Here's an example of using that.

(Btw, Thanks for sharing that with me, @bplus.  I'm just starting to tap into its power.)

- Dav

Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(700, 700, 32)
  2.  
  4.  
  5. back& = _NEWIMAGE(_WIDTH, _HEIGHT, 32)
  6. _DEST back&
  7. FOR i = 1 TO 10000
  8.     ball RND * _WIDTH, RND * _HEIGHT, RND * 30, 128, 128, 200, RND * 20
  11.  
  13.     CLS
  14.     RotoZoom3 _WIDTH / 2, _HEIGHT / 2, back&, 15, 1, a
  15.     a = a + .01: IF a >= 360 THEN a = a - 360
  16.     _DISPLAY
  17.     _LIMIT 60
  19.  
  20.  
  21. SUB ball (BallX, BallY, size, r&, g&, b&, a&)
  22.     FOR s = 1 TO size STEP .4
  23.         CIRCLE (BallX, BallY), s, _RGBA(r&, g&, b&, a&)
  24.         r& = r& - 2: g& = g& - 2: b& = b& - 2
  25.     NEXT
  27.  
  28. ' Description:
  29. ' Started from a mod of Galleon's in Wiki that both scales and rotates an image.
  30. ' This version scales the x-axis and y-axis independently allowing rotations of image just by changing X or Y Scales
  31. ' making this tightly coded routine a very powerful and versatile image tool.
  32. SUB RotoZoom3 (X AS LONG, Y AS LONG, Image AS LONG, xScale AS SINGLE, yScale AS SINGLE, radianRotation AS SINGLE)
  33.     ' This assumes you have set your drawing location with _DEST or default to screen.
  34.     ' X, Y - is where you want to put the middle of the image
  35.     ' Image - is the handle assigned with _LOADIMAGE
  36.     ' xScale, yScale - are shrinkage < 1 or magnification > 1 on the given axis, 1 just uses image size.
  37.     ' These are multipliers so .5 will create image .5 size on given axis and 2 for twice image size.
  38.     ' radianRotation is the Angle in Radian units to rotate the image
  39.     ' note: Radian units for rotation because it matches angle units of other Basic Trig functions
  40.     '       and saves a little time converting from degree.
  41.     '       Use the _D2R() function if you prefer to work in degree units for angles.
  42.  
  43.     DIM px(3) AS SINGLE: DIM py(3) AS SINGLE ' simple arrays for x, y to hold the 4 corners of image
  44.     DIM W&, H&, sinr!, cosr!, i&, x2&, y2& '   variables for image manipulation
  45.     W& = _WIDTH(Image&): H& = _HEIGHT(Image&)
  46.     px(0) = -W& / 2: py(0) = -H& / 2 'left top corner
  47.     px(1) = -W& / 2: py(1) = H& / 2 ' left bottom corner
  48.     px(2) = W& / 2: py(2) = H& / 2 '  right bottom
  49.     px(3) = W& / 2: py(3) = -H& / 2 ' right top
  50.     sinr! = SIN(-radianRotation): cosr! = COS(-radianRotation) ' rotation helpers
  51.     FOR i& = 0 TO 3 ' calc new point locations with rotation and zoom
  52.         x2& = xScale * (px(i&) * cosr! + sinr! * py(i&)) + X: y2& = yScale * (py(i&) * cosr! - px(i&) * sinr!) + Y
  53.         px(i&) = x2&: py(i&) = y2&
  54.     NEXT
  55.     _MAPTRIANGLE _SEAMLESS(0, 0)-(0, H& - 1)-(W& - 1, H& - 1), Image TO(px(0), py(0))-(px(1), py(1))-(px(2), py(2))
  56.     _MAPTRIANGLE _SEAMLESS(0, 0)-(W& - 1, 0)-(W& - 1, H& - 1), Image TO(px(0), py(0))-(px(3), py(3))-(px(2), py(2))
  58.  
« Last Edit: February 19, 2021, 07:14:51 pm by Dav »
Logged

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #6 on: February 19, 2021, 07:08:33 pm »
@Dav

I didn't know it was faster, OK! That makes up for my recent frustration of it messing up nice clean lines by a pixel once and awhile. The advantage to Roto 3 is being able to rotate on x and y axis by shrinking and increasing the scale of one and leaving the other constant.
Logged

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #7 on: February 19, 2021, 07:10:54 pm »
Yes, it seems faster to me, on my old slow laptop at least it shows faster.

Could you maybe post an small example for me of using RotoZoom3 better?  I'd apperciate it...  You can ignore that request if you want -- I just reread what you posted about it, and had a thought of making something...

- Dav
« Last Edit: February 19, 2021, 07:14:01 pm by Dav »
Logged

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #8 on: February 20, 2021, 01:14:52 am »
I had posted 2 demo's here they are again: :)

I think the second one really nails it!
Be careful not to escape from it too soon, must see finale.

And let me know if you want to paint with images, or balls or see paint balls ;-))
Oh some of the stuff buried by time...
* Rotate Image.zip (Filesize: 735.89 KB, Downloads: 188)
* Another RotoZoom Demo.zip (Filesize: 11.24 KB, Downloads: 187)
« Last Edit: February 20, 2021, 01:23:46 am by bplus »
Logged

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: A little graphics demo, spinning fog, balls & lines.
« Reply #9 on: February 20, 2021, 06:43:58 am »
Oh cool!  I didn't have the rotate image one.

Thanks!

- Dav
Logged
Pages: [1]   Go Up
« previous next »