The Porter-Duff Experiment

[TIMAI2]

The Porter-Duff Experiment is NOT about a fictional progressive jazz/rock/fusion supergroup from the 1970's ( ), but relates to the compositing of digital images. You can read all about it HERE and some real world examples HERE

This extension provides all the various transformations available with PorterDuff.Mode. For ALL of the transformations to work, your source and destination image files MUST have a transparent background (or at least a part of the image should be transparent). Please note that the source and destination images need to have the same dimensions for an accurate transformation.

The possibilities for its use are endless, therefore I will show the basics, and then add specific use cases as required / requested.

• Latest Version: 1.0
• Tested: This has been tested, on App Inventor 2 using Android 10 and 12 devices, companion 2.63u. It may work on other derivatives....e.g. Kodular/Niotron/etc.
• Released: 14 July 2022
• Last Updated: 14 July 2022
• Built: Using the Rush Extension Builder by @shreyash

BLOCKS

• An image component is required to display the transformation output, this can then be saved to a file
• The Transformations property contains a list of all the transformations possible, you select from this list and apply it to the transformValue
• provide an absolute path for the source and destination files

USAGE

VIDEO

EXTENSION
PorterDuffTransformations.aix

EXAMPLE AIA
PorterDuffExperiment.aia

.
.
Enjoy , and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

#####################################################################
This work by TIMAI2 is licensed under a
Creative Commons Attribution-ShareAlike 4.0 Unported License with attribution.
Please use name = TIMAI2 and link to this source page when giving credit.
#####################################################################

[TIMAI2]

Here is one that probably everybody wants....

Make a circular profile picture

See here for a full example:

The Porter-Duff Experiment

[image] I took pity, and have created an aia project that demonstrated the workflow required to use the PorterDuff extension to make a circular image from any image of any aspect ratio. I also use my ImageConvertor extension. It will make the circle from the centre of all images. I have set the output image size (and mask) to 256x256 pixels, and these must be png images to maintain the transparency. You should be able to supply the blocks with any image, but you will need to convert contenturis…

[FernanOwO]

You can have the generated image saved to another file instead of an image component (I tried to use the image from the component's image property to put it on a canvas but no matter how hard I try it on the canvas it appears as if the image component doesn't have an image) thanks for the help friend

[TIMAI2]

I try to avoid using the file system

As a workaround:
To load the image into the canvas, use my image to base64 extension, then load the base64String as a background image to the canvas

[SHUBHAMR69]

@TIMAI2

I try to avoid using the file system

Then probably make a helper extension for those who don't try to avoid. (Like me and he.)

[TIMAI2]

Your wish is my command

Extension
PDEV2.aix

Example Blocks in Companion

Screen

This just a stop gap version, there is more to come with V1.x & V2.x.

[FernanOwO]

Thank you very much friend, it is what I needed, I love you :3. Now I just need to find an extension for flood fill that works on android 10 jsjsjsjs

[TIMAI2]

@FernanOwO

Now I just need to find an extension for flood fill that works on android 10

@Juan_Antonio ?

[Anke]

@TIMAI2

Make a circular profile picture

EDIT:
I modified your example aia (PorterDuffExperiment.aia) a bit so that it should work on all Android versions (Companion & APK):

[Know_About_IT]

Awesome

[aadenboy]

I don't understand this error

I clearly have the component right here....

[TIMAI2]

Looks like you are using ios.

ios cannot use extensions, at this time.

[aadenboy]

dang

[mjZurc12345]

How do you get those "get filename" blocks? Sorry I'm new and was wondering where those blocks came from along with what seems to be a procedure block with that "filename" option beside it

[TIMAI2]

Use a procedure block, and then use the mutator block (small blue square) to add an argument to the procedure (which you can name as you want)

https://ai2.appinventor.mit.edu/reference/blocks/procedures.html

[You-Suf]

pls help me i get an error like this every single time " Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference
Note: You will not see another error reported for 5 seconds."

[TIMAI2]

Please show your relevant blocks, or share your aia project.

[You-Suf]

i deleted them and tried a new way. I didn't have the the time 'cause my projects deadline is tomorrow

[HarshVardhanSolanki]

Not working not making the logo circular

I am uploading it my internet got broken in between.

Aia :
ProfilePicture.aia (121.2 KB)

[TIMAI2]

Again, provide an aia project, and your images, that demonstrates this behaviour.