attempting webgl-distort #1022

tech4GT · 2019-04-18T13:49:12Z

@jywarren As of now the image sort of falls out of the canvas, after the module runs, can you try this and see how the inputs need to be changed for a sizeable demo.

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

codecov · 2019-04-18T13:55:19Z

Codecov Report

Merging #1022 into main will decrease coverage by 1.54%.
The diff coverage is 3.37%.

@@            Coverage Diff            @@
##             main   #1022      +/-   ##
=========================================
- Coverage   37.04%   35.5%   -1.55%     
=========================================
  Files         100     102       +2     
  Lines        1857    1946      +89     
  Branches      291     298       +7     
=========================================
+ Hits          688     691       +3     
- Misses       1169    1255      +86

Impacted Files	Coverage Δ
src/Modules.js	`100% <ø> (ø)`	⬆️
src/modules/WebglDistort/index.js	`100% <100%> (ø)`
src/modules/WebglDistort/Module.js	`2.27% <2.27%> (ø)`

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

tech4GT · 2019-04-18T13:59:36Z

Oh silly me!! I put the code to run it in onload which was running it again and again! I fixed it!

tech4GT · 2019-04-18T14:01:16Z

Input:

Output:

tech4GT · 2019-04-18T14:01:34Z

cc @VibhorCodecianGupta

vibhorgupta-gh · 2019-04-18T14:09:23Z

Does this run in node environment as well? In theory, i mean. Is it supported?
Also, i want to test it out locally, I had written some code of my own similar to this deriving from @jywarren 's repo. How can i pull your branch?

tech4GT · 2019-04-18T14:11:13Z

Yes this is running just fine in node. :D
You should be able to run git pull https://github.com/tech4gt/image-sequencer webglDistort

…ncer into blur

vibhorgupta-gh · 2019-04-18T14:24:42Z

@tech4GT sweet, this works perfectly. The next steps could be:

take custom inputs for corner coordinates
take angle argument for distort (since this looks like a rotation function from face value)

Do you have any other improvements in mind?

tech4GT · 2019-04-18T14:29:30Z

Okay Vibhor, that sounds great, would you like to implement the custom options part?
Also @jywarren I tried using the node distribution of glfx but it did not work for me, I think for now the best way is to leave this stuff in the source code itself.

tech4GT · 2019-04-18T14:30:24Z

@VibhorCodecianGupta Once you are done make a pull request at my branch! Thanks!

vibhorgupta-gh · 2019-04-18T14:36:38Z

Will do.
This utilises a matrix of x,y coordinates for the new positions of the corner points, which is a tad bit too mathematical for the users to understand in one go, so they'll end up using trial and error to get the desired effect. The angle approach can be one fix to this. Any other ideas? I'll implement the custom coordinates anyway, just brainstorming here
cc @jywarren

jywarren · 2019-04-18T18:24:35Z

So, for initial implementation, i think we should have x,y for all four corners, because one main use case is MapKnitter.org exporting. But i agree, we may think of other UIs that will be better -- and eventually, we could even have a "dragging" UI similar to https://github.com/publiclab/Leaflet.DistortableImage/ -- although that's a big project!!!

vibhorgupta-gh · 2019-04-18T18:25:24Z

Awesome. Working on x,y coordinates and the angle approach now.

jywarren · 2019-04-18T18:25:28Z

Does it still generate images cut off if it goes outside the original canvas?

This is so rad!!!!!!!!!

jywarren · 2019-04-18T18:26:39Z

I do think we should protect this with a test, esp. for how complex it is. Vibhor, did you want to try that too?

Once we have a test, we should feel comfortable swapping the webgl-distort library to source via NPM (although we can attempt it in a follow-up PR!) What do you think?

vibhorgupta-gh · 2019-04-18T18:27:30Z

Sounds good. I'll write the tests along as well. So this PR will be the custom inputs and test cases.

…nto blur

vibhorgupta-gh · 2019-04-19T05:02:44Z

This is what custom inputs look like.
cc @jywarren @tech4GT

Also, @tech4GT I'm unable to push the changes, it says failed to push refs. I used git push https://github.com/tech4gt/image-sequencer webglDistort
Am I doing something wrong here?

tech4GT · 2019-04-19T05:05:08Z

Good work Vibhor!! Yeah you won't be able to push directly! Push to your fork and make a pull request from there to my branch.

vibhorgupta-gh · 2019-04-19T05:08:32Z

@tech4GT actually, I just did. My rebase commits and custom input code are all in your branch now. I apparently had to name my local branch the same as yours. Is that a problem, should I just make a PR instead?

