Need help creating a mosaic effect

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
Murii
Party member
Posts: 216
Joined: Fri Jul 05, 2013 9:58 am
Location: Arad, Romania
Contact:

Need help creating a mosaic effect

Post by Murii »

User avatar
shakesoda
Citizen
Posts: 78
Joined: Thu Sep 25, 2014 11:57 am
Location: Seattle, WA
Contact:

Re: Need help creating a mosaic effect

Post by shakesoda »

here, made some quick examples in shadertoy
without mosaic: https://www.shadertoy.com/view/WstXWM
with mosaic: https://www.shadertoy.com/view/3dtXWM

edit: updated the without mosaic one to use a blending method similar to pgimeno's post below
Last edited by shakesoda on Sun Oct 27, 2019 12:24 am, edited 2 times in total.
excessive ❤ moé (LÖVE3D, CPML, ...). holo on IRC.
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Need help creating a mosaic effect

Post by pgimeno »

Not sure if this will do.

Code: Select all

local shader = [[
extern number w, h;
extern Image mosaic_image;

vec4 effect(vec4 colour, Image img, vec2 imgpos, vec2 scrpos)
{
    vec4 pix = Texel(img, imgpos) * colour;
    vec4 mosaic = Texel(mosaic_image, imgpos*vec2(w,h)) * colour;
    // Apply soft light (lerp between multiply and screen, modulated by bottom)
    pix.rgb = mix(pix.rgb * mosaic.rgb,                            // multiply
       (vec3(1.) - (vec3(1.) - mosaic.rgb) * (vec3(1.) - pix.rgb)),  // screen
       pix.rgb  // bottom layer modulates
    );
    pix.a = min(pix.a, mosaic.a);
    return pix;
}
]]

local img


function love.load(arg)
  img = love.graphics.newImage(arg[1])
  img:setFilter("linear", "nearest")

  local mosaic = love.graphics.newImage('mosaic-base.png')
  mosaic:setWrap("repeat")
  mosaic:setFilter("linear", "nearest")

  shader = love.graphics.newShader(shader)
  shader:send('mosaic_image', mosaic)
end

function love.draw()
  love.graphics.setShader(shader)
  shader:send("w", img:getWidth())
  shader:send("h", img:getHeight())
  love.graphics.draw(img, 0, 0, 0, 3)
  love.graphics.setShader()
end

function love.keypressed(k) return k == "escape" and love.event.quit() end
It's a simple soft-light blending shader. The shader needs to know the dimensions of the image you're drawing, so you need to pass them in. The zoom needs to be a multiple of 3, because the basic mosaic tile is 3x3. If you make a tile of a different size, the zoom needs to be a multiple of that size.

The above example needs the image to load as a parameter, e.g. love . <image to draw>.png

Edit: Forgot to attach the mosaic image.
Attachments
mosaic-base.png
mosaic-base.png (94 Bytes) Viewed 4606 times
User avatar
Murii
Party member
Posts: 216
Joined: Fri Jul 05, 2013 9:58 am
Location: Arad, Romania
Contact:

Re: Need help creating a mosaic effect

Post by Murii »

Thanks guys! It works as expected!
Post Reply

Who is online

Users browsing this forum: No registered users and 23 guests