I tried the jquery crSpline plugin (http://ijin.net/crSpline/demo.html), but I have some weird movement with the last but one coordinate.
The top property of the red point goes wild with the last but one position (something like -3000px).
Here you can find some code: https://github.com/xseignard/test-crspline
and the demo here: http://xseignard.github.com/test-crspline/
Do you see something wrong?
Or even better, since the plugin development seems to be dead, do you have an alternative?
Regards,
Xavier
The problem is so, that you do not convert string values of x and y to integers. That's why the maths works with strings and do string concatenation instead of sum (e.g. in generateExtension method).
Just add parseInt to your coordinates conversion and everything will work.
$.each(json, function() {
points.push([parseInt(this.x, 10), parseInt(this.y, 10)]);
});
Related
I want to create an irregular lines with liquify effect like photoshop. Also, want to implement it by p5.js.
Is it possible use some mathematical formula to create line like the referring image.
Or how can I do this effect? Any idea can guide me. thanks a lot!!
There is for sure an algorythm to liquify something. But there is way too much information missing on what you are trying to do, or what the photoshop-effect looks like.
I'd suggest you start small. Draw a vertical line in P5 center of your screen. (Loop to draw each dot individually). Now for every y of your line use a random value provided by "Open Simplex". Offset the dot x-position by the random value. Tip: Use a fixed seed.
When using the OpenSimplex. You will have to use any of those: noise2D, noise3D, noise4D
You can use any you want. The important thing is you modify only one value by your y and one by time (frameCount for example). The value you get back will be a little different from the previous one every time. Like this you will get a random value for every iteration, but a random value which is not too different from the previous value of y. Thats how the liquidity illusion is provided.
Read up on OpenSimplex.
This is the 2D(+1D [Time]) Version of it: https://editor.p5js.org/codingtrain/sketches/MPqnctIGg
I'm experiencing an issue with a formula in JavaScript.
var animMoveX = $(this).attr('data-start') + (animPercentage / 100) * ($(this).attr('data-finish') - $(this).attr('data-start'));
To my eyes it's a fairly simple piece of math, but the console outputs 120-[variable no relative to animPercentage, eg. 126.49681528662421].
I've double-checked all variables, and they are correct, and if I replace one of the $(this).attr('data-start') variable in one of the positions with a fixed number, then the calculation is run just fine. Can someone shed some light on why this is, and how I could potentially work around it?
From my comment: Precedence means it will calculate a number on the right and add it to the string from data-start (i.e. using string concatenation). That needs to be converted to a number too. #Pointy's suggestion will do that as data converts strings to appropriate data types (when it can).
So basically change all the attr() calls to data() calls and "numbers" (stored in attributes) will become numbers:
var animMoveX = $(this).data('start') + (animPercentage / 100) * ($(this).data('finish') - $(this).data('start'));
As an added bonus, using data instead of attr is shorter code too :)
I'm trying to make a type of circular display which cycles through a series of values as well as moving text elements within an svg file. It uses the hammer.js library and uses the drag event. The values can go in either direction. I have it working to some degree. As the last value is shown from an array, it goes back to the beginning of the array to get the first values. Or vice-versa.
var keyArray = ["C","C#","Db","D","D#","Eb","E","F","F#","Gb","G","G#","Ab","A","A#","Bb","B"];
This is my array. Here is how I wrap it past the end of the array and back to the beginning.
** As per the request of a few commenters and the suggested solution by Nina, I have modified the code below to reflect their suggestions. I have also added a few more lines for clarity of what is happening overall.**
var delta = keyArray.length - 5; // can be constant, it is always positive
for(i=0;i<5;i++){
//5 svg text element containing 5 musical keys
keys = document.getElementById("keys"+i);
//ev.deltaX is the change received from the hammer pan event
//text element moves relative to its original starting X
keys.setAttribute("x",startingSpots[i]+ev.deltaX%150);
currentX=keys.getAttribute("x");
currentEdgeIndex=keyArray.indexOf(keys.textContent);
//This if is what appears to be failing.
if (keys.getAttribute("x")>=565){
keys.setAttribute("x",currentX-150);
keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];
}
}
With the suggested changes, I removed the Number() calls as well as implementing the modulus for the wrapper. The behavior is still erratic. On the example below, if you pan to the right, as the first text element reaches 565, it meets the condition for the if, is moved back to the left by 150.
What it should do next is to change the textContent to the next appropriate value in the array. However, this is where it becomes erratic, it is no longer past 565 so it does not meet the condition of the if statement, but the text changes at every increment of the pan event as if it were.
I am sure I am not seeing something simple that is causing the trouble but not sure what it is.
The array does appear to be circling correctly, though I'm still not sure "How can I check to see if the if statement is being correctly evaluated and met?"
The project can be viewed here. http://codepen.io/cmgdesignstudios/pen/zrmQaE?editors=1010
* Edit with solution *
Nina suggested the problem lie in the handling of the touch event. After further investigation, I found she was correct. I had originally been moving the object relative to its starting position and the deltaX from the touch event. I then was trying to change the current position by simply moving it back to the left rather than adjusting the starting position.
So I replaced the
keys.setAttribute("x",currentX-150);
with
startingSpots[i]-=150;
This kept the movement relative to the starting position and the deltaX of the touch event.
Please delete the Number(...) casting where it's not necessary. ...length returns always number and the result of calculation is a number too.
Your actual key feature is to move 5 entries down, and this can be achieved wit a simple addition and a modulo, to keep the value in a specific range, like
keys.textContent = keyArray[(keyArray.length + currentEdgeIndex - 5) % keyArray.length];
Further simplified can this calculation then lead to just add a positive number of
delta = keyArray.length - 5; // can be constant, it is always positive
keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];
and make the modulo out of it.
I have a set containing a circle,rectangle and a text
I can move it to specific location (50 points to the right) like this:
object.entireSet.transform("T50,0");
And it works just OK
Now I want to move it again (50 points to the right again)
object.entireSet.transform("T50,0");
BUT the object stays on the same place. If I want to move it like I want, I have to rewrite the command like this
object.entireSet.transform("T100,0");
So my thought here is, that the raphael somehow remember the original point (0,0) of transformation and therefore (T50,0) will always move to the same point.
Do you know how to reset the transformation, so following code
object.entireSet.transform("T50,0"); //first move
object.entireSet.transform("T50,0"); //second move
will result in an object moved from original point (x,y) to point (x+50,y) and then to (x+100,y)?
You can find the solution in the documentation :
http://raphaeljs.com/reference.html#Element.transform
set.transform("T50,0");
set.transform("...t50,0"); // This appends the transformation to the first one
jsFiddle here : http://jsfiddle.net/vyFC6/1
EDIT : I realised you may need a bit more explainations to understand why your code isn't working.
It has to do with the SVG nature of Raphael. You might want to quickly learn the basics of SVG to understand better some of Raphael's functionnalities.
All the transform calls you do on a same element actually update the value of a string, that's used to... well transform it.
When you do this :
set.transform("T50,0");
set.transform("T50,0");
The value of the string is "T50,0" after the first call. You just rewrite it with the second call ==> its value is still "T50,0" in the end. This is why it doesn't change.
When you do this :
set.transform("T50,0");
set.transform("...t50,0");
The value of the string becomes more or less this : "T50,0t50,0" which means in Raphael : translate 50 on x and 0 on y, THEN 50 on x and 0 on y.
To make it clear i updated my fiddle. You can find in it different transform calls that i hope will help you understand how it works.
I have unobfuscated and simplified this animation into a jsfiddle available here. Nevertheless, I still don't quite understand the math behind it.
Does someone have any insight explaining the animation?
Your fiddle link wasn't working for me due to a missing interval speed, should be using getElementById too (just because it works in Internet Explorer doesn't make it cross-browser).
Here, I forked it, use this one instead:
http://jsfiddle.net/spechackers/hJhCz/
I have also cleaned up the code in your first link:
<pre id="p">
<script type="text/javascript">
var charMap=['p','.'];
var n=0;
function myInterval()
{
n+=7;//this is the amount of screen to "scroll" per interval
var outString="";
//this loop will execute exactly 4096 times. Once for each character we will be working with.
//Our display screen will consist of 32 lines or rows and 128 characters on each line
for(var i=64; i>0; i-=1/64)
{
//Note mod operations can result in numbers like 1.984375 if working with non-integer numbers like we currently are
var mod2=i%2;
if(mod2==0)
{
outString+="\n";
}else{
var tmp=(mod2*(64/i))-(64/i);//a number between 0.9846153846153847 and -4032
tmp=tmp+(n/64);//still working with floating points.
tmp=tmp^(64/i);//this is a bitwise XOR operation. The result will always be an integer
tmp=tmp&1;//this is a bitwise AND operation. Basically we just want to know if the first bit is a 1 or 0.
outString+=charMap[tmp];
}
}//for
document.getElementById("p").innerHTML=outString;
}
myInterval();
setInterval(myInterval,64);
</script>
</pre>
The result of the code in the two links you provided are very different from one another.
However the logic in the code is quite similar. Both use a for-loop to loop through all the characters, a mod operation on a non-integer number, and a bitwise xor operation.
How does it all work, well basically all I can tell you is to pay attention to the variables changing as the input and output change.
All the logic appears to be some sort of bitwise cryptic way to decide which of 2 characters or a line break to add to the page.
I don't quite follow it myself from a calculus or trigonometry sort of perspective.
Consider that each line, as it sweeps across the rectangular area, is actually a rotation of (4?) lines about a fixed origin.
The background appears to "move" according to optical illusion. What actually happens is that the area in between the sweep lines is toggling between two char's as the lines rotate through them.
Here is the rotation eq in 2 dimensions:
first, visualize an (x,y) coordinate pair in one of the lines, before and after rotation (motion):
So, you could make a collection of points for each line and rotate them through arbitrarily sized angles, depending upon how "smooth" you want the animation.
The answer above me looks at the whole plane being transformed with the given formulae.
I tried to simplify it here -
The formula above is a trigonometric equation for rotation it is more simply solved
with a matrix.
x1 is the x coordinate before the the rotation transformation (or operator) acts.
same for y1. say the x1 = 0 and y1 = 1. these are the x,y coordinates of of the end of the
vector in the xy plane - currently your screen. if you plug any angle you will get new
coordinates with the 'tail' of the vector fixes in the same position.
If you do it many times (number of times depends on the angle you choose) you will come back to 0 x = 0 and y =1.
as for the bitwise operation - I don't have any insight as for why exactly this was used.
each iteration there the bitwise operation acts to decide if the point the plane will be drawn or not. note k how the power of k changes the result.
Further reading -
http://en.wikipedia.org/wiki/Linear_algebra#Linear_transformations
http://www.youtube.com/user/khanacademy/videos?query=linear+algebra