I'm wondering if there is a way to do 2 different fillStyle's in the same fillText on canvas.
Example: If I have a string var string = "text";.
How could i then write that string in different colors with fillText(string, X, Y).
Is this even possible?
You would need to split the string into its specific coloured parts, and render each part separately, though position them together to appear as if they were rendered using one fillText() call.
In order to properly position your multiple text rendering, you can use measureText() to assist you.
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 looking for the exact oposite of this tools : http://fooplot.com/#W3sidHlwZSI6MCwiZXEiOiJ4XjIiLCJjb2xvciI6IiMwMDAwMDAifSx7InR5cGUiOjEwMDB9XQ--
Here, we give a math function, it draw the function.
I need to draw some function and get the math function correspondent
EDIT : If it's impossible, may be can get a resembling function ?
If you can restrict yourself to some specific class of functions, e.g. polynomials of degree no more than 10, then you have a bunch of parameters and you can use some optimization to tune these parameters to best match your input.
But your question doesn't specify such a class of functions, and the general form is not solvable: anything that you draw that might be a function (i.e. has at most one y coordinate for each x coordinate) can be explained by very different (and often very complicated) functions, which behave completely different outside the area of your drawing.
By using the simple array app.selection[x], you can apply a transformation to any object in the selection, independently. But how do I apply a transformation to the entire selection together?
For example: inside InDesign, I can select two side-by-side objects and flip them horizontally, causing them to switch places and flip.
Inside a script, I can target each object in the selection, but they will not switch places; they will remain in the same place and flip.
for ( var x = 0; x < app.selection.length; x++ ){
app.selection[x].absoluteFlip = Flip.HORIZONTAL;
}
I could possibly group the selection, apply a transformation, then ungroup when finished, but this seems like unnecessary bulk that could slow down the code. I can easily do it manually inside InDesign, so it should follow that there's some way to access app.selection as a single object instead of an array. Does such an object exist?
Not really a solution, but it's worth noting that I don't think absoluteFlip is the action being performed, but a state indicating if the item has ben flipped. It's writable so you can set the state, but I think what's happening when using the menu to flip is flipItem: http://jongware.mit.edu/idcs6js/pc_PageItem.html#flipItem,
in which you can set "around" coordinates.
Now getting the origin of the selection box isn't straightforward for some reason (or maybe it is but I don't know how), but you can either use first object coordinates to set the origin so you can flip it around different coordinates depending on order of selection. Or you can sort the array to find left most coordinates (or whichever is needed), like this:
var selection_array = app.selection;
selection_array.sort(function(a, b){return a.visibleBounds[1]-b.visibleBounds[1]})
var flip_origin = [selection_array[0].visibleBounds[1],selection_array[0].visibleBounds[0]]
for(i=0;i<app.selection.length;i++){
app.selection[i].flipItem(Flip.HORIZONTAL, flip_origin);
}
Not sure it's easier or faster than grouping and ungrouping though.
Consider resize. It has a "individual/global" parameter :
void resize (in: varies, from: varies, by: ResizeMethods, values: Array of varies[, resizeIndividually: bool=true][, consideringRulerUnits: bool=false])
Resize the page item.
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 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.