sb / smallbasic-editor

Home to the Small Basic editor (beta)
https://smallbasic-publicwebsite-code.azurewebsites.net/
MIT License
101 stars 34 forks source link

SMALL BASIC - More methods for further geometric forms ... #192

Open boa2145 opened 2 years ago

boa2145 commented 2 years ago

In SMALL BASIC I can draw various geometric figures, e.g. square, rectangle, circle, ellipse and triangle and fill them in with color. However, it is not possible to draw a n-star or a n-gon, for example. I can only create stars and n-gons with the turtle graphics, but then I have the problem of not being able to fill the figure with color. That's only possible with turtle-tricks, but the filled area is not 100% because of the free corners by the turtle drawing method. It would be very nice if SMALL BASIC provided more methods with which one could draw stars, any n-gons or even free figures and fill them in with colors.

VBAndCs commented 1 year ago

You can use VB .NET or C# to create a lib for small basic to do what you want: https://social.technet.microsoft.com/wiki/contents/articles/53826.small-basic-extensions.aspx And there are many extension libs that may offer you what you want. The graphics window is a wpf window, and you can create complex graphics in wpf by using the System.Windows.Shapes.Path class.

But, on the other hand, SB shouldn't be used beyond what it is created for, as it should be a step up towards learning VB.NET. And to make this even easier, I created the Small Visual Basic language on top of Small Basic, with more compiler features and a windows forms designer and library. You can crate any shape you want as a Xaml file, and add it to the toolbox folder, so you can drag it on the form and use it as a control, and fill it with any back color you want! I just released sVB 2.0, which can crate a multi form project with a common Global.sb file to hold global variables and functions to be used from any form in the project. Try it: https://github.com/VBAndCs/sVB-Small-Visual-Basic/releases/tag/v2.0

VBAndCs commented 1 year ago

Also, you can do what you want with SB directly by drawing overlapping triangles and rectangles and fill them! for example:

GraphicsWindow.FillTriangle(150, 50, 50, 150, 200, 200)
GraphicsWindow.FillTriangle(50, 50, 100, 150, 150, 100)

image

boa2145 commented 1 year ago

Hi Mohammad, thanks for your replies. I am a hobby programmer and only use MS BASIC-Dialects like Small Basic, QBasic, QuickBasic, GW-Basic. I also love Scratch and a bit Python, too. So I'm interested in programming in different fields of education and not in professional development. I am not able to use other languages (e.g. C++, C#) to solve my problems in Small Basic.

My problem in Small Basic is, for example: I try to program the flags of the world. Sometimes there are special geometric figures like a pentagram (Fünfstern -> USA) or hexagram (Sechsstern -> Israel) or seven-star (Siebenstern -> Australia). With the turtle I can program these figures and fill them out with color while creating further turtles inside. On the other hand I could divide a five-star, six-star and seven-star in triangles. I then have to find an algorithm to create any five- or six- or seven-star in different sizes, colors, borders and locations on the graphics window. That is my current challenge. Maybe you can help me. That would be great.

Regards ... Gregor

VBAndCs commented 1 year ago

@boa2145 Use images for flags. Also, you may take a look at small visual basic, as it is meant for education to be more powerful yet easier that small basic.

boa2145 commented 1 year ago

I included images for special flags (e.g. Argentina), but I want to program colored n-stars, too. How can I install Small Visual Basic?

VBAndCs commented 1 year ago

It doesn't require installation. Download the zip file from the assets at the bottom of this page: https://github.com/VBAndCs/sVB-Small-Visual-Basic/releases/tag/v2.0 It only reqyires .NET framework 4.8. If you don't have it on your PC, install it from: https://go.microsoft.com/fwlink/?LinkId=2085155

boa2145 commented 1 year ago

Well, Small Visual Basic works. Now I have to find an introduction to program with your app. Do you know a Small Visual Basic tutorial?

VBAndCs commented 1 year ago