tech4GT · 2019-04-19T05:09:08Z

Oh, if you are able to push then that's fine!

harshkhandeparkar · 2019-04-19T05:11:28Z

src/modules/WebglDistort/Module.js

@@ -0,0 +1,230 @@
+/*
+* Resolves Fisheye Effect


I think this isn't the correct description.

harshkhandeparkar · 2019-04-19T05:11:59Z

src/modules/WebglDistort/Module.js

+/*
+* Resolves Fisheye Effect
+*/
+module.exports = function DoNothing(options, UI) {


function DoNothing? 😂

harshkhandeparkar · 2019-04-19T05:14:08Z

src/modules/WebglDistort/Module.js

+        try {
+            var canvas = fx.canvas(1500, 1500);
+        } catch (e) {
+            alert(e);


How about an alet that says "Not Supported" instead of just throwing the error. It will mostly be gibberish (i guess).

harshkhandeparkar · 2019-04-19T05:20:52Z

src/modules/WebglDistort/Module.js

+    var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
+
+    var output;
+    var fx = require('./glfx')


Why is it added to npm if it is included from the module folder?

@tech4GT pointed out how the npm distribution wasn't working for him, so he put the script in. For now, the script is utilised but let's not remove the npm dist either

harshkhandeparkar · 2019-04-19T05:26:47Z

@VibhorCodecianGupta what do the negative coordinates indicate? Is the center of the image (0, 0)?

harshkhandeparkar · 2019-04-19T05:27:59Z

Look at the img. It has anti-aliasing problems. Is it because of the library(webgl-distort)? Can it be fixed?

harshkhandeparkar · 2019-04-19T05:29:25Z

Oh wait. The library is added to npm but never used?

harshkhandeparkar · 2019-04-19T05:38:56Z

Are they relative to the original coords?

vibhorgupta-gh · 2019-04-19T05:57:30Z

No, they are absolute. 0,0 is the top left corner of the image.
here: https://github.com/publiclab/image-sequencer/pull/1022/files#diff-ed92d292abbd954e2a350862971fc8f7R203

harshkhandeparkar · 2019-04-19T06:02:39Z

If (0,0) is the top left, will a negative coordinate lie outside the image/canvas?

vibhorgupta-gh · 2019-04-19T06:08:50Z

@harshkhandeparkar pull the branch and try it out locally once, you'll understand how it'll work. If you find some odd behaviour, let us know here

harshkhandeparkar · 2019-04-19T06:10:18Z

Can you or someone publish it to your github pages? I don't have my pc right now. I will only be able to use it tmrw or the day after

harshkhandeparkar · 2019-04-19T06:10:51Z

By the way, can't the image be anti alliased during the rasterisation stage?

vibhorgupta-gh · 2019-04-19T06:13:32Z

Also, from what I have tried out, it works in a relative fashion. The image will not overflow out of the canvas, the coordinates adjust themselves so that the maximum value of a point will be inside the canvas and every other point will be placed relatively. I'll check the anti-aliasing

harshkhandeparkar · 2019-04-19T06:14:43Z

Ok

vibhorgupta-gh · 2019-04-19T14:46:11Z

Added test cases, good to go.
cc @tech4GT @jywarren

jywarren

Cool, just a few things noted here! Great work!!!

jywarren · 2019-04-19T16:06:51Z

test/core/modules/webgl-distort.js

+    };
+var target = 'test_outputs';
+var red = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
+var benchmark = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAH0lEQVQ4T2NkoBAwUqifYdQAhtEwYBgNA1A+Gvi8AAAmmAARf9qcXAAAAABJRU5ErkJggg==";


Hi! Hmm, not sure; is this supposed to show anything? I tried opening it in a browser but don't see an image.

I do see a small grey-ish 16x16 pixel img.

I'll check it out!

jywarren · 2019-04-19T16:07:47Z

test/core/modules/webgl-distort.js

+// Test 2 to check options are correct
+test('Check Options', function(t) {
+  t.equal(sequencer.steps[1].options.nw, '0 100', 'Options are correct');
+  t.equal(sequencer.steps[1].options.ne, '1023 50', 'Options are correct');


Here, that's a really big distortion; it's a very tiny image; could we just say something under 100?

Also, would it be possible to pass comma-separated values rather than space-separated? I think it'll render better in a URL, don't you think?

Agreed, comma separated it is, then

Comma separated values can have spaces as well. We have to replace those as well using regex. A better approach would be to do both. We can first separate it at spaces, then remove all commas, if there are no spaces, separate at commas.

jywarren · 2019-04-19T16:10:11Z

Let's bump the version number to 3.2.0, too! I'm about to publish 3.1.0.

vibhorgupta-gh · 2019-04-19T16:12:12Z

I'll rectify these, then the following bump will support gl-context, fix the crop module bug and support various input methods. Sweet! It'll be of great help here

jywarren · 2019-04-19T16:47:06Z

Just noting that i had already released v3.1.0, so i had to make the last one v3.2.0, so this will need to be v3.3.0. Sorry for the confusion!

harshkhandeparkar · 2019-04-19T16:48:40Z

test/core/modules/webgl-distort.js

-        ne: '1023 50',
-        se: '1223 867',
-        sw: '100 767'
+        nw: '0 0',


These coords aren't space separted. Shouldn't they be?

You are too fast.

harshkhandeparkar · 2019-04-19T16:49:13Z

src/util/parseDistortCoordinates.js

+module.exports = function parseDistortCoordinates(options) {
+
+  let coord = []
+  coord.push(options.nw.split(','))


I think we can also replace any spaces using regex.

vibhorgupta-gh · 2019-04-19T16:49:35Z

This is the new input format now, comma separated:

Also, fixed tests, the new image distorted benchmark image is visible:

jywarren · 2019-04-19T16:50:59Z

Awesome, perfect! I can publish to NPM if you bump the version too.

vibhorgupta-gh · 2019-04-19T16:53:52Z

v3.3.0, right?

jywarren · 2019-04-19T16:54:41Z

Yep!

vibhorgupta-gh · 2019-04-19T17:10:15Z

@jywarren version bumped, distort working. IS is maturing!

jywarren · 2019-04-19T17:11:05Z

Amazing!!!

jywarren · 2019-04-19T17:12:21Z

Publishing to NPM too!

attempting webgl-distort

0f1b4a8

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

fixed the error

55c9ab8

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

Merge branch 'webglDistort' of https://github.com/tech4gt/image-seque…

523f811

…ncer into blur

vibhorgupta-gh added 3 commits April 19, 2019 09:40

WIP

7de33cc

Merge branch 'main' of https://github.com/publiclab/image-sequencer i…

5662207

…nto blur

custom inputs for distort

fa391f8

vibhorgupta-gh requested a review from jywarren April 19, 2019 05:13

harshkhandeparkar reviewed Apr 19, 2019

View reviewed changes

added test suite

8902a1c

jywarren requested changes Apr 19, 2019

View reviewed changes

test fix and input parse

023b2db

vibhorgupta-gh added 2 commits April 19, 2019 22:17

fixed conflicts

9faadf1

test fix

5dc6d7e

harshkhandeparkar requested changes Apr 19, 2019

View reviewed changes

jywarren approved these changes Apr 19, 2019

View reviewed changes

vibhorgupta-gh added 2 commits April 19, 2019 22:29

3.3.0

26a68f3

bump

a3f1b01

jywarren merged commit c36922d into publiclab:main Apr 19, 2019

jywarren mentioned this pull request Apr 30, 2019

Webgl Distort module #1021

Closed

attempting webgl-distort #1022

attempting webgl-distort #1022

Conversation

tech4GT commented Apr 18, 2019

codecov bot commented Apr 18, 2019 • edited Loading

Codecov Report

tech4GT commented Apr 18, 2019

tech4GT commented Apr 18, 2019

tech4GT commented Apr 18, 2019

vibhorgupta-gh commented Apr 18, 2019

tech4GT commented Apr 18, 2019 • edited Loading

vibhorgupta-gh commented Apr 18, 2019 • edited Loading

tech4GT commented Apr 18, 2019

tech4GT commented Apr 18, 2019

vibhorgupta-gh commented Apr 18, 2019

jywarren commented Apr 18, 2019

vibhorgupta-gh commented Apr 18, 2019

jywarren commented Apr 18, 2019

jywarren commented Apr 18, 2019

vibhorgupta-gh commented Apr 18, 2019

vibhorgupta-gh commented Apr 19, 2019

tech4GT commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

tech4GT commented Apr 19, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

harshkhandeparkar commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

harshkhandeparkar commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

jywarren left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

jywarren commented Apr 19, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vibhorgupta-gh commented Apr 19, 2019

jywarren commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

jywarren commented Apr 19, 2019

vibhorgupta-gh commented Apr 19, 2019

jywarren commented Apr 19, 2019

jywarren commented Apr 19, 2019

codecov bot commented Apr 18, 2019 •

edited

Loading

tech4GT commented Apr 18, 2019 •

edited

Loading

vibhorgupta-gh commented Apr 18, 2019 •

edited

Loading