I have a simple cube in THREE.js:
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xCC0000});
var cube = new THREE.Mesh(
new THREE.CubeGeometry(100, 100, 100),
cubeMaterial);
cube.position.set(0.7,1.95,-0.1);
cube.scale.x = cube.scale.y = cube.scale.z = 0.002;
scene.add(cube);
Any suggestions on how I can change the color of the material on the fly? What I want to achieve is a smooth fade (for instance from red to green) and be able to fade the color dynamically. So my guess is that it needs to be continuously re-rendered in the render-loop, and then somehow the color should be changed so it will gradually be faded to the target color. But I'm not really sure how to do that in code..
Thanks in advance!
Anders
You can use TWEEN.js: https://github.com/sole/tween.js/
There is a good solution to your question in this Stackoverflow question: How to tween between two colours using three.js?
Related
I have several fonts that I would like to use that are basically outlines of letters, but the insides are transparent. How would I go about filling only the inside areas of these fonts with with a color? I suspect it would be using the special blitting RGBA_BLEND modes, but I am not familiar with their functionality.
Here is an example of the font I am using:
https://www.dafont.com/fipps.font?back=bitmap
Right now, I am simply rendering the font onto a surface, and I've written a helper function for that. Ideally I would be able to integrate this into my function.
def renderText(surface, text, font, color, position):
x, y = position[0], position[1]
width, height = font.size(text)
position = x-width//2, y-height//2
render = font.render(text, 1, color)
surface.blit(render, position)
Thank you so much for any help you can give me!
An option is to define a surface the size of the text, fill that with the color you want, and blit the text on that. For example you could do this:
text = font.render('Hello World!', True, (255, 255, 255)
temp_surface = pygame.Surface(text.get_size())
temp_surface.fill((192, 192, 192))
temp_surface.blit(text, (0, 0))
screen.blit(temp_surface, (0, 0))
This will create a temporary surface that should fill in the transparent pixels of a text surface. There is another option of using set_at() but its too expensive in processing power for what you are doing and is best used for pre-processing surfaces.
Im certain that a better option using BLEND_RGBA_MULT will come from a more experienced user. Im not too good at blending modes either.
I must be missing something...why isn't this working? Instead of clipping to the circle the entire 800x800 backdrop image is displayed...
var mask;
var img;
function preload() {
game.load.image('back', 'backdrop.jpg');
}
function create() {
img = game.add.image(game.world.centerX, game.world.centerY,'back').anchor.setTo(0.5);
mask = game.add.graphics(0, 0);
mask.beginFill(0xffffff);
mask.drawCircle(game.world.centerX, game.world.centerY, 600);
img.mask = mask;
}
jsfiddle here
Disclaimer: I have no formal experience in phaser.io
I was able to fix this in your fiddle by changing
img = game.add.image(game.world.centerX, game.world.centerY,'back').anchor.setTo(0.5);
to
img = game.add.image(0, 0, 'back');
JSFiddle Fork
I would assume that placing the image in the centerX,centerY position results in the mask being offset of the image. Hopefully someone with more experience than I could explain the specifics here, but I will research further and update my answer as I figure out the why to go along with the how.
Update
Okay so I've done some digging through the documentation. First, you want to use img = game.add.image(0, 0, 'back'); due to the fact that the x and y parameters in this case dictate the upper-left origin of the image, not the center. By using game.world.centerX and game.world.centerY you are trying to throw the background image to the center of the canvas even though the canvas is the same size as the image.
using .anchor.setTo(0.5) from what I can gather, is attempting to set the anchor point at which the image originates to the centerX position. However, when you remove this anchor, suddenly the mask works, even though it is not showing correctly (because the position of the background image is incorrect).
Theory - By anchoring the image, I believe that it is no longer possible to apply a mask to it. By all experimenting that I've done, having an anchor set on the background image prevents it from being masked, so the mask simply is added as a child to img and is placed as it's center, thus why you are seeing the white circle instead of the circle properly masking the image.
it appears I was a mistaken about the fluidity of the api in trying to chain that last function call... if I break it up:
img = game.add.image(game.world.centerX, game.world.centerY, 'back');
img.anchor.setTo(0.5);
it now works!
Fiddle Here
I am trying to get make an effect with sprite kit on Mac on SKShapeNodes ( a normal Node would be fine too ) to like something like this:
http://firewall.com.pl/wp-content/uploads/2013/05/mailstore-cloud-edition-en.png
a circular node surrounded by a rather glow effect, not fully opaque. Any ideas? I also want the "glow" to get different colors. The only idea right now would be an round, white image as png with "fade out" intensity on the edges until it is completely transparent. Then cover that with an blend factor. But I wonder, if there is an simpler way to do this.
If any of you have an good idea, I would be very grateful.
Regards
Thomas
That looks like more of a lens flare. but here is something that may get you started: try this code then fill with black, of course you will have to adjust the glow and circle to fit your needs.
-(void) CreateGlowingCircles {
SKShapeNode *ball = [[SKShapeNode alloc] init];
CGMutablePathRef myPath = CGPathCreateMutable();
CGPathAddArc(myPath, NULL, 0,0, 20, 0, M_PI*2, YES);
ball.path = myPath;
ball.lineWidth =0.1;
ball.glowWidth = 15.5;//adjust for more glow effect
//add fill and stock for the black dot inside the glow
ball.position = CGPointMake(200, 200);
[self addChild:ball];
}
This is a piece of code from a example project i did...
from there you could add a filter! I hope this gets you started. for the lines that connect the black spots you could figure out some advanced physics magic. look up SKPhysicsJointFixed etc.. good luck!
I'm using docx4j to create a docx file. I want my table border to be blue colored but it is only showing black.how to do this?
Here is my code:
table.setTblPr(new TblPr());
CTBorder border = new CTBorder();
border.setColor("FFF");
border.setSz(new BigInteger("0"));
border.setSpace(new BigInteger("0"));
border.setVal(STBorder.SINGLE);
TblBorders borders = new TblBorders();
borders.setBottom(border);
borders.setLeft(border);
borders.setRight(border);
borders.setTop(border);
borders.setInsideH(border);
borders.setInsideV(border);
table.getTblPr().setTblBorders(borders);
You need to set the color attribute of the border in question. Your example code appears to have you setting a colour of 'FFF' which obviously won't work if it needs to be blue! I would suggest trying a straight blue in hex and going from there. For example a (very) standard blue would be:
CTBorder border = new CTBorder();
border.setColor("0000FF");
I'm trying using this code :
LoadMoreElement elm = new LoadMoreElement (normalCaption, loadingCaption, tapped);
elm.BackgroundColor = UIColor.Blue; // new UIColor (27,109,192,1);
elm.TextColor = UIColor.White;
This results in a complete blue rectangular cell with no rounded corners.
What I'm missing?
The LoadMoreElement is only intended to be used in the middle of the table, not on the corners.
If you want to use it, you will need to write custom code to render the corners, you can see some sample code in the ImageElements.