See the readme https://github.com/VBAndCs/sVB-Small-Visual-Basic/blob/master/Readme.md and try the samples in the sVB folder. Note: I fixed a fatal bug (due to recent updates) that crashes the cars demo sample. I just updated the zip file without changing the version, so, if you downloaded it before 35 minutes, please redownload it. https://github.com/VBAndCs/sVB-Small-Visual-Basic/releases/download/v2.0/sVB.2.1.zip

VBAndCs commented 1 year ago

@boa2145 I've added a GeometricPath object to sVB to allow you to draw complex shapes, and add them to the Shapes collection to be able to rotate and animate them. You can crate a figure in the GeometricPath like this:

GraphicsWindow.BrushColor = Colors.AliceBlue
GraphicsWindow.PenColor = Colors.Red
GraphicsWindow.PenWidth = 3

GeometricPath.CreateFigure(100, 100)
GeometricPath.AddLineSegment(50, 150, True)
GeometricPath.AddLineSegment(100, 200, True)
GeometricPath.AddLineSegment(200, 200, True)
GeometricPath.AddLineSegment(250, 150, True)
GeometricPath.AddLineSegment(200, 100, True)
GeometricPath.AddLineSegment(100, 100, True)

Sh = Shapes.AddGeometricPath()
Shapes.Rotate(Sh, 45)

This is the result: image

I will add more Add..Segment methods to allow you to draw arcs and Bezier arcs, and this will be available in sVB v2.2 very soon.

VBAndCs commented 1 year ago

Note that you can send False when adding anysegent to hide its line. Like this:

'....
GeometricPath.AddLineSegment(200, 200, False)
'....

image

VBAndCs commented 1 year ago

sVB v2.2 is released: https://github.com/VBAndCs/sVB-Small-Visual-Basic/releases/tag/v2.2 You can use it to draw complex shapes like this: image See the Geometric Path app in the samples folder.

boa2145 commented 1 year ago

Hi Mohammad, thanks for your effort and help. I'll try it next time when I want to program a flag. The first two parameters of the method "AddLineSegement" are the x/y-coordinates, aren't they? Could you explain "GeometricPath.CreateFigure(100, 100)", please?

VBAndCs commented 1 year ago

You can look at the methopd and params info definition here: https://github.com/VBAndCs/sVB-Small-Visual-Basic/blob/master/SmallBasicLibrary/Library/GeometricPath.vb or in the SmallVisualBasicLibrary.xml file in the bin directory in the sVB folder, or simply move the caret to the name of the method in sVB editor, and the popup help will show you all the info you need: image

image

The idea of dewing a figure is to start with a point, then supply another point with each Add...Segment method to draw a line, an arc or a curve between them. If you want to have a closed shape, then you should end up with the start point at the last segment you draw. By the way, you can have in depth detailed about this from WPF docs. SB and sVB are created with wpf and they emit MSIL code in the exe, so they are .NET languages. I am maitaining the same concepts in the sVB library like WinForms, so sVB can be an easy a step up towards VB.NET. So, you may read these docs: https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.pathfigure.startpoint?view=windowsdesktop-6.0#system-windows-media-pathfigure-startpoint https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.linesegment.-ctor?view=windowsdesktop-6.0#system-windows-media-linesegment-ctor(system-windows-point-system-boolean) https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.arcsegment.-ctor?view=windowsdesktop-6.0#system-windows-media-arcsegment-ctor(system-windows-point-system-windows-size-system-double-system-boolean-system-windows-media-sweepdirection-system-boolean) https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.beziersegment.-ctor?view=windowsdesktop-6.0#system-windows-media-beziersegment-ctor(system-windows-point-system-windows-point-system-windows-point-system-boolean) https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.quadraticbeziersegment.-ctor?view=windowsdesktop-6.0#system-windows-media-quadraticbeziersegment-ctor(system-windows-point-system-windows-point-system-boolean)

VBAndCs commented 1 year ago

