Plotting epicyclic patterns with canvas

Getting Started
1

Hi,

Trying to understand the canvas control.
Interested in plotting epicyclic patterns and functions
I am used to DOS BASIC and could not find any examples on how to convert the following example to the Xojo canvas.
Does anyone have any example on how to plot as such which includes the y and x axis?
Maybe an example like this may be included in the included Xojo examples.
Any help to get started is appreciated.

IBM-PC

10 SCREEN 2,0,0 'full screen hi-res graphics mode
15 R = 50:s = 50:N = 9
20 FOR A = 0 TO 23.14159 STEP .1
30 X = RCOS(A) + SCOS(NA) + 320 'centre pattern
40 Y = R/2SIN(A) + S/2SIN(N*A) + 100 'centre pattern
50 PSET(X,Y)
60 NEXT A

Reducing R and S will give smaller identical pattern.

2

in the canvas paint event:

  dim r as integer=50
  dim s as integer=50
  dim n as integer=9
  const pi2=6.28318

  dim x,y as integer
  dim x0 as integer=Round(g.Width/2)  //x canvas center
  dim y0 as integer=Round(g.Height/2) //y canvas center
  dim p() as integer  //polygon point list
  p.Append 0 //it start from 1 so add 1 dummy element
  for a as double=0 to pi2 step .1
    x=round(r*cos(a) + s*cos(n*a)+x0)
    y=round(sin(a)*r/2+sin(n*a)*s/2+y0)
    p.Append x
    p.Append y
  next
  
  g.ForeColor=rgb(0,0,0)  //choose line color
  g.DrawPolygon p  //draw
3

Thanks Antonio,
Pattern looks correct.
Slight difference due to graphics screen resolutions.
For canvas need to drop the “/2”. ie y=round(sin(a)r+sin(na)*s+y0)
to get a more symmetrical pattern.
To make it less polygon and more smoother curve need to reduce to step 0.01
this now looks exactly like the textbook picture.
Thanks to people like you and Xojo, now I can have some fun.
I don’t suppose you can get me started with how to draw a scaled x and y axis on the canvas that is spoiling me too much?

4

[quote=225041:@Chris Salonikas]I am used to DOS BASIC and could not find any examples on how to convert the following example to the Xojo canvas.
Does anyone have any example on how to plot as such which includes the y and x axis?
[/quote]

Ah GWBasic and Basica. Old memories…

Antonio has given you a modern way of doing what you want.

Let me show you how simple it is to go from an age old listing to Xojo :

//10 SCREEN 2,0,0 //full screen hi-res graphics mode // Create a new picture that will be used as canvas backdrop dim pic as new picture(Canvas1.width, Canvas1.Height, 32) // We will use the Graphics property of that picture to draw in dim g as graphics = pic.graphics //15 R = 50:s = 50:N = 9 dim R as integer = 50 dim s as integer = 50 dim N as integer = 9 //20 FOR A = 0 TO 2*3.14159 STEP .1 dim X, Y as double For A as double = 0 TO 2*3.14159 STEP .1 //30 X = R*COS(A) + S*COS(N*A) + 320 //centre pattern X = R*COS(A) + S*COS(N*A) + 320 //centre pattern //40 Y = R/2*SIN(A) + S/2*SIN(N*A) + 100 //centre pattern Y = R/2*SIN(A) + S/2*SIN(N*A) + 100 //centre pattern //50 PSET(X,Y) g.Pixel(X, Y) = &c00000000 //60 NEXT A next A // Sends the picture to the canvas Canvas1.Backdrop = pic

In Xojo, a double bar // or an apostrophe ' replaces the GWBasic or PC Basic REM. Note I placed your code above the Xojo one for easy reference.

Here is what I did, line by line. I also added relevant links to the language reference (LR).

In Xojo, there are no line numbers.

