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.
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 trying to translate an iteration over two arrays into one that's 4 times the size of the combined arrays, to make an image,
example input => [[1][0]]
expected output=> [[255][255][255][255][0][0][0][255]]
the ((height*width+index)*4) (i have tried with and without the *4) is what I have understood to be the formula for translating that to the rgba of the ImageData().data;
I'm writing only the latest row, will slice/join/slice the ImageData.data so that I only write one line per draw.
the expected visual
is a visualization of a 2-d cellular automata rule, drawn 1 line at a time.
the actual:
weird circuit bend-y, pulsating patterns.
draw(){
if(this.height<this.lineNum){ //lineNum is the current y draw line
this.image.data = this.image.data.slice(this.width*4).join(this.image.data.slice(0,this.width*4)); //cut the begining, put it at the end, then write over it so it moves
}
this.nodes.forEach((node,x)=>{
const state = node.lastState();
const index = (((Math.min(this.lineNum,this.height))*x + (node.index))*4);
this.image.data[index+0]=state?255:0;
this.image.data[index+1]=state?255:0;
this.image.data[index+2]=state?255:0;
this.image.data[index+3]=255;
})
this.ctx.putImageData(this.image ,0,0);
}
here's the full code, but I am sure that I have this formula wrong somehow.
the snippet above is from line 61's draw function.
https://codepen.io/altruios/pen/QWEoYXz?editors=1010
Edit
const index = (((Math.min(node.state.length-1,this.height))*this.width + (node.index))*4);
produces something more 'stable' but still incorrect.
so I think that formula may be correct, and there is some state update logic not happening correctly.
the strange behavior is fixed. as it turns out, it was partially this error that was fixed in the edit, but in addition, there was mutation happening to the array as it was being calculated, thus - the fix was to make sure to always process the state always on the exact index, instead of just the last index.
I'm working on a modification to vis.js's Graph3d to do a filled line graph, like this:
The hard part - unsurprisingly - is working out the rendering order for the polygons. I think I can do this by checking whether a ray from the viewer to a given line B crosses line A:
In this example, since line A is "in the way" of line B, we should draw line A first. I'll use a snippet of code from How do you detect where two line segments intersect? to check whether the lines cross.
However, I haven't figured how to find the position of the user's view. I kind of assumed this would be the camera object, so wrote a little bit of debug code to draw the camera on the graph:
var camera = this._convert3Dto2D(this.camera.getCameraLocation());
ctx.strokeStyle = Math.random()>0.5 ? 'ff0000' : '00ff00';
ctx.beginPath();
ctx.moveTo(camera.x, camera.y);
ctx.lineTo(camera.x, camera.y+5);
ctx.stroke();
In fact, the camera co-ordinates as measured by this are always at 0,0,0 on the graph (which would be the far top right on the above screengrab). What I need, I think, is effectively the bottom of the screen.
How can I find this? Or is there a better way to achieve what I'm trying to do?
I don't know if this is still an active issue, but FWIW, Graph3D has internal handling of the sort ordering.
All graph points are sorted with respect to the viewpoint, using a representative coordinate called point.bottom. The rendering is then done using this ordering, with the most distant elements drawn first. This works fine as long as none of the elements intersect; in that case, you can expect artefacts.
Basically, all you need to do, is define point.bottom per graph polygon, and Graph3D will then pick it up from there.
If you are still interested in working on this:
This happens in Graph3d.js, method Graph3d.prototype._calcTranslations(). For an example, have a look at how the Grid and Surface graph elements are initialized in Graph3d.prototype._getDataPoints(). The relevant code is:
obj = {};
obj.point = point3d;
obj.trans = undefined;
obj.screen = undefined;
obj.bottom = new Point3d(x, y, this.zRange.min);
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 am trying to get the raw pixel data from two "items" in paper.js. One is already a Raster object so that's not too bad. The problem is that I have another Group object containing a bunch of triangles and I want to capture the Raster data for that layer and then be able to compare it.
I have the following (highlighted lines) code:
https://gist.github.com/mtahmed/2b27c4c6aee42d3ac3fb#file-paper_update-js
It seems to always return 0 or some other odd unexpected number. Any hints/ideas?
Thanks! :)
It looks like you are always setting child_gene.visible = false, but never set it back to visible = true before you rasterize the layer in computeFitness(). I'm not sure that there's a need for juggling layers in each frame - it should work just as well without it.
Here's a simplified example that uses a square with a gradient as the target raster.