Fix images, add suggested changes

README.md

@@ -31,17 +31,10 @@ See [requirements](#requirements) for the list of libraries necessary for compil
 
 ## Tutorial
 
-The [Wiki of this repo](https://github.com/gopxl/pixel/wiki) contains an extensive tutorial
-covering several topics of Pixel. Here's the content of the tutorial parts so far:
-
-- [Creating a Window](https://github.com/gopxl/pixel/wiki/Creating-a-Window)
-- [Drawing a Sprite](https://github.com/gopxl/pixel/wiki/Drawing-a-Sprite)
-- [Moving, scaling and rotating with Matrix](https://github.com/gopxl/pixel/wiki/Moving,-scaling-and-rotating-with-Matrix)
-- [Pressing keys and clicking mouse](https://github.com/gopxl/pixel/wiki/Pressing-keys-and-clicking-mouse)
-- [Drawing efficiently with Batch](https://github.com/gopxl/pixel/wiki/Drawing-efficiently-with-Batch)
-- [Drawing shapes with IMDraw](https://github.com/gopxl/pixel/wiki/Drawing-shapes-with-IMDraw)
-- [Typing text on the screen](https://github.com/gopxl/pixel/wiki/Typing-text-on-the-screen)
-- [Using a custom fragment shader](https://github.com/gopxl/pixel/wiki/Using-a-custom-fragment-shader)
+The [Wiki of this repo](./docs/README.md) contains an extensive tutorial
+covering several topics of Pixel. 
+
+For a tutorial walking through the basics of Pixel, check out [The Basics](./docs/Basics/Creating-a-Window.md)!
 
 ## [Examples](https://github.com/gopxl/pixel-examples)
 

docs/Basics/Creating-a-Window.md

@@ -110,7 +110,7 @@ Here we run a loop that finishes when a user closes our window. We need to call
 
 Now it's time to run the program. What you'll see is a black 1024x768 window. When we click on the close button, the window closes and the program exists. Congratulations, that's your first, fully working window with Pixel!
 
-[[images/01_creating_a_window_black.png]]
+![creating a window black](./images/01_creating_a_window_black.png)
 
 ## VSync
 
@@ -156,7 +156,7 @@ for !win.Closed() {
 }
 ```
 
-[[images/01_creating_a_window_skyblue.png]]
+![creating a window skyblue](./images/01_creating_a_window_skyblue.png)
 
 Here's the whole code of this program.
 

docs/Basics/Drawing-a-Sprite.md

@@ -6,7 +6,7 @@ In this part, we'll learn how draw pictures on the screen using sprites.
 
 [Sprite](https://en.wikipedia.org/wiki/Sprite_(computer_graphics)) is an ancient concept in video game development. In the old times, a sprite was usually a 16x16px or 32x32px "stamp" that could be stamped on the screen. One sprite could be the picture of the player, more sprites could be used to display enemies and platforms, and so on. This allowed efficient drawing of complicated scenes. Here's a screenshot from an old C64 game shamelessly stolen from [Wikipedia](https://en.wikipedia.org/wiki/Main_Page).
 
-[[images/sprites_c64_game.png]]
+![sprites c64 game](./images/sprites_c64_game.png)
 
 Today, sprites still follow the same concept, however, allow for much wider range of possibilities. A sprite is basically a picture, which can be drawn somewhere on the screen. In Pixel, as we'll learn later, sprites (alongside all other graphical objects) can be drawn not only to the screen, but onto an arbitrary [Target](https://godoc.org/github.com/gopxl/pixel/v2#Target).
 
@@ -97,7 +97,7 @@ _Pardon the rather complicated nature of loading a picture from a file in Pixel.
 
 Now, we need an actual PNG file to load a picture from. I'll use a beautiful hiking gopher from [this repo](https://github.com/egonelbre/gophers), which contains many free beautiful images of gophers in various situations of their life. You can download an image from there, or directly use this one, which I'll use.
 
-[[images/hiking.png]]
+![hiking](./images/hiking.png)
 
 Just download the PNG image file into the directory of your Go program. Now, we're ready to load it.
 
@@ -153,7 +153,7 @@ Target is obvious, it's where we want our sprite to be drawn. In our case, it's
 
 Wonderful! Let's run the code now. If you didn't make any mistakes and you have the PNG file in the right directory, you should see this.
 
-[[images/02_drawing_a_sprite_lower_left.png]]
+![drawing a sprite lower left](./images/02_drawing_a_sprite_lower_left.png)
 
 ## Matrix
 
@@ -173,15 +173,15 @@ To move the sprite to a different position, we need to pass a different matrix.
 
 Calling [pixel.IM.Moved](https://godoc.org/github.com/gopxl/pixel/v2#Matrix.Moved) adds a movement to the matrix. As you can tell, we moved the sprite to the center of the window's bounds, which is the center of the window. Let's run the code now!
 
-[[images/02_drawing_a_sprite_center.png]]
+![drawing a sprite center](./images/02_drawing_a_sprite_center.png)
 
 And just for the sake of freshness, let's change the background color.
 
 ```go
 	win.Clear(colornames.Greenyellow)
 ```
 
-[[images/02_drawing_a_sprite_greenyellow.png]]
+![drawing a sprite greenyellow](./images/02_drawing_a_sprite_greenyellow.png)
 
 In the next part, we'll learn how to move, rotate and scale sprites using the matrix and also how to add vectors using the + operator and many more things. Things will be moving, dynamically!
 

docs/Basics/Drawing-efficiently-with-Batch.md

@@ -161,11 +161,11 @@ Here, we just increment the `frames` counter. Then, if a second passed, we put t
 
 Let's run the program to see that this works!
 
-[[images/05_drawing_efficiently_with_batch_fps.png]]
+![drawing efficiently with batch fps](./images/05_drawing_efficiently_with_batch_fps.png)
 
 Now that we can measure the performance, let's plant many trees and see how the FPS goes down!
 
-[[images/05_drawing_efficiently_with_batch_low_fps.png]]
+![drawing efficiently with batch low fps](./images/05_drawing_efficiently_with_batch_low_fps.png)
 
 At about 500 trees, the FPS drops below 30 on my computer, which is not too bad, but not too good either.
 
@@ -230,7 +230,7 @@ with this
 
 Now we only need to hold the left mouse button and move the mouse around the screen! A tree brush, wonderful!
 
-[[images/05_drawing_efficiently_with_batch_batch.png]]
+![drawing efficiently with batch batch](./images/05_drawing_efficiently_with_batch_batch.png)
 
 This time, I needed to draw more than 7000 trees in order to get the FPS down to 30. That's much better!
 

docs/Basics/Drawing-shapes-with-IMDraw.md

@@ -135,7 +135,7 @@ And here we draw the result to the screen.
 
 And here we go!
 
-[[images/06_drawing_shapes_with_imdraw_rgb_triangle.png]]
+![drawing shapes with imdraw rgb triangle](./images/06_drawing_shapes_with_imdraw_rgb_triangle.png)
 
 Ok, it works but we don't really know what's going on.
 
@@ -189,7 +189,7 @@ Here's how we draw lines. Particularly notice the [EndShape](https://godoc.org/g
 	imd.Line(30)
 ```
 
-[[images/06_drawing_shapes_with_imdraw_line.png]]
+![drawing shapes with imdraw line](./images/06_drawing_shapes_with_imdraw_line.png)
 
 Another shape is circles and ellipses.
 
@@ -202,7 +202,7 @@ Another shape is circles and ellipses.
 	imd.Ellipse(pixel.V(120, 80), 0)
 ```
 
-[[images/06_drawing_shapes_with_imdraw_ellipse.png]]
+![drawing shapes with imdraw ellipse](./images/06_drawing_shapes_with_imdraw_ellipse.png)
 
 And a circle arc (ellipse arc is possible too).
 
@@ -213,7 +213,7 @@ And a circle arc (ellipse arc is possible too).
 	imd.CircleArc(150, -math.Pi, 0, 30)
 ```
 
-[[images/06_drawing_shapes_with_imdraw_arc.png]]
+![drawing shapes with imdraw arc](./images/06_drawing_shapes_with_imdraw_arc.png)
 
 ## Ways to use `IMDraw`
 

docs/Basics/Moving,-scaling-and-rotating-with-Matrix.md

@@ -221,7 +221,7 @@ Now, let's go ahead and add a rotation.
 
 So, we first moved the sprite to the center of the window, then we rotated it around the center of the window by 45 degrees. Run the code and see for yourself!
 
-[[images/03_moving_scaling_and_rotating_with_matrix_rotate.png]]
+![moving scaling and rotating with matrix rotate](./images/03_moving_scaling_and_rotating_with_matrix_rotate.png)
 
 Ugh, what's those pixely artifacts? The picture is no longer as smooth as it was before. That's no good. To fix this, we need to tell the window, that we want our pictures be drawn smoothly and not pixely, this is no pixel art. To do that, add this line.
 
@@ -236,7 +236,7 @@ Ugh, what's those pixely artifacts? The picture is no longer as smooth as it was
 
 When we run the program now, our picture is perfectly smooth, crisp, beautiful!
 
-[[images/03_moving_scaling_and_rotating_with_matrix_smooth.png]]
+![moving scaling and rotating with matrix smooth](./images/03_moving_scaling_and_rotating_with_matrix_smooth.png)
 
 ## Scaling
 
@@ -252,7 +252,7 @@ Let's add some crazy scaling!
 	sprite.Draw(win, mat)
 ```
 
-[[images/03_moving_scaling_and_rotating_with_matrix_scaled_xy.png]]
+![moving scaling and rotating with matrix scaled xy](./images/03_moving_scaling_and_rotating_with_matrix_scaled_xy.png)
 
 Well, that looks weird. Let's swap the rotation and scaling.
 
@@ -264,7 +264,7 @@ Well, that looks weird. Let's swap the rotation and scaling.
 	sprite.Draw(win, mat)
 ```
 
-[[images/03_moving_scaling_and_rotating_with_matrix_scale_then_rotate.png]]
+![](./images/03_moving_scaling_and_rotating_with_matrix_scale_then_rotate.png)
 
 Notice the difference. The order of transformations matters a lot.
 
@@ -342,7 +342,7 @@ Now, we're going to make our gopher rotate round the clock. To accomplish that,
 
 At the beginning, the angle will be 0, no rotation. In each frame, we increase the angle by 0.05 radians and draw the rotated sprite, easy. Let's run the code!
 
-[[images/03_moving_scaling_and_rotating_with_matrix_no_clear.png]]
+![moving scaling and rotating with matrix no clear](./images/03_moving_scaling_and_rotating_with_matrix_no_clear.png)
 
 Oh, that's surprisingly beautiful! Not what we wanted though. The problem is, that we successively draw the sprite, but only clear the window once, before the main loop. We need to clear it before every frame this time.
 
@@ -367,7 +367,7 @@ Oh, that's surprisingly beautiful! Not what we wanted though. The problem is, th
 
 Now everything works as expected.
 
-[[images/03_moving_scaling_and_rotating_with_matrix_clear.png]]
+![moving scaling and rotating with matrix clear](./images/03_moving_scaling_and_rotating_with_matrix_clear.png)
 
 ## Delta time
 

docs/Basics/Pressing-keys-and-clicking-mouse.md

@@ -61,7 +61,7 @@ func main() {
 
 Today, we'll be planting trees, but we'll get clever about it. Instead of having a separate PNG file for each type of tree, we're going to use this spritesheet.
 
-[[images/trees.png]]
+![trees](./images/trees.png)
 
 As you can see, a spritesheet is a single image file that contains multiple other images in it. In our case, the spritesheet looks really tiny, because it's pixel art. Don't worry, we'll scale them up so they look a lot better.
 
@@ -104,15 +104,15 @@ Here, we create a sprite that draws the lower-left tree from the spritesheet and
 
 Let's run the code!
 
-[[images/04_pressing_keys_and_clicking_mouse_tiny.png]]
+![pressing keys and clicking mouse tiny](./images/04_pressing_keys_and_clicking_mouse_tiny.png)
 
 Oh sure, the tree it very tiny because we didn't scale it up. Let's fix that right away!
 
 ```go
 		tree.Draw(win, pixel.IM.Scaled(pixel.ZV, 16).Moved(win.Bounds().Center()))
 ```
 
-[[images/04_pressing_keys_and_clicking_mouse_blurry.png]]
+![pressing keys and clicking mouse blurry](./images/04_pressing_keys_and_clicking_mouse_blurry.png)
 
 That's better, but it's not good either. The tree is really blurry. That's because we've told the window to draw pictures smoothly. When they get scaled up, they end up looking like this. With pixel art, this is far from appropriate. We need to disable it.
 
@@ -124,7 +124,7 @@ Just delete this line.
 
 Let's run the code now!
 
-[[images/04_pressing_keys_and_clicking_mouse_pixely.png]]
+![pressing keys and clicking mouse pixely](./images/04_pressing_keys_and_clicking_mouse_pixely.png)
 
 Much better! We'd like to be able to draw all types of trees, not just this one. For that we'll create a slice of rectangles. Each rectangle in this slice will be the portion of one of the trees. Since each tree is 32x32 pixels and they're packed together as tightly as possible, it's very easy.
 
@@ -229,15 +229,15 @@ One more thing, we need to draw the trees to the window.
 
 Perfect! Run the code and try clicking around to see that everything works!
 
-[[images/04_pressing_keys_and_clicking_mouse_planting.png]]
+![pressing keys and clicking mouse planting](./images/04_pressing_keys_and_clicking_mouse_planting.png)
 
 Finally, let's change that dull industrial background. We're in the forest man!
 
 ```go
 		win.Clear(colornames.Forestgreen)
 ```
 
-[[images/04_pressing_keys_and_clicking_mouse_forestgreen.png]]
+![pressing keys and clicking mouse forestgreen](./images/04_pressing_keys_and_clicking_mouse_forestgreen.png)
 
 ## Game space and screen space
 
@@ -285,7 +285,7 @@ Let's add the camera matrix!
 
 All that the camera matrix does is that it moves the camera position to the center of the screen, which is what we want. Try running the code now!
 
-[[images/04_pressing_keys_and_clicking_mouse_no_unproject.png]]
+![pressing keys and clicking mouse no unproject](./images/04_pressing_keys_and_clicking_mouse_no_unproject.png)
 
 Ugh, the planting is now totally off, clicking does not plant under the mouse any more! That makes sense. The center of the screen is the positon (512, 384) in the screen space. The `win.MousePosition` method returns the position of the mouse in the screen space. However, we're planting the trees in the game space. Where in the game space is the position (512, 384) located. Well, exactly there, but since the position of the camera is at (0, 0), it's far from the center of the screen. We need to be able to take a screen position and determine it's equivalent in the game space. 
 With Pixel, this is very easy.
@@ -408,9 +408,9 @@ When the user scrolls the wheel by one unit, we want to multiply the zoom level
 
 Let's run the code! Plant some trees and scroll the wheel!
 
-[[images/04_pressing_keys_and_clicking_mouse_zoom_in.png]]
+![pressing keys and clicking mouse zoom in](./images/04_pressing_keys_and_clicking_mouse_zoom_in.png)
 
-[[images/04_pressing_keys_and_clicking_mouse_zoom_out.png]]
+![pressing keys and clicking mouse zoom out](./images/04_pressing_keys_and_clicking_mouse_zoom_out.png)
 
 Here's the whole code of the program from this part.
 

docs/Basics/Typing-text-on-the-screen.md

@@ -138,7 +138,7 @@ And draw the result to the screen:
 
 And heya, here we go!
 
-[[images/07_typing_text_on_the_screen_first.png]]
+![typing text on the screen first](./images/07_typing_text_on_the_screen_first.png)
 
 That text is a bit small, let's scale it up!
 
@@ -150,7 +150,7 @@ That text is a bit small, let's scale it up!
 	}
 ```
 
-[[images/07_typing_text_on_the_screen_scaled.png]]
+![typing text on the screen scaled](./images/07_typing_text_on_the_screen_scaled.png)
 
 Much better!
 
@@ -213,7 +213,7 @@ With this:
 
 And here we go!
 
-[[images/07_typing_text_on_the_screen_color.png]]
+![typing text on the screen color](./images/07_typing_text_on_the_screen_color.png)
 
 Another property that we can set it `LineHeight`. This property is simply the number of pixels `Dot` travels downwards when it encounters a newline. We could set it to a fixed number of pixels, or we could set it to a multiple of the standard line height of the atlas, like this:
 
@@ -229,7 +229,7 @@ Another property that we can set it `LineHeight`. This property is simply the nu
 
 And take a look, wider line spacing!
 
-[[images/07_typing_text_on_the_screen_line_height.png]]
+![typing text on the screen lin height](./images/07_typing_text_on_the_screen_line_height.png)
 
 The last property is `TabWidth`, you can tell what it does. Experiment with it yourself!
 
@@ -319,7 +319,7 @@ with this:
 
 Just look at it! Isn't it beautiful?
 
-[[images/07_typing_text_on_the_screen_truetype.png]]
+![typing text on the screen truetype](./images/07_typing_text_on_the_screen_truetype.png)
 
 We can do an even bigger font, just to fully admire it!
 
@@ -345,7 +345,7 @@ In case you notice little artifacts on the letters, just set the smooth drawing.
 
 Now, this is it!
 
-[[images/07_typing_text_on_the_screen_big.png]]
+![typing text on the screen big](./images/07_typing_text_on_the_screen_big.png)
 
 ## Aligning
 
@@ -425,7 +425,7 @@ and
 
 Now, let's run this!
 
-[[images/07_typing_text_on_the_screen_align_right.png]]
+![typing text on the screen align right](./images/07_typing_text_on_the_screen_align_right.png)
 
 Great! How about aligning to the center? Well, instead of moving the `Dot` back by the whole line width, we need to move it by the half of it instead.
 
@@ -445,7 +445,7 @@ And we need to move the `Orig` again.
 
 Works great!
 
-[[images/07_typing_text_on_the_screen_align_center.png]]
+![typing text on the screen align center](./images/07_typing_text_on_the_screen_align_center.png)
 
 ## Typed
 
@@ -506,7 +506,7 @@ Finally, let's put our text to the center of the screen. Note, that the text wil
 		win.Update()
 ```
 
-[[images/07_typing_text_on_the_screen_typed.png]]
+![typing text on the screen typed](./images/07_typing_text_on_the_screen_typed.png)
 
 Works like charm! You might notice though, that the typing is a bit lagging. That's because of VSync. VSync always makes input a little behind, that's the compromise you're making when using it. However, we don't like it here, so let's turn VSync off and manage the framerate at 120 FPS manually. This will allow for a very smooth typing experience.
 

docs/Basics/Using-a-custom-fragment-shader.md

@@ -65,7 +65,7 @@ func main() {
 
 This should simply display our favorite gopher:
 
-![](images/shaders-tutorial-1.png)
+![shaders tutorial 1](./images/shaders-tutorial-1.png)
 
 ## Creating the shader
 
@@ -148,7 +148,7 @@ void main() {
 
 Hey, check it out! We made it grayscale, completely on the GPU:
 
-![](images/shaders-tutorial-2.png)
+![shaders tutorial 2](images/shaders-tutorial-2.png)
 
 ## Advanced
 
@@ -231,6 +231,6 @@ func gameloop(win *opengl.Window) {
 
 ## Result
 
-![](images/shadertutorialwavy.gif)
+![shader tutorial wavy](./images/shadertutorialwavy.gif)
 
 And that's it for now! To grab the full source to each of these examples, check out the [examples repository](https://github.com/gopxl/pixel-examples).