HTML Canvas / Easel.js - Frosted glass effect

Engaged ,
Mar 03, 2022 Mar 03, 2022

Copy link to clipboard

Copied

How would I create a dynamic frosted glass effect? 

 

This is for a lens on an optometry trial frame. 

 

The lens is frosted, so that the object behind the lens is more or less depending on the distance between the object and the lens. 

 

It needs to be a dynamic effect simualting a real frosted lens.

 

IMG_4960.JPG

Views

133

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , Mar 14, 2022 Mar 14, 2022
@kglad   JC solved this for me while helping on the lens magnify effect. https://community.adobe.com/t5/animate-discussions/magnifying-lens-html5-canvas/m-p/12800595

Likes

Translate

Translate
Adobe Community Professional ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

start with a blur filter

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

@kglad   Thanks.  Would that work dynamically??  Also I don't think the blur would be consistent across, say a white filled circle with say 50% alpha.   The blur would graduate from the centre to the edge.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

yes, you can use a filter dynamically, but for a uniform look, just import a frosted glass image.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

quote

yes, you can use a filter dynamically, but for a uniform look, just import a frosted glass image.


By @kglad

 

Not sure what you mean by import a frosted glass image. 

 

Frosting or blur would only be apparent when another image is behind the frosted or blured image. 

 

If you export just the element that has the frosted/blurred filter applied say in Illustrator (the whole project is vector graphics), then it would just be opaque in Animate.

 

The frosting/blur needs to be dynamic in Animate, and uniform, so that the frosting/blur is apparent when an element is moved behind the frosting/blured lens.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

i don't see how to do this: The frosting/blur needs to be dynamic in Animate, and uniform, so that the frosting/blur is apparent when an element is moved behind the frosting/blured lens.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

@kglad   JC solved this for me while helping on the lens magnify effect.

 

https://community.adobe.com/t5/animate-discussions/magnifying-lens-html5-canvas/m-p/12800595

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

LATEST

good to know.  thank you! and especially @JoãoCésar 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines