In Processing, which is the fastest way to delete previous text - text

I tried to rewrite text with the backgroud color, but the edge (outline) of the old text remains on the screen. I have no idea why. Can you please help me?
background(-1);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(-1);
text("99",300, 200);
Outcome:

In the future, please try to post a MCVE. The code in your post draws the text completely off the screen, which makes me wonder what else is different in your real code. Are you using a draw() function? Please avoid these uncertainties by posting a MCVE.
Anyway, your basic problem is caused by anti-aliasing. By default, Processing uses anti-aliasing to make drawings appear more smooth and less pixelated. You can see this if you zoom in to a drawing and notice the edges are a bit blurry. This is a good thing for most drawings, but in your case it's causing the blurry edges to show through.
So, to fix that problem, you could disable anti-aliasing by calling the noSmooth() function:
size(500, 500);
noSmooth();
background(255);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(255);
text("99",300, 200);
Also notice that I'm using 255 as a paramter instead of -1. I'm not sure what a color parameter of -1 is supposed to do, so I'd keep it between 0 and 255 just to be safe.
But it's a little fishy that you need to "delete" any text in the first place. Like George's comment says, why don't you just call the background() function to clear out old frames?
Here's a small example:
void draw() {
background(64);
if (mousePressed) {
text("hello", 20, 40);
}
}

Related

Basic Transition Issues

I'm trying to write a basic script which uses the remote API to turn on my lights, then transition them to a certain color. The code for doing so using a custom SDK looks something like this:
group.SetState(hue.State{On: true, Bri: 0, Hue: 4000, TransitionTime: 0})
time.Sleep(1 * time.Second)
group.SetState(hue.State{TransitionTime: 300, Bri: 254, Hue: 11500, Sat: 0})
Where each of the SetState calls makes a call to the Group command API. Seems simple enough but I'm having a couple of issues:
Unless I dim the lights then turn them off first (or call the 'Cinema' formula from Hue Labs), when I call this code the lights come on at whatever brightness they were at before, seemingly ignoring the first setState call.
The brightness and saturation of the transition are ignored. All it does is transition Hue, though this behavior varies depending on if I include the sleep timer or not.
Any thoughts on what I am doing wrong?
EDIT: It looks like the API isn't even respecting the first statement's brightness setting. If I make the call to set it to 0, nothing happens.
It turns out the issues I described were due to json:"___,omitempty"being on the brightness, transition, and saturation settings. This means that when they have a value of 0 they are left out when marshalling to json in Go. facepalm.
Converting the values to int pointers fixed the issue for me.

JavaFX - Center Text in TextFlow vertically

I'm currently working with JavaFX' Text and TextFlow layout, and I need to figure out how to center the Text node inside a TextFlow.
As you see in the picture below, I've added some ImageView's, to simulate emoticons which I want to add.
The problem is, that they are aligned differently. While the emoticons are centered, the text stays at the bottom.
The green border line represents the TextFlow's border, the blue border line the Text's one.
I've already tried out to set the Text's textOrigin property to CENTER, but it doesn't change anything in my case. Setting textAlignment to CENTER won't work either.
Here's my code excerpt:
public CChatMessage(String senderName, String messageText)
{
this.sender = new Label(senderName);
this.sender.setTextAlignment(TextAlignment.CENTER);
this.sender.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 14));
this.message = new Text(messageText);
this.message.setTextAlignment(TextAlignment.CENTER);
this.message.setTextOrigin(VPos.CENTER);
this.setEffect(new DropShadow());
this.setAlignment(Pos.CENTER);
this.setPadding(new Insets(0, 10, 10, 10));
TextFlow messagePane = new TextFlow();
messagePane.setStyle("-fx-border-color: green");
messagePane.setTextAlignment(TextAlignment.CENTER);
Image smileyImage = new Image("/resources/smiley.png");
messagePane.getChildren().addAll(this.message, new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage),
new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage));
if(!senderName.equals(""))
{
CChatMessage.setMargin(messagePane, new Insets(10, 0, 0, 0));
this.message.setFont(Font.font("Calibri", FontWeight.SEMI_BOLD, 18));
this.getChildren().addAll(this.sender, messagePane);
}
else
{
this.setPadding(new Insets(5, 5, 5, 5));
message.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 11));
this.getChildren().add(messagePane);
}
}
Edit: I think this is the answer you're looking for: https://bugs.openjdk.java.net/browse/JDK-8098128
Edit 2:
It appears the solution I've given below has a problem. The words in the Text node don't stay within the HBox. So far, I haven't figured out how to fix that. But it does stay inside when the Text nodes are inside a TextFlow container.
A solution to the problem has been given there. I don't fully understand it but I hope you do.
I'll just leave my original answer since it contains the way I'm dealing with the issue.
This solution might work. After failing to center the Text node like that, I've come to this workaround: Rather than using the TextFlow, I've used an HBox. It gets the job done for me. The behaviour is similar enough and I'm able to align the Text nodes whichever way I want.
But a word of caution, I'm just a newbie. So there may be issues that would pop up if you used this method. I don't know about the properties of TextFlow and HBox enough to confidently answer. But I just thought I'd tell you my solution since that's what I'm using for my project now. (Edit: As you can read above at Edit 2, I ran into one problem. There might be more.) :)
Happy coding.

