I'm working on a canvas-based heatmap using a library called simpleheat (https://github.com/mourner/simpleheat). I've got the heatmap effect working, but does anyone here know how I'd be able to achieve a glow affect like the image below? I've tried implementing this effect with Pixi filters, but haven't had any luck so far.
If you do this manually, or point by point based on xy coordinates for a map that you might have, you could just make a canvas overlay for the map and then draw points on the canvas as overlays. I think you can also set the canvas colors as rgba to make them slightly transparent.
(srry i was gonna make this a comment but i dont have enough reputation for that lol)
hope this helps
Related
I am keen to try and recreate something on my website with effects similar to what can be seen here?
http://www.williamhoza.com/text/?t=Hello
I have searched the web for canvas pixel manipulation along with other searches and cannot see anything that could help with this.
It would be great if someone has any knowledge of how this effect is achieved or even has information as to where I should be looking for help
also, would it be possible to achieve effect with an image?
Split the text into particles. Each particle should have a vector pointing to it's start position. If you move you mouse close, you should add a new vector to the particles around the mouse. This way you particles will move, but return to the original position.
When I create a point using Three.js it looks like a square. How can I make it look round? I saw in the documentation some blending factors but I did not quite understand how to use them on my points and I don't even know whether it is the right way to do it.
One trick I used is to create an SVG circle element, render it to a canvas with canvg, and render that canvas to a texture to use in a point cloud.
By applying gradients on the circle, I can give the illusion of shininess on a 3D sphere with a 2D circle.
There's too much code to post into an answer but I have a project over at Github you can look at, if interested, which demonstrates the idea. See: https://github.com/alexpreynolds/cubemaker and the associated demo at: http://alexpreynolds.github.io/cubemaker/
If you just want circles and no "shiny" effect, you could remove the gradients. Or draw a circle directly to a canvas element and skip SVG altogether.
Alex Reynolds' answer is correct. I add this one to give more details : as far as I know there are two ways to customize your points' look.
As the docs suggets, using textures (THREE.PointsMaterial({map:texture})):
The most intuitive is to use an image of yours :
var texture=THREE.ImageUtils.loadTexture('url-to-my-image');
You can also draw something in a canvas and use it as a texture. This includes raw drawing in the canvas, SVG importing as Alex Reynolds suggests, or any other technique. You can check his link and look for threejs examples. This is particularly used to render 2D text on sprites, you will find more examples with that.
var texture=THREE.Texture(canvas);
Check three.js examples for more details on using textures on Points
Using shaders :
If you know about shaders, you can write a small fragment shader that will result in the lightest and most precise of those solutions.
I am working with Cesium and I am using the Cesium.WallGeometry and I would like to thicken my walls to make them more visible when viewed from a distance because at certain angles the wall disappears. The only thing I can seem to do is change the maximum and minimum heights to lengthen the wall but no way to widen it. Anyone know either an attribute function that I missed or a way to modify the cesium source to change this? I am working with the full b-29 version of Cesium right now.
Walls in Cesium have no thickness; if you would like to draw a thick wall you should be using either Corridor or Polygon geometry. There are several other types of geometry that may provide what you are looking for as well; those links have more.
I'm looking to make a responsive donought chart with CanvasJS but my client wants a "broken" donought. Like with a piece missing.
Can it be done? If so, how?
Or else, if it cannot be done, could another responsive graph library be recommended that can do this?
Thanks
EDIT:
I managed to "fake" a gap in it my setting one datapoint to transparent. However, it's not "real" as the transparent part is still a part.
See my pen
http://codepen.io/SubZane/pen/sHpey
I don't know about canvasJS, but you can draw a polygon with inner rings in canvas, see the answer here: Polygon with a hole in the middle with HTML5's canvas
You can also do it with SVG which some web mapping libs used for this purpose before the advent of the canvas element.
I'm new to leaflet, looking for some advice.
I'd like to create an animation of a marker of some sort (for example, an html5 filled arc or shape) to replay GPS tracks on a map. I may want several animated markers and I want to stay flexible with the behavior and performance. Can anyone recommend a good way to go about creating this type of animation?
It looks like I could create a canvas layer (L.TileLayer.Canvas) and draw on it using a technique for linear animation (e.g. http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/), but I'm not yet sure if this works, or if I need to call redraw() and how the performance would be. Or I could try and make customer markers and move them by setting the lat/lon on them at some interval.
Has anyone come across this and can recommend a solution (above ideas or other)? Ideally as I change zoom levels, the animation will "scale" and have good performance. Thanks!
The RaphaelLayer plugin lets you create some pretty fancy animations:
http://dynmeth.github.com/RaphaelLayer/
yes there are a couple of ways to approach the problem...
drawing onto an interactive map is challenging because you need to recalculate your position on pan and zoom events; in addition to managing your actual animation.
This is an excellent example using the D3 library to manage the animation in a continuous loop, you may be a able to modify the code for multiple animations.
http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/
If you want a little more of the knuts and bolts of how the drawing process works then this project might be a better starting point
http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js
This grabs the overlay pane (a leaflet canvas which you can draw on) and... draws on it...
and you will absolutely want to check out this link which describes the drawing process for an interactive map