@boa2145 sVB 2.2.5 now allows to add the GeometricPath to the Label control too, so, it is possible to draw complex shapes on the form. In fact this was possibe by adding a new figure in the Toolbox folder, so, it can be dragged on the form, but doing this required a good knowledge of XAML, which is not something to expect from kids and beginners. Now, thanks to you, anyone can write sVB code to create what ever shapes he wants.
You can create the geometric path as usual, then add it to the to a label, by calling the AddGeometricPath() method of this label:

Label1.AddGeometricPath(
    Colors.Red, ' Pen color
    2, ' Pen width
    Colors.Yellow ' Brush color
)

Label1.Rotate(45)

The advatage of adding shapes to the label, is that you can handle their events. See the Geometric Path2 in the samples folder. It adds the same shapes of the previous sample to the form, and allows you to drag them by the mouse. Untitled

I think it is a valuable addition to sVB. Thanks.

VBAndCs commented 1 year ago

@boa2145 This is more like what you need:

GraphicsWindow.PenColor = Colors.Black
GraphicsWindow.PenWidth = 3
GraphicsWindow.BrushColor = Colors.Red
X = Shapes.AddPolygon(
   {
      {0, 100},
      {76.5, 100},
      {100, 25},
      {123.5, 100},
      {200, 100},
      {140, 142.5},
      {160, 200},
      {100, 145},
      {40, 200},
      {62, 142.5}
   }
)

image

This will be available in the upcoming sVB 2.4.5

I think SB didn't add the Polygon because it will be verbose to add the points to the array in the traditional way. sVB allows to use array initializer {}, so, as you can see, you can supply any number of points to create any n-polygon you want.

boa2145 commented 1 year ago

Hello Mohammad, thanks for your help. Unfortunately I have the problem that I don't have enough instructions to get your code snippets to work. This makes me a little confused as to how to program on your Small Visual Basic IDE. Best regards... Gregory

VBAndCs commented 1 year ago

@boa2145 The readme file contains all instructions, but it is an accumulation of what's new in sVB versions over the bast two years. Also the samples folder contains many small samples that covers all the new features of sVB. Add these to the fact that sVB is in fact SB raised to the power of 2, so, you can use all you know about SB to code in sVB. I will provide a wll organized book about sVB after releasing v2.5, which will a major stop for the language for a while as it reached a mature and productive state. This version will come with an sVB notepad app, that shows its ability to create useful desktop apps with standard interface and functionality.

VBAndCs commented 1 year ago

@boa2145 As promised, sVB full reference book

1111

boa2145 commented 1 year ago

Hello Mohammad,

Thanks a lot for sharing your Small Visual Basic reference book with me. That is very big and helpful to use your special version of Small Basic. In the meantime I have realized that the turtle object in Small Basic is not very numerous and first of all pretty slow. What's the matter with your turtle object in terms with its speed?

Kind regards ... Gregor

Am So., 14. Mai 2023 um 17:34 Uhr schrieb Mohammad Hamdy Ghanem < @.***>:

@boa2145 https://github.com/boa2145 As promised, sVB full reference book https://drive.google.com/file/d/1pCnB4_7pEBc_wT2u258MmutYCuXwpvjN

[image: 1111] https://user-images.githubusercontent.com/48354902/238195685-dd4c2f5e-cc83-4597-bb51-d1f583507243.png

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1546926194, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMRDE7EJ4VCNBZGTPRLXGD3QPANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>

VBAndCs commented 1 year ago

@boa2145 You can increase the turtle speed: Turtle.Speed = 10 But the turtle will always be relatively slow. It is meant to be fun for kids, not a very practical drawing tool.

boa2145 commented 1 year ago

Hello Mohammad,

yes, Small Basic's turtle obeject has only a few methods. It is slow with speed = 10, too. Complex geometrical shapes are almost impossible. I also use the turtle with Python and TigerJython, last one has a big module called "gturtle", but the module "turtle" by Python is also much better than Small Basic's one.

