blending

Mix two non-opaque colors with “hue” blend mode

拜拜、爱过 提交于 2019-12-03 15:39:37
问题 I want to implement color blending as described in the W3C compositing and blending spec. (I'm doing this in JavaScript but the language shouldn't really matter for solving my problem.) In retrospect: During the implementation of the answer to this question I realized that this would probably make for a pretty nice standalone package. In case you're interested you can grab it from npm. It worked out pretty well so far but I wanted to take these algorithms a step further and add support for

ffmpeg screen blending mode makes transparent png pink

佐手、 提交于 2019-12-03 07:29:52
I have a sequence of PNG files with transparency - I'd like screen-blend them on top of a video ffmpeg -i video.mp4 -i "Images/%03d.png" -filter_complex "blend=all_mode='screen':all_opacity=0.7" output.mp4 the images are indeed merged on top of the video but with a pink overlay ?! I also tried to add "-vcodec png" and "-vcodec libx264" and to try a .mov video but got the same result. ffmpeg version N-58061-g5231eec Copyright (c) 2000-2013 the FFmpeg developers built on Nov 14 2013 05:35:15 with gcc 4.6 (Debian 4.6.3-1) configuration: --prefix=/root/ffmpeg-static/64bit --extra-cflags='-I/root

Are photoshop-like blend modes possible in HTML5?

爱⌒轻易说出口 提交于 2019-12-03 01:39:54
问题 I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode. The <div> would have position: fixed , so the content below it would change quickly. Is that possible with any HTML5 / CSS3 / canvas / SVG trick? 回答1: I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage: //

Animated pie chart that can animate in both directions

拜拜、爱过 提交于 2019-12-02 22:25:59
问题 I am trying to build an animated pie chart that can animate the pie in both directions depending on whether the value of its progress increases or decreases. I've started with sample code provided here and made some adjustments as suggested here. The trouble is that the back-animation is not yet quite working. It only partially clears the pie. I am not quite sure whether this is due to me using animations incorrectly or calculating coordinates incorrectly, for if I insert

Are photoshop-like blend modes possible in HTML5?

戏子无情 提交于 2019-12-02 15:09:36
I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode. The <div> would have position: fixed , so the content below it would change quickly. Is that possible with any HTML5 / CSS3 / canvas / SVG trick? I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender . Here's the sample usage: // Might be an 'offscreen' canvas var over = someCanvas.getContext('2d'); var under = anotherCanvas.getContext(

Animated pie chart that can animate in both directions

馋奶兔 提交于 2019-12-02 13:31:29
I am trying to build an animated pie chart that can animate the pie in both directions depending on whether the value of its progress increases or decreases. I've started with sample code provided here and made some adjustments as suggested here . The trouble is that the back-animation is not yet quite working. It only partially clears the pie. I am not quite sure whether this is due to me using animations incorrectly or calculating coordinates incorrectly, for if I insert CGContextSetFillColorWithColor(context, UIColor.redColor.CGColor); into the first if branch and change blend mode to

blending two images by Opencv

左心房为你撑大大i 提交于 2019-12-02 05:57:29
问题 I want to align two images of different sizes using Opencv, Indeed the function cvAddWeighted enables us to combine or blend two images of identical sizes which is not my case ! so I need a help if somebody knows how to implement this function with considering the different sizes for images thanks y.m 回答1: First , check Adding Two Images with Different Size. Another way to do it would be to set the region of interested on the bigger image using the width/heigh of the smaller (cvSetImageROI()

Some questions about OpenGL transparency

对着背影说爱祢 提交于 2019-12-02 01:54:02
问题 I have two questions about OpenGL blending. 1) I know I have to draw opaque objects first and then draw from back to front the non-opaque ones. So I put them in a list depending in the distance to the center (0,0,0). But do transformations (rotate and translate) affect the "center" from where I measure the distance? 2) And second, if the items I draw are triangles, how do I measure the distance? To its incenter? To its orthocenter? 回答1: You certainly need to take the transformations into

blending two images by Opencv

时光怂恿深爱的人放手 提交于 2019-12-02 01:35:56
I want to align two images of different sizes using Opencv, Indeed the function cvAddWeighted enables us to combine or blend two images of identical sizes which is not my case ! so I need a help if somebody knows how to implement this function with considering the different sizes for images thanks y.m First , check Adding Two Images with Different Size . Another way to do it would be to set the region of interested on the bigger image using the width/heigh of the smaller (cvSetImageROI() will do that), and then perform the blend with cvAddWeighted(). You'll find some source code to do that and

Some questions about OpenGL transparency

馋奶兔 提交于 2019-12-02 00:50:45
I have two questions about OpenGL blending. 1) I know I have to draw opaque objects first and then draw from back to front the non-opaque ones. So I put them in a list depending in the distance to the center (0,0,0). But do transformations (rotate and translate) affect the "center" from where I measure the distance? 2) And second, if the items I draw are triangles, how do I measure the distance? To its incenter? To its orthocenter? You certainly need to take the transformations into account for sorting. Applying all the transformations, and then sorting by the resulting depth (z-coordinate),