SketchIt (C#) Intro - Just Draw Something

Ian Kloppers — Tue, 10 Sep 2019 21:22:45 +0000

This is my first post, so please bear with me, and let me know where and how I can improve on my writing skills.

What is SketchIt

SketchIt is a small, .NET based development environment, created to have fun while learning to code, or simply to sketch together a visual idea using code. The project was launched in August 2018, and heavily inspired by the Processing open source project. I hope to create a similar experience for .NET developers as what Processing does for Java/JavaScript (p5.js) developers.

SketchIt is not an alternative (not even close) to an IDE like Visual Studio, but rather an environment where you can immediately start to code, and not be intimidated by an advanced IDE such as Visual Studio:

Some key concepts

When needed, SketchIt "wraps" your code into a class which allows for code to be entered without declaring namespaces/classes/methods. The following code can be entered into the SketchIt code editor and run without an error:

for (int i = 0; i < 10; i++)
{
    PrintLine(i);
}

The above example is referred to as a "static" sketch, which means the code is executed sequentially from top to bottom, and the program comes to an end.

When developing a SketchIt project, there are two ways to generate output to the screen:

writing to the console window
drawing to the canvas

Writing to the console is as simple as using the PrintLine() or Print() methods:

PrintLine(DateTime.Now);

Drawing to the canvas is done using different draw methods:

DrawCircle(Random(Width), Random(Height), Random(10, 50));

Again, the above example can be entered into the SketchIt code editor as is and the program will run without an error. The resulting program will draw a circle on the canvas at a random location within the size (Width and Height) of the canvas, and the diameter (in pixels) of the circle is based on a random number between 10 and 50:

Making use of the animation loop

To make use of the animation loop, you need to have a Draw() method declared. The Draw() method is called a number of times per second, based on the requested frame rate. The default frame rate is 60 frames per second, which means the Draw() method will be called 60 times per second.

SIDE NOTE: SketchIt currently implements rendering using GDI+ drawing routines, so frame rates can become slower than requested once animations become more complicated, especially when running a sketch in full-screen mode. If you are a developer with OpenGL experience, then please get involved to help develop an OpenGL renderer.

If we take the previous example which draws a random circle, and we put it into a Draw() method, we will have a program generating random circles in a continuous loop:

void Draw()
{
    DrawCircle(Random(Width), Random(Height), Random(10, 50));
}

To make it a bit more interesting, we can clear the background of the canvas with a black, semi-transparent color:

void Draw()
{
    DrawBackground(0, 50);
    DrawCircle(Random(Width), Random(Height), Random(10, 50));
}

The above example will create an animation which draw circles that appear to fade away:

Another important method that can be utilized is the Setup() method. This method is called when the program starts, and is intended to be used to "set up" your program, like loading data, initializing objects (like video camera) or setting the canvas size:

void Setup()
{
    //set the size of the canvas to 800 x 400 pixels (width x height)
    SetSize(800, 400);
}

void Draw()
{
    DrawBackground(0, 50);
    DrawCircle(Random(Width), Random(Height), Random(10, 50));
}

The preview pane scales the canvas to fit:

Running the project

When the project is run, an executable (.exe) is compiled and launched:

SketchIt attempts to embed the required resources into the .exe so you can easily share your project without having to include additional files. This, of course, may not always be possible depending on additional libraries referenced by your project.

Conclusion

This really was just a quick introduction to what SketchIt is, and what it attempts to accomplish. Please download and play around with it, or maybe get involved via Github.