As you can see, line 10 has been replaced by the creation of a picture and its graphics property that will be used to mimic the PC graphics mode.
http://documentation.xojo.com/index.php/picture
http://documentation.xojo.com/index.php/graphics

Line 15 has been replaced by 3 lines of declarations. Note that in Xojo you need to dim a variable and indicate its type before you use it. Note the same kind of declaration below line 20 for X and Y.
http://documentation.xojo.com/index.php/Category:Language_Data_Types-Common

Line 20 is almost identical, but again, A needs to be defined, which is achieved by the code A as double.

30 and 40 are identical to your code. Cos and Sin are as far as I remember just the same.
http://documentation.xojo.com/index.php/Cos
http://documentation.xojo.com/index.php/sin

Line 50 has been replaced by another command, which sets the color of an individual pixel.
http://documentation.xojo.com/index.php/Graphics.Pixel
http://documentation.xojo.com/index.php/Color

60 code is identical.

Finally, the last line of the Xojo code puts the newly created picture into the canvas.

That is a long development for a short piece of code, but you may enjoy understanding better the changes and similarities involved.

Since the 640 x 200 hi res mode of the IBM-PC, screen resolution has increased dramatically. You can change the values in your program to accommodate the larger screen, and instead of plotting only one pixel, draw four at a time. I tried multiplying R, S and N by 3, that is more like the current screen size.

5

Thanks Michel for a very educational tutorial.
Even though I could accomplish results with Antonio’s answer I can relate better plotting by pixel.
For educational purposes I wanted to plot pixel by pixel and see the pattern developing gradually.
Now I need an example on how to draw x an y axis on the canvas as compared to the GWBASIC screen.
Thank you again for giving me a strong momentum.

6

Michel
In line 5 of your code I am getting an error
Redefine identifier. This name is already defined by parameter g
dime g as graphics= pic.graphics.

not yet ready to resolve this error please help.

7

[quote=225072:@Chris Salonikas]Michel
In line 5 of your code I am getting an error
Redefine identifier. This name is already defined by parameter g
dime g as graphics= pic.graphics.

not yet ready to resolve this error please help.[/quote]

Sorry. That code is to go into a button Action event.

If you want to place it in the Paint event you want to dispose of the picture and its Graphics property :

//10 SCREEN 2,0,0 //full screen hi-res graphics mode //15 R = 50:s = 50:N = 9 dim R as integer = 50 dim s as integer = 50 dim N as integer = 9 //20 FOR A = 0 TO 2*3.14159 STEP .1 dim X, Y as double For A as double = 0 TO 2*3.14159 STEP .1 //30 X = R*COS(A) + S*COS(N*A) + 320 //centre pattern X = R*COS(A) + S*COS(N*A) + 320 //centre pattern //40 Y = R/2*SIN(A) + S/2*SIN(N*A) + 100 //centre pattern Y = R/2*SIN(A) + S/2*SIN(N*A) + 100 //centre pattern //50 PSET(X,Y) g.Pixel(X, Y) = &c00000000 //60 NEXT A next A

To draw a line, see http://documentation.xojo.com/index.php/Graphics.DrawLine. There are several basic shapes available. See http://documentation.xojo.com/index.php/graphics

8

Thanks for the guide to making the axis.

I put the original code into a button Action event.
After clicking on the button I get a white canvas only not the pattern.
The new code placed in the paint event does not do anything but I can see some faint black pixels.

9

[quote=225079:@Chris Salonikas]Thanks for the guide to making the axis.

I put the original code into a button Action event.
After clicking on the button I get a white canvas only not the pattern.
The new code placed in the paint event does not do anything but I can see some faint black pixels.[/quote]

They are faint because they are very small. Resolutions has at least doubled since the original PC. Try modifying your code to plot four in a square instead of one.

That would be a good occasion to try and build a Pset method that does that, as an exercise.

10

Thanks Michel
Both code now work.
I have better understanding.
It 11 pm here and now that I got excited I will probably not get any sleep.