Regards ... Gregor 😊

Mohammad Hamdy Ghanem @.***> schrieb am Di., 16. Mai 2023, 09:01:

@boa2145 https://github.com/boa2145 You can increase the turtle speed: Turtle.Speed = 10 But the turtle will always be relatively slow. It is meant to be fun for kids, not a very practical drawing tool.

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1549099428, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMTK653PPIRER7VORI3XGMQ5TANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>

boa2145 commented 1 year ago

Hello Mohammed,

I'll study your sVB reference, but it will take me a while to get there. Small Visual Basic is probably much more powerful than Small Basic. I've already seen that sVB also has arguments and parameters using procedures, which I really miss in Small Basic. As a result, there are local and global variables in sVB, which makes programming much more interesting and easier.

Is it possible for you to expand the skills of turtle programming at sVB? If you look at the turtle module called "turtle" for Python, you'll see that there are many more methods there. This makes it possible to use "begin_fill" and "end_fill" to easily mark the area of the source code that is later to be filled with color. This doesn't work with Small Basic. You can only draw lines, but it is not possible to fill the forms with colors. I would love it if you could extend the power of turtle programming for sVB. This would give you many more options when programming the turtle.

It's great that you have further developed Small Basic and that there is also a thick manual for it. You will have invested a lot of work. Respect!!!

Kind regards from Germany ... Gregor

Hallo Mohammad,

ich werde deine sVB-Referenz studieren, aber es wird eine Weile dauern, bis ich das geschafft habe. Vermutlich ist Small Visual Basic viel leistungsfähiger als Small Basic. Ich habe schon gesehen, dass es bei sVB auch Argumente und Parameter bei den Prozeduren gibt, was ich bei Small Basic sehr vermisse. Es gibt dadurch lokale und globale Variablen bei sVB, womit man viel besser programmieren kann.

Ist es möglich, dass du mal bei sVB die Fähigkeiten der Turtle-Programmierung erweiterst? Wenn du dir das Modul "turtle" für Python anschaust, wirst du feststellen, dass es dort viel mehr Methoden gibt. So ist es möglich, ganz einfach mit "begin_fill" und "end_fill" den Bereich des Quellcodes zu markieren, der später farbig gefüllt werden soll. Mit Small Basic funktioniert das nicht. Man kann nur Formen zeichnen, aber nicht farbig füllen. Ich fände es toll, wenn du die Leistungsfähigkeit der Turtle Programmierung für sVB erweitern könntest. Dadurch hätte man viel mehr Möglichkeiten bei der Turtle Programmierung.

Toll, dass du Small Basic weiterentwickelt hast und dass es auch ein dickes Handbuch dafür gibt. Du wirst sehr viel Arbeit investiert haben. Respekt!!!

Herzliche Grüße ... Gregor

Am Di., 16. Mai 2023 um 09:01 Uhr schrieb Mohammad Hamdy Ghanem < @.***>:

@boa2145 https://github.com/boa2145 You can increase the turtle speed: Turtle.Speed = 10 But the turtle will always be relatively slow. It is meant to be fun for kids, not a very practical drawing tool.

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1549099428, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMTK653PPIRER7VORI3XGMQ5TANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>

boa2145 commented 1 year ago

I forgot: You can find me on Tumblr. I have three programming blogs there. My topics are programming, education, learning and teaching. I am not a professional programmer, but I love programming in the context of learning and teaching. Last not least I am an old Basic and nowadays a Python enthusiast.

  1. basic-retro-programming, 2. small-basic-programming and 3. python-programming-language

Am Di., 16. Mai 2023 um 09:01 Uhr schrieb Mohammad Hamdy Ghanem < @.***>:

@boa2145 https://github.com/boa2145 You can increase the turtle speed: Turtle.Speed = 10 But the turtle will always be relatively slow. It is meant to be fun for kids, not a very practical drawing tool.

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1549099428, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMTK653PPIRER7VORI3XGMQ5TANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>

