# Draw Pixels (Native Extension)

**URL:** <https://forum.defold.com/t/draw-pixels-native-extension/18946>\
**Category:** The Defoldmine\
**Created:** [April 13, 2018, 12:50pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946 "2018-04-13T12:50:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [April 13, 2018, 12:50pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/1 "2018-04-13T12:50:31Z")

</div>

![DRAWPIXELS-HERO](https://forum-defold-uploads.b-cdn.net/original/2X/1/15f0e5a685b5c7f16ef78f612c377e4cab08ce8a.png)

> **[Draw Pixels | Defold](https://defold.com/assets/drawpixels/)**
>
> Drawing pixels and simple geometry into texture buffer.

[Draw Pixels.apk.zip](https://forum-defold-uploads.b-cdn.net/original/2X/d/dd678be595e6daa6fa251f419b2e4881eccca8b7.zip) (2.3 MB) - apk for performance testing

 ![2018-04-16_21-49-02](https://forum-defold-uploads.b-cdn.net/original/2X/d/da88dc7cbe266f22d8205f0379804627ba923653.jpg)

Defold engine native extension for drawing pixels and simple geometry into texture buffer.  
Thanks @britzl and @Mathias_Westerdahl for help.

(Like a result of [this](https://forum.defold.com/t/poll-for-a-next-lib-ne/18704) polling)

Feel free to contribute!

If you want to contribute and don’t know what you can do, look into next list:

- Draw rectangle by two corner dots
- Draw line with thickness parameter
- Anti aliasing
- _(Done!!! thanks @thekrasnikoff) Bézier curves_
- _(Done!!! thanks @britzl )Draw line_

Materials  
[http://members.chello.at/~easyfilter/bresenham.html](http://members.chello.at/~easyfilter/bresenham.html)

> **[Software Rasterization Algorithms for filling triangles](https://www.sunshine2k.de/coding/java/TriangleRasterization/TriangleRasterization.html)**

> **[Midpoint circle algorithm](https://en.wikipedia.org/wiki/Midpoint_circle_algorithm)**
>
> In computer graphics, the midpoint circle algorithm is an algorithm used to determine the points needed for rasterizing a circle. It is a generalization of Bresenham's line algorithm. The algorithm can be further generalized to conic sections. This algorithm draws all eight octants simultaneously, starting from each cardinal direction (0°, 90°, 180°, 270°) and extends both ways to reach the nearest multiple of 45° (45°, 135°, 225°, 315°). It can determine where to stop because, when y = x, it ha...

 ![DRAWPIXELS-THUMBNAIL](https://forum-defold-uploads.b-cdn.net/original/2X/b/b34b9174902e9357f3843733a0d777ba5478b7a2.png)

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [April 13, 2018, 1:10pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/2 "2018-04-13T13:10:05Z")

</div>

Great! Is this to be used for debugging, or fast enough to be used in games?

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [April 13, 2018, 1:17pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/3 "2018-04-13T13:17:07Z")

</div>

It depend of your game, but I have plans to use it in one of my game, yes.  
I added into main post apk for performance testing.

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [April 16, 2018, 7:02pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/4 "2018-04-16T19:02:36Z")

</div>

NE was updated with new parameter “angle” for filled rectangle  
 ![Apr-16-2018%2021-36-02](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/a/a7078c2242d586f4bed9b4d7f422e5c5a65769c6.gif)

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [September 10, 2018, 8:29pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/5 "2018-09-10T20:29:36Z")

</div>

Draw pixels NE has a lot of changes after my last post here. Small status update for people who don’t follow repository on github.

First of all huge THANKS to all contributors: @britzl, @d954mas, @thekrasnikoff ! Thank you guys!

**New methods:**  
drawpixels.pixel(buffer, x, y, r, g, b, a) to draw a pixel to the buffer  
drawpixels.color(buffer, x, y) to read color from buffer  
drawpixels.line(buffer\_info, x0, y0, x1, y1, red, green, blue, alpha) to draw a line to the buffer  
drawpixels.bezier(buffer\_info, x0, y0, xc, yc, x1, y1, red, green, blue, alpha) draw a bezier line between two points and one control point

**Moreover:**  
Refactoring and code clearing  
Performance optimisation!!!  
Bug fixing

Release notes for every release avaliable on this page: [Releases · AGulev/drawpixels · GitHub](https://github.com/AGulev/drawpixels/releases)

 ![2018-09-10_23-01-19](https://forum-defold-uploads.b-cdn.net/original/2X/a/ab1adc1e52f3597e8e7704c3ae95bc61862b2ca1.jpg)

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [March 14, 2020, 11:32am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/6 "2020-03-14T11:32:54Z")

</div>

Correct link: [Draw Pixels](https://defold.com/assets/drawpixels/)

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [March 14, 2020, 11:45am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/7 "2020-03-14T11:45:58Z")

</div>

Is there a way to draw on top of a predefined texture/png? Rather than starting with a “blank canvas”?

---

<div class="post-metadata">

**Author:** ![Denis\_Makhortov](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/denis_makhortov/32/24045_2.png) [@Denis\_Makhortov](https://forum.defold.com/u/Denis_Makhortov)\
**Post date:** [March 14, 2020, 12:16pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/8 "2020-03-14T12:16:07Z")

</div>

It is possible

 ![%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5](https://forum-defold-uploads.b-cdn.net/original/3X/4/6/465bad01ce8e594bc1cc873b3dca2ce35322eb85.jpeg)  
I did this right now in the example, so I will give the function code init

> **Summary**
>
> ```
> function init(self)
> msg.post("@render:", "clear_color", {color = vmath.vector4(1, 1, 1, 1)})
> -- size of texture when scaled to nearest power of two
> local width = 1024
> local height = 2048
> local channels = 4
> local file = io.open("image.png", "rb")
> local bytes = file:read("*a")
> local png = image.load(bytes,true)
> local my_buffer = png.buffer
> -- we have to create table with next fields: buffer, width, height, channels
> self.buffer_info = {
> buffer = buffer.create(#my_buffer, { {name=hash("rgba"), type=buffer.VALUE_TYPE_UINT8, count=4} } ),
> width = width,
> height = height,
> channels = channels -- 3 for rgb, 4 for rgba
> }
> local stream = buffer.get_stream(self.buffer_info.buffer, hash("rgba"))
> for i = 1, #my_buffer do
> stream[i] = string.byte(my_buffer, i)
> end
> self.dirty = true
> self.current_color = vmath.vector4(0, 0, 0, 1)
> self.current_tool = "pencil"
> -- drawing params
> self.prev_pos = vmath.vector3()
> self.resource_path = go.get("#sprite", "texture0")
> self.header = {
> width = width,
> height = height,
> type = resource.TEXTURE_TYPE_2D,
> format = resource.TEXTURE_FORMAT_RGBA,
> num_mip_maps = 1
> }
> self.rotation = 0
> end
> 
> ```

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [March 14, 2020, 1:35pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/9 "2020-03-14T13:35:40Z")

</div>

> [@Denis\_Makhortov](#):
>
> the example, so I will give the function code init

That is BEAUTIFUL. Thanks! This is a powerful extension.

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [March 14, 2020, 3:55pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/10 "2020-03-14T15:55:09Z")

</div>

I’ve been playing with this a while and it’s so much fun! I’m stuck trying to create “canvas” instances dynamically. This doesn’t work because the pixels are tied to this bitmap:

```
self.resource_path = go.get("#sprite", "texture0")

```

What’s drawn on one canvas is therefore also drawn to the other. One solution is to use two separate sprites. In my case that won’t work, because my (ambitious) plan is to create (literally) millions canvases dynamically, each different from the others.

Is it possible to create a texture on the fly somehow? I noticed this is possible in GUI, but I haven’t been able to find a similar way to do it with a go.

Here is a minimal example of the issue: [PixelDrawInstances.zip](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/3X/8/f/8f0c1ff2412a44c4386a8f4ad46bf563d5ab2cb0.zip) (5.4 MB)

Edit: If textures cannot be created at runtime, I suppose one workaround would be to re-use a pool of 10 sprites or so, and make sure none of the visible canvases are using the same sprite.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [March 14, 2020, 6:00pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/11 "2020-03-14T18:00:08Z")

</div>

> [@totebo](#):
>
> In my case that won’t work, because my (ambitious) plan is to create (literally) millions canvases dynamically, each different from the others.

Well you’re going to have to limit yourself. Each canvas takes up texture memory and there’s only a certain amount of it available. Think of a max amount that you can support (think about target platform and min GPU memory you want to support) and design around that.

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [March 14, 2020, 6:22pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/12 "2020-03-14T18:22:13Z")

</div>

Yes, wise words. This is exciting though, a lot of possibilities for a nice side project!

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [May 6, 2020, 5:13pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/13 "2020-05-06T17:13:16Z")

</div>

New [DrawPixels 2.0.0](https://github.com/AGulev/drawpixels/releases/tag/2.0.0)

- New API methods: `drawpixels.gradient_line()` , `drawpixels.arc()` , `drawpixels.filled_arc()` , `drawpixels.gradient_arc()` , `drawpixels.start_fill()` , `drawpixels.end_fill()` , `drawpixels.fill_area()` .
- Antialiasing option for the following functions: `drawpixels.filled_circle()` , `drawpixels.line()` , `drawpixels.circle()` .
- Line width option for the following functions: `drawpixels.circle()` , `drawpixels.line()` .
- `premultiply_alpha ` option.

Thanks @sergeysinyavsky for these improvements!

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [May 6, 2020, 5:36pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/14 "2020-05-06T17:36:53Z")

</div>

Great work. This is turning into a Legendary Extension ™!

---

<div class="post-metadata">

**Author:** ![Tom\_Arnold](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/tom_arnold/32/21348_2.png) [@Tom\_Arnold](https://forum.defold.com/u/Tom_Arnold)\
**Post date:** [July 24, 2020, 7:51am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/15 "2020-07-24T07:51:29Z")

</div>

Really great, thanks.

I think I have a really simple request:

How exactly would I add stickers (sprites) to the example? (As in draw with smilies or something)

---

<div class="post-metadata">

**Author:** ![Riad](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/riad/32/20518_2.png) [@Riad](https://forum.defold.com/u/Riad)\
**Post date:** [April 2, 2021, 5:18am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/16 "2021-04-02T05:18:12Z")

</div>

Hi @AGulev

I’m testing your “draw pixel” code. I just want to draw a filled rectangle but it’s not showing me anything… I followed the instruction provided in the github…  
could you please help me? I put a snapshot of the code below:

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/b/9/b976fc31678901cb30e3bd5b65e895046dfe43e4.png)

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [April 2, 2021, 7:23am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/17 "2021-04-02T07:23:27Z")

</div>

Please make sure you update texture using `resource.set_texture()`

> <https://github.com/AGulev/drawpixels/blob/bc136d786d0e7b3d4c5aeb0a834217e825de35c5/example/canvas.script#L34>

---

<div class="post-metadata">

**Author:** ![Riad](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/riad/32/20518_2.png) [@Riad](https://forum.defold.com/u/Riad)\
**Post date:** [April 2, 2021, 7:35am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/18 "2021-04-02T07:35:46Z")

</div>

> [@AGulev](#):
>
> resource.set\_texture(self.resource\_path, self.header, self.buffer\_info.buffer)

Emm… that’s what I missed!

Thanks a lot dear, I’m going to test it…

Regards,  
Riad

---

<div class="post-metadata">

**Author:** ![dlannan](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dlannan/32/39440_2.png) [@dlannan](https://forum.defold.com/u/dlannan)\
**Post date:** [May 8, 2022, 3:43pm UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/19 "2022-05-08T15:43:11Z")

</div>

Wow. Only just saw this project for the first time. So awesome @AGulev !!! Really like the toolkit.  
Using it to test a little genetic evolution program. Thanks! WIll post some screenshots once working.

---

<div class="post-metadata">

**Author:** ![dlannan](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dlannan/32/39440_2.png) [@dlannan](https://forum.defold.com/u/dlannan)\
**Post date:** [May 9, 2022, 3:31am UTC](https://forum.defold.com/t/draw-pixels-native-extension/18946/20 "2022-05-09T03:31:32Z")

</div>

Oh, so much fun. Thanks again. I’ll put this project up sometime soon. Want to let the original author of biosim know what Ive done - its all MIT, but I like to make sure peoples work is recognised.

  
Original source: [GitHub - davidrmiller/biosim4: Biological evolution simulator · GitHub](https://github.com/davidrmiller/biosim4)

[Next page](https://forum.defold.com/t/draw-pixels-native-extension/18946.md?page=2)
