I am working on a graph editor. I need to highlight a circle, and make that circle in the screen center and the set the zoom scale to 2. If the circle is already higlighted, to set it switch it and set as a normal circle. My need is a least to make the circle blink before to switch it off.
I dont see how to make the circle blink. could someone who knows about "two.js" how to do it. I know that it is in the function two.update();
// Render loop
var temps = 0;
two.bind('update', function(){
if (selectedNodes.length > 0){
if (temps > 0) {
temps -= 0.02;
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = 'yellow';
selectedNodes[i].circle.scale = 1.3;
selectedNodes[i].circle.stroke = "red";
selectedNodes[i].circle.linewidth = 2;
}
} else {
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = '#FF8000';
selectedNodes[i].circle.scale = 1;
selectedNodes[i].circle.noStroke();
}
}
}
});
and to trigger the blink
function Blink(){
temps = 1;
}
is it the best way to have this blink (even if it blinks only one time)
here is a JsFiddle
https://jsfiddle.net/hichem147/uf0b82ry/
To use it : Click on [(+) Node], then create some nodes, then click on [Select] and click on a circle, and click on [Blink] button.
Finally, I used setTimeout and setInterval
function MakeCircleBlink(){
var count = 5;
if (count > 0) {
var x = setInterval(function(){
count--;
console.log(count);
if (count ===0) {clearInterval(x);}
blink();
}, 1000);
}
}
function blink(n){
n--;
circle1.stroke = 'red';
circle1.linewidth = 4;
circle1.scale = 1.0;
setTimeout(function(){ circle1.noStroke(); circle1.scale = 1;}, 500);
}
and here is a codepen showing how it works : https://codepen.io/hichem147/pen/jvjKzP?editors=0010
Related
Theres some wierd behaviour when playing with Paperjs, i was trying to curve a line up with 7 points separately - which works fine once, but when trying to make the link overshoot and return to 3 different points (to create a bounce effect) doesn't seem to play ball. On the second if statement, the 'counter' variable doesnt seem to increase instead of decrease, '+ steps' instead of '- steps'.
Maybe i'm not using if statements properly in this case, or paperjs has some strange behaviour?
Heres the codepen for it in full, click above the blue line to trigger it off. . Following is one setInterval for one of the points of the segment.
var seg6first = true;
var seg6sec = false;
var seg6thir = false;
setInterval(function() {
if (seg6first == true) {
counter = counter - steps;
if (counter >= 230) {
path.segments[6].point.y = counter;
path.smooth(); }
else {
seg6first = false;
seg6sec = true;
}
}
if (seg6sec == true) {
counter = counter + steps;
if (counter <= 260) {
path.segments[6].point.y = counter;
path.smooth();}
else {
seg6sec = false;
seg6thir = true;
}
}
if (seg6sec == true) {
counter = counter - steps;
if (counter >= 250) {
path.segments[6].point.y = counter;
path.smooth(); }
else {
seg6thir = false;
}
}
}, mintiming);
Thanks!
Rather than manually building your bounce effect, you can use an animation library like GSAP.
It has a lot of features that will make your task easier (see easing documentation).
Here is an example of what you are trying to do (click on the canvas to animate the line).
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas[resize] {
width: 100%;
height: 100%;
}
<canvas id="canvas" resize></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">
// user defined constants
var SEGMENTS_COUNT = 6;
var CURVE_HEIGHT = 80;
var ANIMATION_DURATION = 2;
// init path
var path = new Path({
fillColor: 'orange',
selected: true
});
// add points
for (var i = 0; i <= SEGMENTS_COUNT; i++) {
path.add([view.bounds.width * i / SEGMENTS_COUNT, view.center.y]);
}
// on mouse down...
function onMouseDown() {
// ...animate points
for (var i = 0, l = path.segments.length; i < l; i++) {
// get a reference to the point
var point = path.segments[i].point;
// calculate offset using sine function to form a curve
var offset = CURVE_HEIGHT * Math.sin(point.x * Math.PI / view.bounds.width);
// register animation
TweenLite.fromTo(
// target
point,
// duration
ANIMATION_DURATION,
// initial value
{ y: view.center.y },
{
// final value
y: view.center.y - offset,
// easing
ease: Elastic.easeOut.config(1, 0.3),
// on update...
onUpdate: function() {
// ...smooth the path
path.smooth();
}
}
);
}
}
</script>
Ok, so I have a game where I have some tree objects that need to be drawn in one side or another. The problem is, even though the condition is working and the trees are being drawn, they're not following the SIDES_RATE condition, specially on Side 2, they're going to the opposite direction while in Side 1 they're almost moving straight, instead of diagonal.
This is my Tree Class:
function Tree1(side, pos_x) {
this.speed = TREE_SPEED;
this.side = side;
this.height = 107;
this.width = 49.3;
this.pos_x = pos_x;
this.pos_y = 10;
this.tree1_image = tree_images[this.side];
}
This is my Tree controller
setInterval(generateTree, TREE_SPEED * 1000);
function generateTree() {
a = (Math.round(Math.random()));
if (a == 0){
tree1_array.push(new Tree1(Math.round(Math.random()),200));
} else {
tree2_array.push(new Tree2(Math.round(Math.random()),600));
}
}
function moveTree(tree){
tree.height += ZOOM_RATE;
tree.width += ZOOM_RATE;
if (tree.side == 0){
tree.pos_x -= SIDES_RATE;
} else if (tree.side == 1) {
tree.pos_x += SIDES_RATE;
}
tree.pos_y += TREE_SPEED;
}
function treeController(){
for (i = 0; i < tree1_array.length; i++){
if (tree1_array[i].pos_y > 900){
tree1_array.splice(i,1);
} else {
moveTree(tree1_array[i]);
}
}
}
This is where I draw them:
Game.draw = function() {
for (i = 0; i < tree1_array.length; i++) {
this.context.drawImage(tree1_array[i].tree1_image,
tree1_array[i].pos_x - tree1_array[i].width/2,
tree1_array[i].pos_y - tree1_array[i].height/2,
tree1_array[i].width,
tree1_array[i].height);
}
}
I don't know what's happening for it to happen. Anything helps.
I am working on a slider to rotate/fade Divs without using jQuery.
This is what I got so far: http://jsfiddle.net/AlexHuber/V2Avd/24/
It rotates once through the array of 4 Divs, continues to the first Div and then stops.
Any ideas? Thanks, Alex
var box=document.getElementById("box");
var index=box.children.length-1;
var active;
var next;
box.children[0].style.zIndex="1";
box.children[1].style.zIndex="1";
box.children[2].style.zIndex="1";
box.children[3].style.zIndex="1";
var timer1 = setInterval(function(){
active = box.children[index];
next = (index > 0) ? box.children[index-1] : box.children[box.children.length-1];
active.style.zIndex = "3";
next.style.zIndex = "2";
var opa = 1.0;
var timer2 = setInterval(function(){
if (opa <= 0){
active.style.zIndex="1";
active.style.opacity="1.0";
next.style.zIndex="3";
clearInterval(timer2);
}
else {
active.style.opacity = opa;
opa -= 0.1;
}
}, 50);
index -= 1;
if (index < 0)
index = box.children.lenght-1;
}, 2000);
On your second from last line change .lenght-1 to .length-1
that makes the divs rotate indefinitely. I'm assuming that's what you want.
How to blink multiple text in classic asp respectively? I'm trying to create a timer in my JavaScript. Must work for IE, Firefox and Chrome. Thanks
<script type="text/javascript">
var col = new String();
var x = 1;
var y;
function blink() {
if (x % 2) {
col = "rgb(255,0,0)";
} else {
col = "rgb(255,255,255)";
}
aF.style.color = col;
aF1.style.color = col;
aF2.style.color = col;
aF3.style.color = col;
x++;
if (x > 2)
{ x = 1 };
setTimeout("blink()", 2000);
}
</script>
You can use the power of closures, I have used your code to set your effect but its better instead of font color change you use jquery fadeIn and fadeOut effect for more smoothy look. And your font effect will only work on text part not on the whole element. so its better either you play with opacity or use jQuery
function blink(node)
{
var x = 1;
var timer;
function start_blink()
{
if(x%2==0)
col = "rgb(255,255,255)";
else
col = "rgb(255,0,0)";
node.style.color = col;
x++;
if (x > 2)
{ x = 1 };
}
function stop()
{
if(timer)
clearInterval(timer);
}
timer = setInterval(start_blink,2000);
return stop;
}
How to use
var ele = document.getElementById('whomYouWantToBlink');
var stopper = blink(ele);
// to stop you can always call stopper() to stop the respective elements blinking effect
I am working on a little javascript gallery that displays a number of differenty images, and fades in and out. Unfortunately I can't seem to get the fade in properly working.
Can anybody tell me how to fix this?
This is my code so far:
//This goes in the head of the html file:
<script type="text/javascript">
var imageCount = 4;
var image = new Array(imageCount);
image [1] = "slideshow/testimg1.jpg"
image [2] = "slideshow/testimg2.jpg"
image [3] = "slideshow/testimg1.jpg"
image [4] = "slideshow/testimg2.jpg"
</script>
//This goes in the body of the html file
<img width="760" height="260" name="slide">
<script type="text/javascript">
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
//Change image
document.images.slide.src = image [step];
//Change step
if (step < imageCount)
step++;
else
step = 1;
FadeIn();
}
function FadeIn()
{
if (document.images.slide.style.opacity < 1)
{
//Increase opacity
document.images.slide.style.opacity += 0.05;
setTimeout("FadeIn()", 20);
}
else
{
//Set opacity to 1, fade out
document.images.slide.style.opacity = 1;
setTimeout("FadeOut()", 4000);
}
}
function FadeOut()
{
if (document.images.slide.style.opacity > 0.05)
{
//Reduce opacity
document.images.slide.style.opacity -= 0.05;
setTimeout("FadeOut()", 20);
}
else
{
//Set opacity to 0.5, change the image
document.images.slide.style.opacity = 0.05;
NextImage();
}
}
NextImage();
</script>
The idea is that is swithes between the NextImage, FadeIn and FadeOut functions.
I have everything working except for the fades, because it whenever I test it it goes like this:
Load image, fade out, load second image, freeze.
I hope someone can help me with this.
Thanks in advance.
~Luca.
EDIT:
This fixed it:
//Increase opacity
var x = parseFloat(document.images.slide.style.opacity) + 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);
Thanks!
Change:
setTimeout("FadeIn()", 20);
to
setTimeout(FadeIn, 20);
and see if that helps (and the other setTimeout functions as well).
EDIT/Addition:
The document.images.slide.style.opacity += 0.05; is not actually incrementing. Try the following modification:
//Increase opacity
var x = parseFloat(document.images.slide.style.opacity);
x += 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);
Here's a working fiddle.
Actually wat is happening is the event stack where the set time out function saves the events to be executed after a particular interval is getting overflown :)
fiddle
try{
var imageCount = 4;
var image = new Array(imageCount);
image [1] = "http://i.dailymail.co.uk/i/pix/2009/06/01/article-0-05144F3C000005DC-317_468x387.jpg";
image [2] = "http://images.theage.com.au/ftage/ffximage/kaka_narrowweb__300x323,2.jpg";
image [3] = "http://ricardokakaonline.com/wp-content/uploads/2011/10/istoe.com_.br-kaka.jpg";
image [4] = "http://farm2.static.flickr.com/1226/1366784050_d697d3cde3.jpg";
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
//Change image
document.images.slide.src = image [step];
//Change step
if (step < imageCount)
step++;
else
step = 1;
FadeIn();
}
function FadeIn()
{
if (document.images.slide.style.opacity < 1)
{
//Increase opacity
document.images.slide.style.opacity += 0.05;
setTimeout(FadeIn(), 200);
}
else
{
//Set opacity to 1, fade out
document.images.slide.style.opacity = 1;
setTimeout(FadeOut(), 2000);
}
}
function FadeOut()
{
if (document.images.slide.style.opacity > 0.05)
{
//Reduce opacity
document.images.slide.style.opacity -= 0.05;
setTimeout(FadeOut(), 200);
}
else
{
//Set opacity to 0.5, change the image
document.images.slide.style.opacity = 0.05;
NextImage();
}
}
NextImage();
}catch(e){
alert(e)
}
try using jquery to give fade in fade out .. I just added a try catch block to see Why it is freezing.
Heres a link for fade in fade out using javascript fade in out