Fabricjs canvas objects not rendering properly

I need help with fabricjs, objects are not rendering properly while I clone and shrink to another canvas.
If I do only with text object there is not problem kindly look the below fiddle (after save)
enter code hereFIDDLE
If I load an image then the objects not aligning properly.
enter code hereFIDDLE
Kindly help to resolve form this.
Thank You.
Your problem for the image not respecting the zoom is that the image loads asyncronously. So you load from json, you do the zoom logic, some microseconds later the image finish loading and sets its own width and height.
Other than this you have to use zoom the right way.
Everyone is scaling manually and changing left and top using division or multiply with scale factor.
The good way is using
canvas.setZoom(scale);
This will save a lot of headaches to you.
$(function () {
scale = 0.5;
canvas1 = new fabric.Canvas('c1');
canvas1.setDimensions({
"width": canvas.getWidth() * scale,
"height": canvas.getHeight() * scale
})
var json = localStorage.getItem('save');
canvas1.loadFromJSON(json, function () {
canvas1.renderAll();
});
canvas1.setZoom(scale);
canvas1.renderAll();
});
chek updated fiddle
https://jsfiddle.net/asturur/Lep9w01L/11/

SVG animation with JS -- issues with transform-origin and stroke-dashoffset

I need to create speed gauge with SVG. As the speed changes, a needle is rotated to indicate the proper speed on the gauge, and an arc is drawn around the gauge's circumference following the tip of the needle.
I have attempted to use three different libraries (VelocityJS, SnapSVG, and GSAP) to solve issues with the needle's rotation, but I have not succeeded yet in finding an implementation that works.
My initial attempts were with Velocity. I got it working in all browsers except IE. In IE, all attempts to change transform-origin failed.
Then I tried both SnapSVG and GSAP, but two issues keep coming up:
The needle's rotation mostly works well, but occasionally it rotates in the wrong direction, under the gauge, no doubt following the shortest distance to the point.
In IE, stroke-dashoffset causes unpredictable results.
I have created a CodePen that shows the gauge's behaviour when driven by either of these three libraries.
Any help?
Snap version works fine for me, but I'm guessing the problem as mentioned is stroke-dashoffset which I can't test in IE.
One possibility if stroke-dashoffset is not possible, is to rebuild the path string each time. Uses a bit more resources, but I think may be ok.
Otherwise you could try drawing a mask or clip the same size as the arc over it, and animate that, but it will use more resources as well.
Here is a Snap solution, rebuilding the arc path each time.
Amended code...
var arc = Snap.select('#gauge-arc');
var arcLength = arc.getTotalLength();
var arcString = arc.attr('d');
arc.attr({ d: ''})
Snap.animate(0,arcLength, function( val ) {
var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
arc.attr({ d: arcSubPath });
}, 100, function() {
Snap.animate(arcLength,0, function( val ) {
var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
arc.attr({ d: arcSubPath });
},500);
})
},
Example fiddle (note, the other buttons probably won't work as I've removed the stroke-dashoffset in the svg markup).

iPhone help with animations CGAffineTransform resetting?

Hi I am totally confused with CGAffineTransform animations. All I want to do is move a sprite from a position on the right to a position on the left. When it has stopped I want to "reset" it i.e. move it back to where it started. If the app exits (with multitasking) I want to reset the position again on start and repeat the animation.
This is what I am using to make the animation..
[UIImageView animateWithDuration:1.5
delay:0.0
options:(UIViewAnimationOptionAllowUserInteraction |
UIViewAnimationOptionCurveLinear
)
animations:^(void){
ufo.transform = CGAffineTransformTranslate(ufo.transform, -270, 100);
}
completion:^(BOOL finished){
if(finished){
NSLog(#"ufo finished");
[self ufoAnimationDidStop];
}
}];
As I understand it the CGAffineTransforms just visually makes the sprite look like it's moved but doesn't actually move it. Therefore when I try and "reset" the position using
ufo.center = CGPointMake(355, 70);
it doesn't do anything.
I do have something working, if I call
ufo.transform = CGAffineTransformTranslate(ufo.transform, 270, -100);
it resets. The problem is if I exit the app half way through the animation then when it restarts it doesn't necessarily start from the beginning and it doesn't go the the right place, it basically goes crazy!
Is there a way to just remove any transforms applied to it? I'm considering just using a timer but this seems silly when this method should work. I;ve been struggling with this for some time so any help would be much appreciated.
Thanks
Applying a transform to a view doesn't actually change the center or the bounds of the view; it just changes the way the view is shown on the screen. You want to set your transform back to CGAffineTransformIdentity to ensure that it looks like "normal." You can set it to that before you start your animation and set it to what you want it to animate to.

Resources