mieki256's diary

function love.conf(t)
  t.version = "11.3" -- love2d version
  t.window.title = "ImageData test - love2d"
  t.window.vsync = 1
  t.window.width = 640
  t.window.height = 480

  -- t.window.fullscreen = true
  -- t.window.fullscreentype = "exclusive"
end

-- ImageData test on love2d

function make_gradation(imgdata)
  local w, h = imgdata:getDimensions()
  local x, y
  for y = 0, (h - 1) do
    for x = 0, (w - 1) do
      local r, g, b, a
      r = x / (w - 1)
      g = y / (h - 1)
      b = (x / ((w - 1) / 4)) % 1.0
      a = (y / ((h - 1) / 4)) % 1.0
      imgdata:setPixel(x, y, r, g, b, a)
    end
  end
end

function brighten(x, y, r, g, b, a)
  r = math.min(r * 1.5, 1.0)
  g = math.min(g * 1.5, 1.0)
  b = math.min(b * 1.5, 1.0)
  return r, g, b, a
end

function darken(x, y, r, g, b, a)
  r = math.max(r * 0.75, 0.0)
  g = math.max(g * 0.75, 0.0)
  b = math.max(b * 0.75, 0.0)
  return r, g, b, a
end

function love.load()
  love.graphics.setDefaultFilter("nearest", "nearest")
  local w, h = love.graphics.getDimensions()

  imgdata = love.image.newImageData(w, h)
  make_gradation(imgdata)

  img = love.graphics.newImage(imgdata)
end

function love.update(dt)
end

function love.draw()
  love.graphics.clear(0, 0, 0, 1)

  love.graphics.setColor(1, 1, 1, 1)
  love.graphics.draw(img, 0, 0)

  love.graphics.print("Hit Up/Down key", 2, 20)
  love.graphics.print("FPS: " .. tostring(love.timer.getFPS()), 2, 2)
end

function love.keypressed(key, isrepeat)
  if key == "escape" then
    -- ESC key to exit
    love.event.quit()
  elseif key == "up" then
    imgdata:mapPixel(brighten)
    img:replacePixels(imgdata)
  elseif key == "down" then
    imgdata:mapPixel(darken)
    img:replacePixels(imgdata)
  end
end

• imgdata = love.image.newImageData(w, h) で ImageData を作成できる。
• imgdata:setPixel(x, y, r, g, b, a) で、(x, y) の位置のドットにRGBAを指定できる。
• love.graphics.newImage(imgdata) で、ImageData から Image を作れる。Image にすれば、Canvas に描画することができる。
• imgdata:mapPixel(関数) で、ImageData の全ドットに対して処理ができる。
• Image:replacePixels(imgdata) で、Image の内容を ImageData で置き換えることができる。

function love.conf(t)
  t.version = "11.3" -- love2d version
  t.window.title = "Simple paint - love2d"
  t.window.width = 800
  t.window.height = 600

  -- VSync Off
  t.window.vsync = 0

  -- t.window.fullscreen = true
  -- t.window.fullscreentype = "exclusive"
end

-- Simple paint on love2d

function love.load()
  love.graphics.setDefaultFilter("nearest", "nearest")
  font = love.graphics.newFont(20)

  scrw = love.graphics.getWidth()
  scrh = love.graphics.getHeight()
  canvas = love.graphics.newCanvas(scrw, scrh)

  bg = make_checker_canvas(scrw, scrh)

  love.graphics.setCanvas(canvas)
  love.graphics.clear(0, 0, 0, 0)
  love.graphics.setCanvas()

  mx, my = 0, 0
  req_clear_canvas = false
  req_export = false

  msg_timer = 0
  msg_str = ""
end

function love.update(dt)
  mx, my = love.mouse.getPosition()

  if req_clear_canvas then
    -- clear canvas
    req_clear_canvas = false
    msg_timer = 0.75
    msg_str = "Clear canvas"
    love.graphics.setCanvas(canvas)
    love.graphics.clear(0, 0, 0, 0)
    love.graphics.setCanvas()
  end

  if love.mouse.isDown(1) then
    -- draw brush
    love.graphics.setCanvas(canvas)
    love.graphics.setColor(0, 1, 0, 1)
    love.graphics.circle("fill", mx, my, 8)
    love.graphics.setCanvas()
  end

  if req_export then
    -- export canvas
    req_export = false
    msg_timer = 0.75
    local filename = os.date("%Y-%m-%d_%H-%M-%S") .. ".png"
    if export_canvas(canvas, filename) then
      msg_str = "Export " .. filename
    else
      msg_str = "Can not export."
    end
  end

  if msg_timer > 0 then
    msg_timer = msg_timer - dt
    if msg_timer <= 0 then
      msg_timer = 0
    end
  end
end

function love.draw()
  love.graphics.setCanvas()
  love.graphics.clear(0, 0, 0, 1)

  -- draw bg
  love.graphics.setColor(1, 1, 1, 1)
  love.graphics.draw(bg)

  -- draw canvas
  love.graphics.draw(canvas)

  -- draw cursor
  love.graphics.setColor(1, 1, 1, 1)
  love.graphics.circle("line", mx, my, 8)

  -- draw text
  love.graphics.setFont(font)
  love.graphics.setColor(1, 1, 1, 1)
  if msg_timer > 0 then
    love.graphics.print(msg_str, 2, 40)
  end

  love.graphics.print("C)lear S)ave", 10 * 10, 2)
  love.graphics.print("FPS: " .. tostring(love.timer.getFPS()), 2, 2)
end

function love.keypressed(key, isrepeat)
  if key == "escape" then
    -- ESC key to exit
    love.event.quit()
  elseif key == "s" and msg_timer == 0 then
    req_export = true
  elseif key == "c" then
    req_clear_canvas = true
  end
end

function export_canvas(canvas, filename)
  local imagedata = canvas:newImageData()
  local filedata = imagedata:encode("png")

  local filepng = io.open(filename, "wb")
  if filepng ~= nil then
    filepng:write(filedata:getString())
    filepng:close()
    return true
  end
  return false
end

function make_checker_canvas(w, h)
  local cnavas = love.graphics.newCanvas(w, h)
  cnavas:renderTo(
    function()
      local start = true
      local sz = 8
      local x, y
      for y = 0, (h - 1), sz do
        local fg = start
        for x = 0, (w - 1), sz do
          local c = fg and 0.6 or 0.4
          love.graphics.setColor(c, c, c, 1)
          love.graphics.rectangle("fill", x, y, sz, sz)
          fg = not fg
        end
        start = not start
      end
    end
  )
  return cnavas
end

• 初期化処理(love.load()内)で、ウインドウサイズと同じサイズの Canvas を作成して。
• 更新処理(love.update(dt)内)で、マウス左ボタンが押されてたら Canvas に緑色の丸を描画。
• 描画処理(love.draw()内)で、Canvas を画面に描画。

• love.graphics.setCanvas(canvas) で、指定した canvas を対象にして描画できるようになる。
• love.graphics.setCanvas() で、デフォルトのキャンバスに対して描画できるようになる。
• canvas:renderTo(func) で、canvas に対して関数 func の処理を実行することもできる。
• love.graphics.circle("fill", x, y, r) で、(x,y) を中心にして塗り潰した円を描画。
• love.graphics.circle("line", x, y, r) で、(x,y) を中心にして線のみの円を描画。
• love.graphics.rectangle("fill", x, y, w, h) で、四角形を描画。