From cca4ae4420943328df099e56c59718544a3c2377 Mon Sep 17 00:00:00 2001 From: Alexey Gulev Date: Mon, 10 Sep 2018 23:07:38 +0300 Subject: [PATCH] added bezier example and documentation updated --- README.md | 208 +++++++++++++++---------------------- example/canvas.script | 29 ++++-- example/draw_pixels.atlas | 3 + example/images/bezier.png | Bin 0 -> 280 bytes example/toolbox.gui | 77 ++++++++++++-- example/toolbox.gui_script | 10 +- 6 files changed, 179 insertions(+), 148 deletions(-) create mode 100644 example/images/bezier.png diff --git a/README.md b/README.md index 791309c..480f85b 100644 --- a/README.md +++ b/README.md @@ -12,20 +12,17 @@ Open your game.project file and in the dependencies field under project add: >https://github.com/AGulev/drawpixels/archive/master.zip ## Example -![screenshot](https://user-images.githubusercontent.com/2209596/38828895-1dc0802e-41c0-11e8-87c1-20fd65cb017f.jpg) +![screenshot](https://user-images.githubusercontent.com/2209596/45321275-8c8d9b80-b54d-11e8-8885-05d623973d3b.jpg) Main code example is [here](https://github.com/AGulev/drawpixels/blob/master/example/canvas.script) ## Lua API First of all you need to create a table with a buffer information that contain next fields: -`buffer` - buffer - -`width` - buffer width, same as your texture width - -`height` - buffer height, same as your texture height - -`channels` - 3 for rgb, 4 for rgba +`buffer` - buffer
+`width` - buffer width, same as your texture width
+`height` - buffer height, same as your texture height
+`channels` - 3 for rgb, 4 for rgba
For example: ```lua @@ -46,154 +43,115 @@ Then when you have a buffer info, you can use next methods: #### drawpixels.circle(buffer_info, pox_x, pox_y, diameter, red, green, blue, alpha) Method for drawing circle: -`buffer_info` - buffer information - -`pox_x` - x position center of the circle - -`pox_y` - y position center of the circle - -`diameter` - diameter of the circle - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`pox_x` - x position center of the circle
+`pox_y` - y position center of the circle
+`diameter` - diameter of the circle
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.filled_circle(buffer_info, pos_x, pos_y, diameter, red, green, blue, alpha) Method for drawing filled circle: -`buffer_info` - buffer information - -`pox_x` - x position center of the circle - -`pox_y` - y position center of the circle - -`diameter` - diameter of the circle - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`pox_x` - x position center of the circle
+`pox_y` - y position center of the circle
+`diameter` - diameter of the circle
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.rect(buffer_info, pos_x, pos_y, rect_width, rect_height, red, green, blue, alpha) Method for drawing rectangle: -`buffer_info` - buffer information - -`pox_x` - x position center of the rectangle - -`pox_y` - y position center of the rectangle - -`rect_width` - rectangle width - -`rect_height` - rectangle height - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`pox_x` - x position center of the rectangle
+`pox_y` - y position center of the rectangle
+`rect_width` - rectangle width
+`rect_height` - rectangle height
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.filled_rect(buffer_info, pos_x, pos_y, rect_width, rect_height, red, green, blue, alpha, angle) Method for drawing filled rectangle: -`buffer_info` - buffer information - -`pox_x` - x position center of the rectangle - -`pox_y` - y position center of the rectangle - -`rect_width` - rectangle width - -`rect_height` - rectangle height - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures - -`angle` - rotation angle in degrees. Optional. +`buffer_info` - buffer information
+`pox_x` - x position center of the rectangle
+`pox_y` - y position center of the rectangle
+`rect_width` - rectangle width
+`rect_height` - rectangle height
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
+`angle` - rotation angle in degrees. Optional.
#### drawpixels.fill(buffer_info, red, green, blue, alpha) Fill buffer with the color: -`buffer_info` - buffer information - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.line(buffer_info, x0, y0, x1, y1, red, green, blue, alpha) Draw a line between two points: -`buffer_info` - buffer information - -`x0` - x position of one end of the line - -`y0` - y position of one end of the line - -`x1` - x position of the other end of the line - -`y1` - y position of the other end of the line - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`x0` - x position of one end of the line
+`y0` - y position of one end of the line
+`x1` - x position of the other end of the line
+`y1` - y position of the other end of the line
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.pixel(buffer_info, x, y, red, green, blue, alpha) Draw a pixel: -`buffer_info` - buffer information - -`x` - x position of pixel - -`y` - y position of pixel - -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`buffer_info` - buffer information
+`x` - x position of pixel
+`y` - y position of pixel
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
#### drawpixels.color(buffer_info, x, y) Read color from a position in the buffer: -`buffer_info` - buffer information - -`x` - x position to get color from - -`y` - y position to get color from +`buffer_info` - buffer information
+`x` - x position to get color from
+`y` - y position to get color from
RETURNS: -`red` - red channel of the color 0..255 - -`green` - green channel of the color 0..255 - -`blue` - blue channel of the color 0..255 - -`alpha` - alpha channel 0..255. Optional parameter for rgba textures +`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
+ +#### 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: + +`buffer_info` - buffer information
+`x0` - x position of the first point
+`y0` - y position of the first point
+`xc` - x position of the control point
+`yc` - y position of the control point
+`x1` - x position of the second point
+`y1` - y position of the second point
+`red` - red channel of the color 0..255
+`green` - green channel of the color 0..255
+`blue` - blue channel of the color 0..255
+`alpha` - alpha channel 0..255. Optional parameter for rgba textures
-------- diff --git a/example/canvas.script b/example/canvas.script index 9e780dd..699ef43 100755 --- a/example/canvas.script +++ b/example/canvas.script @@ -1,5 +1,4 @@ function init(self) - msg.post(".", "acquire_input_focus") 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 @@ -49,11 +48,8 @@ function on_message(self, message_id, message, sender) end elseif message_id == hash("change_tool") then self.current_tool = message.tool - if message.tool == "line" then - self.last_pos = 1 - else - self.last_pos = nil - end + self.bezier_dots = {} + self.last_pos = {} elseif message_id == hash("clear") then drawpixels.fill(self.buffer_info, 0, 0, 0, 0) self.dirty = true @@ -76,11 +72,21 @@ function on_input(self, action_id, action) self.touch_pos = pos elseif action.released then self.drawing = false - if self.last_pos and self.last_pos == 1 then - self.last_pos = {} - elseif self.last_pos then + if not self.last_pos.x then self.last_pos.x = pos.x self.last_pos.y = pos.y + else + self.last_pos.x = nil + end + if self.current_tool == "bezier" then + if #self.bezier_dots == 2 then + self.bezier_dots = {} + else + local bz = {} + bz.x = pos.x + bz.y = pos.y + self.bezier_dots[#self.bezier_dots + 1] = bz + end end end if self.drawing then @@ -107,7 +113,7 @@ function on_input(self, action_id, action) self.current_color = bytes_to_color_vector(r, g, b, a) elseif self.current_tool == "circle" then drawpixels.circle(self.buffer_info, self.touch_pos.x, self.touch_pos.y, 40, r, g, b, a) - elseif self.current_tool == "line" and self.last_pos and next(self.last_pos) then + elseif self.current_tool == "line" and self.last_pos.x then drawpixels.line(self.buffer_info, self.last_pos.x, self.last_pos.y, self.touch_pos.x, self.touch_pos.y, r, g, b, a) elseif self.current_tool == "filled_circle" then drawpixels.filled_circle(self.buffer_info, self.touch_pos.x, self.touch_pos.y, 40, r, g, b, a) @@ -119,6 +125,9 @@ function on_input(self, action_id, action) drawpixels.rect(self.buffer_info, self.touch_pos.x, self.touch_pos.y, 40, 40, 0, 0, 0, 0) elseif self.current_tool == "rotated_rect" then drawpixels.filled_rect(self.buffer_info, self.touch_pos.x, self.touch_pos.y, 60, 40, r, g, b, a, self.rotation) + elseif self.current_tool == "bezier" and #self.bezier_dots == 2 then + local pos = self.bezier_dots + drawpixels.bezier(self.buffer_info, pos[1].x, pos[1].y, self.touch_pos.x, self.touch_pos.y, pos[2].x, pos[2].y, r, g, b, a) end self.dirty = true self.touch_pos = self.touch_pos - dir diff --git a/example/draw_pixels.atlas b/example/draw_pixels.atlas index a68f2a1..2685584 100755 --- a/example/draw_pixels.atlas +++ b/example/draw_pixels.atlas @@ -34,6 +34,9 @@ images { images { image: "/example/images/gimp-tool-color-picker.png" } +images { + image: "/example/images/bezier.png" +} margin: 0 extrude_borders: 2 inner_padding: 0 diff --git a/example/images/bezier.png b/example/images/bezier.png new file mode 100644 index 0000000000000000000000000000000000000000..a51153d9033b30674a8c9059ba92fb1ff6c531a8 GIT binary patch literal 280 zcmV+z0q6dSP)oeTu z{k4D>oTIhimln?Q{^L48xzvfiQsM!Z%L1#UgDFm<0NBA3dQkuznNPA21;7n1B7qXm z*o*?0PjM0n9O5n#XyOg+s?bClY$Tc0000