SketchIt (C#) Intro - Just Draw Something
Tags: csharp, dotnet, tutorial, showdev
Published: 2019-09-10 21:22:45

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](http://sketchit.org) 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](https://processing.org) does for Java/JavaScript ([p5.js](https://p5js.org)) 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:
![SketchIt IDE](https://thepracticaldev.s3.amazonaws.com/i/fsr464teyds9hdzgx7xa.png)

#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:
```csharp
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:
```csharp
PrintLine(DateTime.Now);
```

Drawing to the canvas is done using different draw methods:
```csharp
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:
![Draw a circle](https://thepracticaldev.s3.amazonaws.com/i/9hyw6n22kwwtj86e2cmu.png)

#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:
```csharp
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:
```csharp
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:
![Fading circles](https://thepracticaldev.s3.amazonaws.com/i/3lnpf10kwdgxe3jefnob.gif)

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:
```csharp
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:
![Using Setup()](https://thepracticaldev.s3.amazonaws.com/i/e7842uelsjhbvsxcv5wh.png)

#Running the project
When the project is run, an *executable (.exe)* is compiled and launched:
![Launch a sketch](https://thepracticaldev.s3.amazonaws.com/i/ampo287cxamxsqu8d0eq.png)

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](http://sketchit.org) and play around with it, or maybe get involved via [Github](https://github.com/sketchit/sketchit).

I hope to post more soon, and maybe work through a small project like a basic game, and how to make use of additional drawing methods and keyboard/mouse input.