Is there an easy way of rendering LaTeX equations in p5.js?
I naively tried to use KaTeX by including their auto-render starting template in the index.html of a p5.js editor template and then writing an "equation" like
text("$$\\epsilon = 0.4$$", 30, 30);
in the draw() function. This failed, see here.
Related
I'm working on an application in which Users can draw lines (with or without arrowheads). Similar to PowerPoint or SnagIt, but on a 3D plane."
Basically I would like to be able to create some line types like in the attached draft:
I've seen the fat lines demo (https://threejs.org/examples/#webgl_lines_fat). But lines don't seem to change width when zooming, and they don't have perspective.
There is also this 3rd party library THREE.MeshLine (https://github.com/spite/THREE.MeshLine) which has some nice features, even dashed lines animation, but before experimenting with it I would like to see what ThreeJS can do by itself.
1) Using ThreeJS Line is there a way to get:
Size and perspective change depending on camera distance/zoom or angle.
Dotted lines (Maybe extending DashedLineMaterial?).
2) Maybe there is a library other than THREE.MeshLine that does what I need?
MeshLine is definitely what you want. Three.js's line implementations are all pixel based and don't really fit your needs. MeshLine is well written and performant, I use it myself for a similar purpose - it'll serve you well.
I am trying to download the Feynman lectures using wkhtmltopdf. This is the command line that I use:
wkhtmltopdf.exe http://www.feynmanlectures.caltech.edu/I_44.html --javascript-delay 20000 --no-stop-slow-scripts ./out/I_44.pdf
However the MathJAX formula are rendered too small. Here is a picture:
How I can enlarge the rendered equations?
In this topic the suggested solution (as I understand it) would be to add
MathJax.Hub.Config({
CommonHTML: {
minScaleAdjust: 100,
}
});
to the HTML.
But of course downloading the HTML file and modify it before passing it to wkhtmltopdf would be too cumbersome. I would prefer an easier solution if possible.
Try using
wkhtmltopdf.exe http://www.feynmanlectures.caltech.edu/I_44.html --run-script 'MathJax.Hub.Config({"HTML-CSS": {scale: 200}}); MathJax.Hub.Queue(["Rerender", MathJax.Hub], function () {window.status="finished"})' --window-status finished --no-stop-slow-scripts ./out/I_44.pdf
This will set the scaling factor for the math and re-render it at that size. It also uses the window.status variable to synchronize the page capture with MathJax so that the capture occurs immediately after MathJax finishes (rather than waiting for an arbitrary delay).
Vanilla Processing has shapeMode() for modifying "the location from which shapes draw." How, if possible, can one get the same functionality drawing UI "controllers" with ControlP5?
Concretely, I have tried the following code:
shapeMode(CENTER);
cp5.addButton("On/Off")
.setPosition(width/2, height/2)
.setSize(300, 300)
.setColorBackground(color(0, 113, 0));
And got this result:
But what I would like to see is this:
Obviously something like .setPosition(width/2 - buttonWidth/2, height/2 - buttonWidth/2) would work, but I would like to keep the code minimal.
Calling the shapeMode() function only changes the mode of shapes drawn with the shape() function.
ControlP5 doesn't use the shape() function to draw buttons. It uses the rect() function.
You can use the rectMode() function to change how rectangles are drawn. More info can be found in the reference.
But I doubt you'll be pleased with the results. That will move the rectangle of the button, but it won't move the text of the buttons, so all of your text will be off-center. That's just one issue, I'm sure there will be plenty of others.
If I were you I would just do the calculations myself. If you're really worried about keeping your code minimal, then you could create your own wrapper classes or utility functions that encapsulate the "logic" required to do the offsetting. But imho you should be more worried about keeping your code readable and maintainable.
I want to put/wrap images to 3D objects. To keep things simple and fast, instead of using(and learning) a 3D library I want to use mapping images. Mapping images are used in such a way:
So you generate the mapping images once for each object and use the same mapping for all images you want to wrap.
My question is how can I generate such mapping images (given the 3D model)? Since I don't know about the terminology my searches failed me. Sorry if I am using the wrong jargon.
Below you can see a description of the workflow.
I have the 3D model of the object and the input image, i want to generate mapping images that I can use to generate the textured image.
I don't even know where to start, any pointers are appreciated.
More info
My initial idea was to somehow wrap a identity mappings (see below) using an external program. I have generated horizontal and vertical gradient images in Photoshop just to see if mapping works using photoshop generated images. The result doesn't look good. I wasn't hopeful but it was worth a shot.
input
mappings (x and y), they just resize the image, they don't do anything fancy.
result
as you can see there are lots of artifacts. Custom mapping images I have generated by warping the gradients even looks worse.
Here is some more information on mappings: http://www.imagemagick.org/Usage/mapping/#distortion_maps
I am using OpenCV remap() function for mapping.
if i understand you right here, you want to do all of it in 2D ?
calling warpPerspective() for each of your cube surfaces will be much more successful, than using remap()
pseudocode outline:
// for each surface:
// get the desired src and dst polygon
// the src one is your texture-image, so that's:
vector<Point> p_src(4), p_dst(4);
p_src[0] = Point(0,0);
p_src[1] = Point(0,src.rows-1);
p_src[2] = Point(src.cols-1,0);
p_src[3] = Point(src.cols-1,src.rows-1);
// the dst poly is the one you want textured, a 3d->2d projection of the cube surface.
// sorry, you've got to do that on your own ;(
// let's say, you've come up with this for the cube - top:
p_dst[0] = Point(15,15);
p_dst[1] = Point(44,19);
p_dst[2] = Point(56,30);
p_dst[3] = Point(33,44);
// now you need the projection matrix to transform from one to another:
Mat proj = getPerspectiveTransform( p_src, p_dst );
// finally, you can warp your texture to the dst-polygon:
warpPerspective(src, dst, proj, dst.size());
if you can get hold of the 'Learning Opencv' book, it's described around p 170.
final word of warning, since youre complaining about artefacts, - yes, it'll all look pretty cheesy, 'real' 3d engines do a lot of work here, subpixel-uv mapping, filtering,
mipmapping, etc. if you want it to look nice, consider using the 'real' thing.
btw, there's nice opengl support built into opencv
To achieve what you are trying to do, you need to render the 3D-models UV to a texture. It will be easier to learn to render 3D than to do things this way. Especially since there are a lot of weaknesses in your aproach. difficult to to lighting and problems til the depth-buffer will be abundant.
Assuming all your objects shul ever only be viewed from one angle, you need to render each of them to 3 textures:
UV-map
Normal-map
Depth-map (to correct the depth-buffer)
You will still have to do shading in order to draw these to look like your object, and I don't even know how to do the depth-buffer-thing, I just know it can be done.
So in order to avoid learning 3D, your will have to learn all the difficult parts of 3D-rendering. Does not seem the easier route...
Referring to the kind of look of the images seen on this site - http://sl.dream-theme.com/html/albums-light.html (I'm in no way involved with this WP theme, just providing an example). The author is using jRaphael to create "path cuts" which is a nice and browser-safe approach, but I'd like to avoid including an additional library solely for that purpose.
very basic:
http://dabblet.com/gist/2874826
uses css pseudo elements to mask the image (pretty descent browser support -- will render as a square image in legacy browsers, probably nbd?)
If shadows / borders / things are needed you could add and additional wrapper to fake the slanted borders using more pseudo elements or a manipulated (transformed) box, or something.