VBAndCs commented 1 year ago

@boa2145 Thanks Gregor for your great suggestion. I think it may be possible to fill the shape drawn by the turtle, by defining a geometric path for the segments it draws, the same way used to draw the pentagon. I've posted this in the sVB issues section as a proposal, and I will consider it in next releases. And you are welcome to post any other issues or proposals there, not to disturb this repo admins. Thanks.

VBAndCs commented 1 year ago

@boa2145 It's done. You can install sVB v2.8.4, where you can use the turtle can fill an area, by calling the CreateFigure and FillFigure methods.

X = Turtle.X
Y = Turtle.Y

Turtle.CreateFigure()
Turtle.Move(200)
Turtle.TurnRight()
Turtle.Move(200)
Turtle.TurnRight()
Turtle.Move(200)
Turtle.TurnRight()
Turtle.Move(200)
Turtle.FillFigure()

Turtle.CreateFigure()
Turtle.TurnLeft()
Turtle.Move(200)
Turtle.MoveTo(200, 200)
Turtle.MoveTo(350, 200)
Turtle.MoveTo(X, Y)
GraphicsWindow.BrushColor = Colors.Red
Turtle.FillFigure()

image

boa2145 commented 1 year ago

Hello Mohammad,

Thank you very much for your new turtle feature to fill shapes with color. I am very happy that you implemented it so quickly. I enclose 2 screenshots and sb-files to demonstrate the two different five stars and you see the effect. Then I enclose an IDE screenshot. You can see on the top left that the font is double. Is that right?

Kind regards and thanks for your support ... Gregor alias boa2145

Am So., 21. Mai 2023 um 13:17 Uhr schrieb Mohammad Hamdy Ghanem < @.***>:

@boa2145 https://github.com/boa2145 It's done. You can install sVB v2.8.4 https://marketplace.visualstudio.com/manage/publishers/modernvbnet?src=ModernVBNET.sVBInstaller, where you can use the turtle can fill an area, by calling the CreateFigure and FillFigure methods.

X = Turtle.XY = Turtle.Y Turtle.CreateFigure()Turtle.Move(200)Turtle.TurnRight()Turtle.Move(200)Turtle.TurnRight()Turtle.Move(200)Turtle.TurnRight()Turtle.Move(200)Turtle.FillFigure() Turtle.CreateFigure()Turtle.TurnLeft()Turtle.Move(200)Turtle.MoveTo(200, 200)Turtle.MoveTo(350, 200)Turtle.MoveTo(X, Y)GraphicsWindow.BrushColor = Colors.RedTurtle.FillFigure()

[image: image] https://user-images.githubusercontent.com/48354902/239737101-42b207a9-1038-4f05-b206-792fffef3257.png

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1556152439, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMRUZ34BI7V5HRZSM7DXHH2VBANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>

VBAndCs commented 1 year ago

@boa2145 Note that you are replaying to GitHub no to my email, so, nothing is attached. You need to open this issue in GitHub and post any code and images you want.

boa2145 commented 1 year ago

Hello Mohammad,

Thanks for your hint. GitHub is a bit confusing for me, but I will send you my ideas, improving suggestions and replies to sVB issues on GitHub. I really appreciate your helpfulness and motivation. I will read your sVB reference book completely.

Kind regards ... Gregor 😊

Mohammad Hamdy Ghanem @.***> schrieb am So., 21. Mai 2023, 22:07:

@boa2145 https://github.com/boa2145 Note that you are replaying to GitHub no to my email, so, nothing is attached. You need to open this issue in GitHub and post any code and images you want.

— Reply to this email directly, view it on GitHub https://github.com/sb/smallbasic-editor/issues/192#issuecomment-1556279394, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3D5YMSU7WMPLKIGIDBBRKLXHJYXTANCNFSM6AAAAAAQO5FJ4M . You are receiving this because you were mentioned.Message ID: @.***>