For immediate releaseOptimale Systemer AS is proud to announce the free version of our command-line compiler. This is the same compiler that powers Smart Mobile Studio; a toolchain which represents the most advanced object pascal to JavaScript compiler on the marked.
February is upon us and so is our announced graphics competition! This is the first competition out of four this year. So this is your chance to win some exciting prices by showing off your Object Pascal skills!
The topic of this round is: graphics programming (eg. demo-scene, fractal art, visualizations etc).
The rules are as follows:
 Fractal art |  Demoscene |
First prize is a tablet device of your own choice (up to USD 750). So have your pick between
Primož Gabrijelčič
Developer of the popular omnithread library, author of the Smart Mobile Studio Bible, contributor to the Smart Mobile Studio IDE and RTL, and dedicated object pascal speaker and innovator
Christian Budde
Developer of various open source projects. Among these, the popular Delphi ASIO & VST Project for professional audio related development. Another focus of his work is Graphics, which is reflected in projects such as the modernized AggPas implementation, an independent object pascal png library and a native object pascal interface to TrueType fonts (called PascalType). He is also contributor and maintainer of Graphics32.
Currently he is working on the Smart Mobile Studio IDE and RTL.
All contributions must be delivered in full source and binary with no missing pieces. The project must compile on the current version of Smart Mobile Studio (1.1 branch).
Happy coding!
Every Delphi programmer knows how to use the canvas. Its easy, its straight forward and it can be a source of phenomenal frustration if you want to do more than draw straight lines. Good old TCanvas is, despite it’s ease of use, a dinosaur in terms of modern features. The moment you start thinking about anti-aliasing, alpha blending or anything pertaining to rotation – it’s game over for TCanvas.
Smart mobile studio implements (or wraps) the HTML5 canvas directly, which means that you have access to all the latest features. The HTML5 canvas was implemented by Apple (webkit codebase) and is the browser equivalent of their Quartz API. This means first of all that it’s a bit trickier to get going, but on the flipside once you master it you can generate some truly amazing graphical effects.
Before we dig into the canvas, i thought it might be best to get up to speed with some of the terminology you are bound to encounter. Some of the concepts are not bound directly to HTML5 but are loosely related to computer programming in general.
Double buffering simply means that you draw your graphics to an offscreen bitmap rather than directly onto the visible canvas. When you are finished drawing you copy (also called “blitting”) the result to the visible display in one fast operation. This technique reduces flickering and makes movement appear smooth. The reason double buffering works is because there is often a delay between your calls – and the actual pixel memory being altered by the CPU/GPU (graphical processing unit). It greatly depends on the kind of hardware you are running, but either way – double buffering is what people do.
On a side note I can mention that Delphi actually uses double buffering by default. If you look up the drawing mechanism for TWinControl you will find that Delphi allocates a new bitmap, draws the control, then copy the result onto the device context. The problem with Delphi is that it allocates a bitmap for each draw, which is extremely slow. Thankfully, we dont have to care about that under Smart Mobile Studio.
Under Delphi whenever you use the canvas and call methods like lineto, circle, ellipse etc. these functions are executed “as is”. So once you issue a call to lineTo the underlying WINAPI draws a line into the bitmap your canvas is connected to. This method is very effective, bare bone and does it’s job well. Sadly it is very tricky to create anything modern with this. It’s perfect for 1990’s user interfaces but doesnt cut it for 2013.
HTML5 doesnt really work this way (nor does quartz) because here everything is based on paths. A path is basically just an array of TPoints that you pre-calculate before anything is drawn on screen. So to draw a line you first have to call beginpath, then issue a moveto and lineto command (which we already know under delphi), and finally you draw the line with a call to stroke or endpath. Here is a code snippet from HTML5 Canvas Tutorials:
canvas.beginPath();
canvas.moveTo(100, 20);
// line 1
canvas.lineTo(200, 160);
// quadratic curve
canvas.quadraticCurveTo(230, 200, 250, 120);
// bezier curve
canvas.bezierCurveTo(290, -40, 300, 200, 400, 150);
// line 2
canvas.lineTo(500, 90);
canvas.lineWidth := 5;
canvas.strokeStyle := 'blue';
canvas.stroke();
Paths are cool
As you can probably imagine, by automating the variables involved you can really get some amazing results with very little effort. Check out this liquid particles demo for instance (click image):
Nice canvas demo
My personal favorite JavaScript demo has to be: or so they say
Also make sure you check out the graphics demos that ship with Smart Mobile Studio for more inspiration! And remember, the smart canvas maps more or less directly to the HTML5 canvas. We have added a few helper routines to make life easier for pascal programmers (and helper classes) but you will have no problems following a HTML5 JavaScript canvas tutorial with Smart Mobile Studio.
Alpha blending simply means that you can draw graphics that is semi-transparent. Typically alpha blending is associated with 32bit graphics (RGBA) where each pixel or dot on the display is represented by 4 bytes. The first 3 bytes represents red, green and blue while the last byte defines the opacity of the pixel. When you copy a bitmap onto another which uses opacity as an option, it will merge with the existing graphics rather than overlap with it.
In the golden days of 16 bit home computers (Amiga and Atari) the hardware supported sprites. A sprite is basically just a small, transparent picture which game programmers use to display and animate characters. In our day of fast processors and high speed 3d effects – there is no longer hardware support for sprites, but the concept of a “sprite” (as a moving graphical element) is still widely used. So if someone uses the term “sprite” or “bob” (the graphical co-processor in the Amiga was called “the blitter”, hence “blitter object”) you what they are talking about.
In this first installment we have taken a quick look at related concepts that you are bound to meet when programming graphics. Concepts like double buffering, sprites, alpha blending are universal and are deployed on all platforms regardless of language. So it’s handy to get to know these concepts straight away. We have also introduced how the HTML5 canvas works, that it uses paths rather than ad-hoc, brute force like good old TCanvas.
In the next installment we will dive into Smart Mobile Studio and familiarize ourselves with the API and draw some stuff. We will further look at how each of the above concepts work, things like double buffering, in real-life.
Waste of time? Think again!
Many programmers don’t get the demo scene. What could be the point of spending hours, days and weeks on creating effects? Well for me the demo scene has been one of the best things in my life. I grew up with Commodore 64, MSX, Atari and Amiga machines. And while we all loved to play games only the few asked the magical question “how”. Some were happy to just play the games, but the rest of us, those that became programmers as adults, were always the people who just had to ask the question “how the hell did they do that”?
I have been extremely privileged growing up in Norway during the 1980’s and 90’s, nowhere in the world (with exception of Germany, Sweden and Finland) was the demo scene stronger than in Norway. Even to this day we fill the viking ship annually with thousands of young programmers full of creativity (check out this site for tickets to The Gathering). So there can be little doubt that the “demo scene” is primarily a European phenomenon.
PS: if you are looking for talent then The Gathering should be the proverbial shangri-la !
Demo coding is one of the best ways of growing as a programmer and as a thinking individual. The problems you face (like tweening objects, calculating sprite paths, how one object stands in context to another, proportion, animation cycles – the works!) will help you in every avenue of life, including your personal life since it involved organization and thinking in terms of context. It will benefit you in the most unlikely of scenarios: Take an example from my life, I always wanted to code games, but I spent many years coding invoice systems, win32 services and all the “boring stuff”. But one day my employers wanted a 3d look and feel to their report, so i ended up using the skills i learned as a demo coder to complete tasks. Without it those reports would have been very dry, very dull and not very productive. So it turned out to be my creative side that made the difference, not my education (!) You dont learn stuff like this at the university.
No matter what your interests might be, from games programming to spreadsheets – you are bound to face the same mathematics and the same train of thought. But those that really succeed in these things are the programmers who took the time to really experiment with demo and games coding. Anyone can code a spreadsheet, but it’s the hacker that makes the numbers bounce 😉
Smart Mobile @ 98% complete
When you think “pascal”, you think database driven business applications right? Well that’s just wrong. Delphi (which is the universal name for object pascal) earned that label because it made database programming simple in the early 90’s. But object pascal as a language is capable of so much more. So much so that databases become almost trivial in comparison. Remember all those high-speed dos games? (if you don’t, then get an emulator) A lot of those games were coded in turbo pascal. This was before we had full OOP and the might of the VCL at our fingertips.
It thus stands to reason that with all the power of the Delphi XE2 and the latest free-pascal compiler, that object pascal could knock out some serious games right? I mean — when compared to a commodore 64, Atari ST or Amiga?
Remember that the commodore 64 contained the same cpu-chip that powers most modern dishwasher’s today. Yet that little machine running at 1Mz with an 8bit bandwidth knocked out some pretty cool games! Now imagine what you could do with a computer 10.000 times faster, with 32 bit graphics, 24 bit sound and an IDE unlike anything we had back in the 80’s!
Well, unless you are reading this on a Pentium PC, that computer is what you have right now.
The gathering, Vikingship, Norway
So… If they can do this on a 1mhz dishwasher, then surely we can do better right? With our dual-core processors, fifth generation 3d graphics chip-sets and latest operative systems?
Here are a couple of examples of what people can do with a commodore 64 (second video is from a modern PC, coded in machine code):
Instinct & Horizon C-64 Demo, 2008
And just how much brilliance can you pack into 64k of machine code?
And just to make it retro – here is the first Amiga demo i ever saw. This demo made me forget all about commodore 64 gaming, and ask the question “how”. This demo changed me from a gamer for a coder:
Our mission is to follow javascript at every step. From it’s birth as HTML5 and onto it’s full evolution as a fully fledged multimedia system. We want to push the limits of what can be done under javascript to the full extent of it’s capabilities. And last but not least – to provide the infrastructure required for modern object pascal programmers to continue their hard earned experience and knowledge under a new platform. Javascript is quite alien to the average Delphi or FPC programmer, but with Smart you will be able to knock out apps with little effort.
Today, the Pascal Game Developer competition started. And Smart was included in the list of allowed pascal compilers (jeey!). If you would like to use our product to push some limits then send us an email and we will return a preview version of smart (32bit) that you can use. You can use Smart as much as you want for the duration of the competition for free. While we are still in beta (with all the bells and whistles that pertains) there really is no compiler and IDE out there like Smart for webkit development!
Let’s push that border a couple of more inches, like pascal has always done 🙂
Click here for the pascal game developer’s website
Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.
I want to thank everyone that has taken the time to check out the alpha release, and wish everyone a happy new year! Thanks to your help we have a list of roughly 50 reports on things that needs to be fixed or changed – and they will all be addressed asap. Tomorrow the holidays is officially over in Norway and it’s back to work for all of us.
I am also amazed at how many demo’s we have seen already, considering that an Alpha is very much work in progress. Eric Grange knocked out a clone of the retro game missile command (low frame-rate video). On my iPad it runs at 230 frames per second. This is actually to fast to play 🙂 Primoz Gabrijelcic also made a nice fractal explorer as well which can be seen here.
Have a happy new year!
Embed or reference, now you chose
In the olden days of 16 bit computing, most programming languages saved their projects in a single binary format. In short: all the files pertaining to your project was housed in a single file. The benefits were of-course that making backups was easier, and it was also easier to keep track of a project.
This is something that I have really missed in the age of modern computing. I have had some experiences with Delphi where i misplaced packages and source files and actually lost quite a bit of work. I don’t blame Delphi for this of-course, it has been completely my own fault and it all has to do with keeping 5 Mac’s and 3 PC’s in sync 😛
But still, i do miss being able to save an entire project – and I mean everything – in a single file. It was so easy when sending a project to a friend to just ship one single file (today we use SVN naturally but still), and also so much easier when making backups. You have a projects folder that contain X number of project-files, rather than a folder containing thousands of files, including the SVN revisions.
You can clearly see what file is on disk and which is resident by it's glyph
With OP4JS I’m bringing this old trend back. So you can finally mix and match between the “normal” way of organizing your project (one file per unit + project file + dependencies) or the old school “packaged” way (all files stored inside the project file). You can also keep some files resident and others external. Good if you want to share a unit with someone or just downloaded something from the net.
Under vanilla Delphi you don’t import files, you reference them (explicit or implicit). I made a small twist to this concept so that if your project contains a file with the same name as an RTL file – it will always use that instead. If you chose to open an RTL file you are always given the option to create a duplicate – inside the project file. That way you can create your very own version of the RTL file without screwing up the system. It’s also invaluable during the development of new RTL files and bug-fixing the system.
Or good fun if you want to “mod” the RTL 🙂
The OP4JS IDE (integrated development environment) aims to be simple, neat and clean. There are two reasons for this: First of all there is no point trying to catch up with products that have been in development for nearly two decades – and secondly because we don’t necessarily agree with the route some companies have taken with regards to their IDE’s.
Delphi 7, the most popular IDE ever
If you ask a Delphi developer what his all-time favorite IDE is, chances are he is going to put the finger somewhere between Delphi 5 and Delphi 7. The environments back then were responsive, lightweight and easy to work with. The interface was so intuitive that even without formal training it required little effort to learn how to use the it. For me personally Delphi 7 is the undisputed king of IDE’s with one exception, like XCode it was a multi windowed environment which is a feature that messes up your work-space.
So for our IDE we turned the idea on it’s head. Since we are starting from scratch – why not use this opportunity to simplify things again? We have neither the time or manpower to catch up with the likes of Delphi, XCode or MonoDevelop. But what we do have is a keen eye on details and a desire to keep things effective.
What are the basics of a good IDE? What do we need to get our work done quickly and efficiently? What do I need?
Use notes as your scrap book
If you are anything like me you probably have a desktop littered with notes, books, gadgets and coffey mugs. Once a week I give my desk a run over, clean out the thrash and try to organize my notes in a logical, easy to use fashion. I also have a couple of huge whiteboards with important things kept in check by magnets. Fact is, text matters. It is through words that we formulate and transfer ideas.
Sadly the important of text and keeping our ideas organized havent really been implemented in most development environments. Delphi has a skinny “to do” list which is added to the project. I know a couple of people that use it – but let’s be honest: it’s pretty meager stuff. I mean, if I want to generate some form of documentation from my source-code, wouldn’t it be better to keep my notes in one place and my code in another? I’m not suggesting that we should stop commenting code, far from it, I’m simply saying that code-comments is more than enough for the code part. Adding documentation, ideas, who-did-what, credits and examples in the code is a bit excessive.
In short, OP4JS supports comments for every element belonging to the project. You can even comment on images if you like. But it’s not a simple text field or a memo – it’s a full editor. The view will actually split to make room for your notes and as such you can jot down everything (or just use it as a scrap-book when trying out new ideas). The comment editor has proven instrumental when porting Javascript to Object Pascal, because I can paste the JS code in the comment editor and convert it method by method with both sources in plain view. It’s also very handy when it comes to keeping track of who did what and where you last worked, just in case you forget between sessions.
A snippet is just a piece of code that you use often or that you found online. Handy enough to keep but not essential enough to deserve it’s own unit. I haven’t really used snippets before but after implementing it – it’s quite addictive (!) Whenever I go online to search for a solution or study a particular task – the snippet library functions as my extended clipboard, if that makes any sense.
Snippets is an underestimated resource