Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Fisheye for GIF #1489

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

[WIP] Fisheye for GIF #1489

wants to merge 14 commits into from

Conversation

ataata107
Copy link

Concerns #1470

Currently in this PR src/modules/FisheyeGl/Module.js the method setImage of distorter is called after all the steps of extramanipulation is called because of being a callback I guess. Is there any way to execute setImage in each call of extramanipulation?

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

  • tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with npm test
  • code is in uniquely-named feature branch and has no merge conflicts
  • PR is descriptively titled
  • ask @publiclab/is-reviewers for help, in a comment below
  • Insert-step functionality is working correct as expected.

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
Thanks!

@ataata107
Copy link
Author

@harshkhandeparkar can you help me out in this one?

var url1 = canvas2.toDataURL();


distorter.setImage(url1, function() {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is called first time after extramanipulation is called for all frames of gifs. Is there any way to call this synchronously with each frame as the extramanipulation is called.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't get you. Could you please elaborate? Awesome work btw!

Copy link
Author

@ataata107 ataata107 Jan 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
The only problem is that I want setImage method to be called each time extraManipulation is called i.e the no. of frames in the GIF. But right now the setImage method is called for the first time after the execution of extramanipulation for all the frames are done. Some kind of callback or any way of nesting extramanipulation inside setImage will solve this problem i guess

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll check. Wait a min.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I checked. It is supposed to fire once for every frame.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw the AddQR module which kind of uses similar callbacks but is able to put QR on each frame. Maybe that can help. I am working on it.

@codecov
Copy link

codecov bot commented Jan 13, 2020

Codecov Report

Merging #1489 into main will increase coverage by 10.41%.
The diff coverage is 62.31%.

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #1489       +/-   ##
===========================================
+ Coverage   55.11%   65.53%   +10.41%     
===========================================
  Files         117      132       +15     
  Lines        2344     2742      +398     
  Branches      360      430       +70     
===========================================
+ Hits         1292     1797      +505     
+ Misses       1052      945      -107     
Impacted Files Coverage Δ
examples/lib/scopeQuery.js 18.51% <ø> (ø)
src/Modules.js 100.00% <ø> (ø)
src/modules/WebglDistort/Module.js 2.29% <0.00%> (ø)
src/ui/SetInputStep.js 12.90% <0.00%> (-1.39%) ⬇️
src/modules/ColorHalftone/Module.js 3.63% <3.63%> (ø)
examples/lib/defaultHtmlStepUi.js 11.35% <4.08%> (-0.85%) ⬇️
examples/lib/intermediateHtmlStepUi.js 11.11% <5.55%> (+0.94%) ⬆️
src/modules/FisheyeGl/Module.js 18.18% <19.23%> (+5.68%) ⬆️
examples/lib/insertPreview.js 13.15% <20.00%> (-0.36%) ⬇️
src/util/getImageDimensions.js 20.00% <20.00%> (ø)
... and 100 more

@harshkhandeparkar harshkhandeparkar changed the title WIP Fisheye for GIF [WIP] Fisheye for GIF Jan 16, 2020
@ataata107
Copy link
Author

output
fisheye-gl

input
SampleGIFImage_40kbmb (1)

@ataata107
Copy link
Author

it is only rendering the first frame whereas for the rest it renders white frame. Any reason why this might be happening

@ataata107
Copy link
Author

fisheye-gl (1)
Wohoo it is working now i guess only issue is the output is rotated by 90 deg

@jywarren
Copy link
Member

jywarren commented Jan 16, 2020 via email

@ataata107
Copy link
Author

ataata107 commented Jan 17, 2020

Apparently there is a need to take transpose if the source is gif (dont know why that is happening) but now the code is working perfectly for gif and normal images

Edit1: It is only working well for gifs having same dimension along both axis. The main issue is that the pixels get rotated .

@ataata107
Copy link
Author

Solved for all kinds of gif @harshkhandeparkar. We need to pass dataurl as it is instead of using canvas to get the url. Wow this issue was a good one

@harshkhandeparkar
Copy link
Member

harshkhandeparkar commented Jan 17, 2020 via email

@ataata107
Copy link
Author

Do I need to refactor it?

@ataata107 ataata107 closed this Jan 17, 2020
@ataata107 ataata107 reopened this Jan 17, 2020
@harshkhandeparkar
Copy link
Member

Please rebase it to fix the conflicts. Ty!

@@ -314,8 +314,10 @@ module.exports = function PixelManipulation(image, options) {
else resolvedFrames++;

if (options.extraManipulation){
frames[f] = options.extraManipulation(framePix, setRenderState, generateOutput) || framePix; // extraManipulation is used to manipulate each pixel individually.
perFrameShape = frames[f].shape;
getDataUri(frames[f], options.format).then(datauri => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the data URI used for?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the module (fisheye) we need an image source for distorter to set the image. One option was to put pixels into canvas and get the url using canvas.todataurl() but this failed for gifs as it was making the transpose of that array. Hence to counter that i directly used the source url without using canvas method

@ataata107
Copy link
Author

Ok I changed the PixelManipulation

@gitpod-io
Copy link

gitpod-io bot commented Jul 8, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants