In Spark AR Studio I've set a texture to a rectangle, which is a transparent PNG with some text on it. I've applied this texture to a rectangle and have put it in the scene. What I'm trying to achieve here is to use a native Slider UI element to change the non-transparent parts of this PNG which is the "Hello World" obviously.
The best related article I could find is from their own docs: Adding a Color Filter which does the steps below:
Imports the texture in patch editor
Pipes in the RGB output into a color space patch and converts the color space into HSL mode
Unpacks the HSL values
Modifies the values somehow
Packs them again, converts back the color mode into RGB and adds an alpha value.
And finally pipes in the output (modified color values) into the material texture which is controlled as a patch
Here's my setup which is not working, and makes the whole rectangle black instead of changing the non-transparent parts of the texture.
Any ideas on how to fix this? I know I haven't added the slider UI element to my patch editor yet, at this point I'm playing around with the values in Orange groups. If that works I'm gonna let an slider, control those values.
From what I'm trying to understand, you want to change the "Hello world" to different colors using the Slider UI?
Have the rectangle's material texture in the patch editor by selecting the arrow.
Drag and drop your "Hello World" texture into the patch editor
Import the Adjust colors shader from the AR Library
In your patch editor, right-click and search for "Slider UI" and insert (Only works for Instagram thus go to "project" on your toolbar --> "Edit missing properties" and uncheck "Facebook")
Connect your "Hello world" Texture RGBA output to the texture input in the Adjust Colors Shader
Connect your "Slider UI" output to the "Hue" input in the Adjust Colors Shader
Connect your Adjust Colors Shader Output to the material "Diffuse Texture"
Click to see how your patch editor should look like
Maybe it's just your preference but I would change the "Hello World" to black & white to make it more visible as I change the colors (I use Photoshop to desaturate but any editor that works is fine)
Related
I'm starting to work on integrating the draw.io editor into my project
https://github.com/jgraph/drawio/tree/dev/src/main/webapp
in the initial state, the shape has a transparent background
I searched almost all files in drawio/src/main/webapp/js
replacing all 'none' or mxConstanet.None related to color with diff. colors to detect the part responsible for the shape background
but without success, please guide me the code that initiates the shape backgroundColor
Thanks you
I'm writing a 'template creation' app using the dcc.Graph image annotation features in Plotly Dash.
The user adds multiple rectangles for specific features in the image (an invoice) and my callback captures the coordinates of each rectangle via the relayoutData variable. I want to use a different color for each rectangle, but can't figure out how to do it.
It seems like the only way to change the newshapes fillcolor
property is to replace the whole figure, but then I lose all previous shapes
All and any help appreciated.
Andrew
I have just found the following demo that does exactly what I am trying to do:
https://dash-gallery.plotly.host/dash-image-annotation/
Now to unpack the logic and adapt it to my context ... Happy 2021!
Andrew
I have used opencv to read png files (with no background) and convert them into pygame surface. Here are the two examples of how I did it:
Method 1:
character=pygame.image.load("character.png")
Method 2:
CharacterImage=cv2.imread("character.png")
CharacterImage=convertToRGB(CharacterImage,CharSize,CharSize)
#charSize is desired character size (for example: 50)
#I have created a user defined function as pygame renders in RGB whereas cv2 renders in BGR image format.
CharacterActions.append(rotate(pygame.surfarray.make_surface(CharacterImage),charrot))
#charrot is rotation angle
I understand that I could manually resize images and then use the first method to get the transparent background image. But I want to understand if its possible to obtain the same via second method? I don't want to manually edit so many images resizing them and that's why I want to know if there's a way for the same.
Thanks in Advance
On the images you load using your Method 1 (pygame.image.load()), you should use pygame.transform.scale() and pygame.transform.rotate() to manipulate the loaded image.
To maintain the transparency, you need to keep the alpa of the image you are loading. To do that you need to use .convert_alpha() on the resulting image. You can do that after or before the transform.
For each of these commands I have linked them to the documentation, just click on them so you can read it.
So I have a simple texture: one big green circle in the center and one small white circle also in the center of my texture. And now I want to change color of my white circle to yellow in my app. Is it possible and what is the best way to set color of my batch for specific region? I saw it is possible in other engines using the second texture with marked region which color will be changed.
Like that:
http://s9.postimg.org/qh7bbu5an/FINAL.png
My original texture
2nd texture with region which color i want to change
The result of my texture in app which will be working like batch.setcolor but only for specific region (pixels) in my texture
If you are looking for an example of masking textures together, you can check this tutorial.
https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson4
It also has a port to libGDX.
I working on HTML Canvas library to construct a "PIE Chart" Now to finish it I need the
given section of PIE Chart to Zoom or Slice once clicked on the section.
I almost done with the PIE Chart with the above exception only
Please do not recommend me to use any charting library available already
What you want cannot directly be done: when you draw on the canvas, you paint pixels that instantly dry onto the canvas. If you want to "zoom in" you'll have to erase the canvas (ctx.clearRect(...)) and re-paint your pie chart using more pixels. This is what a non-retained drawing mode (or immediate drawing mode) graphics API like Canvas requires.
Contrast this with SVG, a retained drawing mode graphics system, where the commands to draw content result in elements being created that you may track events for, adjust properties on, and see the visual results updated for you.
You can "zoom in"--redraw your pie chart larger--either by changing your drawing commands (bigger arc radius, lineWidth, etc.) or by transforming your context (changing the scale and translation) and then issuing the same drawing commands again.
There is also one non-option: if you leave the width and height attributes of the canvas unchanged but change the CSS to height and width properties you can 'zoom in' on your canvas without re-drawing. This is going to cause each virtual pixel on the canvas to grow on your screen, however, resulting in pixelation.