Displacement

This looks nice from Figma - it is like the slit scan experiments I was a working on a while back. And a bit like the Slicer()

It can be done now with various combinations of chopping, scaling and masking, etc.

Anyway - will try and do so experiments with it and introduce something in ZIM 019

1 Like

is this the same idea

1 Like

Hi @karelrosseel82 this is close. The P5js example does it with scale or rotation. Believe it or not... that hole tutorial can be done in a couple lines of code in ZIM:

const tile = chop(new Pic("ai_robot04"),6,6).center();
tile.loop(t=>{t.reg(CENTER,CENTER,true).sca(-1,-1)});

So the idea of displacement is that it actually moves the image inside the chopped tiles, so that means we need to offset where we are getting the image. That is an extra adjustment. Also, it may be that we do not want equal size squares - some of these are not linear equations, they might be exponential.

1 Like

ok, but I can not see the moving squares, when going from left to right they do into the tuturial a 'real picture' to the 'effect on the picture'

how can ZIM do this effect?
image

maybe do it with a picture of you https://zimjs.com/zim/chromakey

thanks to prove ZIM is less code :slight_smile:

see your idea is used into the poster for highschool graphic Arts https://www.luca-arts.be/nl/kom-langs


EN https://www.luca-arts.be/en/come-meet-us has other meeting dates

starting from this image
image

greetZ

1 Like
const tile = chop(new Pic("ai_robot04"),20,20).center().noMouse();
tile.loop(t=>{t.reg(CENTER,CENTER,true)});
Ticker.add(()=>{
    tile.loop(t=>{if (tile.x+t.x>F.mouseX) t.rot(pluck(0,180))}); 
});
1 Like