Create LCD Photo Augmentation

[proofconstruction]

It's common to use a camera phone to take a picture of a document displayed on a computer monitor. Often this is the lowest-friction means of making a record, which doesn't involve connecting a portable storage device or sending the file with email.

It might be good to have an augmentation that replicates the visual warping effect resulting from this. Some example shots taken from this Issue submission page, taken with my phone (and JPEG compressed to fit GitHub's upload size requirements):

The warping effect, called the Moiré pattern is produced by interfering signals in the light produced by the screen pixel grid and the light received by the camera's sensor grid.

This repository contains code for removing the effect, which should be adaptable to add it back in.

[shaheryar1]

Has anyone started working on this ?

[kwcckw]

Has anyone started working on this ?

Nope, i didn't work on anything related to this yet.

[proofconstruction]

I think a good start would be finding some example images of the effect and adding them to #118.

Then we can see the different patterns and decide how to reproduce them.

One relatively easy approach might be the following:

1. pick a point on the image, call it p1
2. pick another point on the image, call it p2,
3. generate some reasonable constants for a parabola with p1 as the focus and the line connecting p1 and p2 as the axis,
4. generate some offset (the period of this effect)
5. draw the parabolas (or some other shape, like hyperbolas) according to the p1 p2 line and constants, at the offsets

I'm not sure what we should do about the pixel colors, since the shapes we draw should be close to the colors of the underlying image. Any ideas?

[shaheryar1]

I'll start working on it today by doing some initial research and experiments.

[shaheryar1]

Made some progression by overlaying linear and circular patterns and these lined patterns are produced when the camera has a high shutter rate.

But I think we can make it better using some kind of irregular ripple effect.

[kwcckw]

Made some progression by overlaying linear and circular patterns and these lined patterns are produced when the camera has a high shutter rate.

But I think we can make it better using some kind of irregular ripple effect.

Looks great, I think it will be better if we can adjust the intensity too, since it looks a little bit darker now. Also adding some gradient in the brightness will be better too .

[shaheryar1]

Looks great, I think it will be better if we can adjust the intensity too, since it looks a little bit darker now. Also adding some gradient in the brightness will be better too .

Yes, the intensities of the patterns can be adjusted. For the brightness gradient, I think a separate augmentation can serve the purpose here.

[shaheryar1]

Augmentation representing overlays of circular/horizontal/verticle patterns are added in this Notebook. You guys can check and provide feedback

[kwcckw]

Augmentation representing overlays of circular/horizontal/verticle patterns are added in this Notebook. You guys can check and provide feedback

In the last section of code is there any purpose to use create_linear_pattern before create_circular_pattern?

    org_img=cv2.imread('/content/test.png')
    H,W,C = org_img.shape
    alpha=0.08
    pattern=create_linear_pattern(H,W)
    pattern=create_circular_pattern(H,W)
    
    cv2_imshow(overlay(org_img,pattern,alpha))

[shaheryar1]

This is of no significance, you can comment/remove any 1 pattern. I still have to add parameters to randomly select the pattern type and intensities.

[jboarman]

Working Technique for an LCD Screen Pattern

This website applies a pattern overlay using CSS to get a pattern that looks a photo was taken from a screen. There are might even be versions of generated patterns that could be applied in layers to simulate Moiré pattern.

Overlaid Version of Image:

Original Image:

Pattern Overlay (super tiny, almost invisible image b/t brackets): [ ]

Source URLs: https://www.normascafe.com/locations/ https://www.normascafe.com/spillover/proto/normascafe/images/design/pattern.png https://www.normascafe.com/spillover/proto/normascafe/images/backgrounds/deliverytruck.jpg

[jboarman]

Moiré Effect in Displays: A Tutorial (Lots of Maths!)

Vladimir Saveljev, Sung-Kyu Kim, Jaisoon Kim

The tutorial describes essential features of moiré patterns, as well as the circumstances, when the moiré patterns appear and how to estimate their characteristics (parameters) such as the orientation and period. The moiré effect is described in two domains, the image space (spatial domain) and in the spectral domain using the complex numbers. The tutorial covers the indicial equation method, the coplanar and noncoplanar sinusoidal gratings, the moiré effect in a spatial object (a cylinder), as well as explains the moiré wave vector, the moiré spectra, the spectral trajectories, and summarizes behavior of the visible patterns in moved/rotated gratings.

https://www.spiedigitallibrary.org/journals/optical-engineering/volume-57/issue-03/030803/Moir%C3%A9-effect-in-displays-a-tutorial/10.1117/1.OE.57.3.030803.full?SSO=1

[kwcckw]

This is now added in https://github.com/sparkfish/augraphy/pull/413.