Moiré Test#1 (Back-/Foreground Images)

Abstract: Making a moiré effect using HTML foreground/background images.

Introduction

Just for some fun, I tried to check whether one could make some animations using an overlay of foreground and background images. The moiré-effect (see wikipedia entry on moiré pattern) is probably one of the best applications for that.

Realisation

Patterns

Some while ago, I found this page that contains some nice moiré-patterns. In fact, I do not know what the page itself is about.

Code

After some testing, I wanted to have this be embedded into the blog page. It turned out to be not that easy. Clipping neither worked using the “clip” nor the “clip-path” style property.

At the end, the background image can be moved using the “backgroundPosition” attribute, the foreground image is moved using the “margin” attribute. The complete code is as follows.

var i = 0;
function anim() {
 x = Math.floor(Math.sin(i/40.) * s2) + so;
 y = Math.floor(Math.cos(i/75.) * s2) + so;
 window.document.getElementById("t1").style.margin = -y + "px 0px 0px " + -x + "px";
 x = Math.floor(Math.sin(i/50.) * s2) + so;
 y = Math.floor(Math.cos(i/20.) * s2) + so;
 window.document.getElementById("t0").style.backgroundPosition = -x + "px " + -y +"px";
 i = i + 1;
 window.setTimeout("anim()", 50);
}

Some further code makes it fill the available space and stuff…

Moiré Effect

Conclusion

Ok, ok. Alas, an animated overlay of background and foreground images works well…

Your message
Name:
E-Mail:
Subject:
Message:

Dilettante Habits

Knowing nothing about everything