Develop Reference

Adding Post-Processing to Canvas

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

Pan and zoom on an "infinite" graph paper background in js

For a project I'm working on I would like to have a background that I can pan around indefinitely, zoom in and out of and position and move around elements on that background.
The closest example I can think of is this: https://www.desmos.com/calculator. Additionally I will position different elements on top of that grid and move them around. For that I plan to use React and that isn't going to be much of a problem. The main issue I have is how to build the said background so that it can check all my requirements. I'm able to draw a grid but for moving around and zooming in and out (such that all the elements "on top" of the grid also scale up and down) is proving challenging for me. I would also like it if it can be done without the use of any specific drawing libraries and just pure JS but i'm open to suggestions. Any help will be appreciated.
P.S. I'm looking for general guidelines to how I can achieve my goal. For example different technologies or methods and not concrete solutions. I apologise if the question is too vague or badly formatted as it's the first time I'm asking here.

Desmos uses canvas to draw the "infinite" grid. You can achieve this using something like three.js or konva.js. One drawback of canvas is that you cannot place HTML elements on the grid.
Edit: Using three JS, you can use the gridHelper function and set the rotation about the x-axis by Pi. This should give you a "2d" grid. However, I found gsap and the Draggable plugin were better suited for this.
https://codepen.io/osiv/pen/gOwxmvO
This is definitely a work-in-progress, but it gives the idea of what I am working for. Zooming is basically preventing the default wheel behavior and changing the background image size:
handleWheelEvent(e) {
e.preventDefault();
let el = document.getElementById("grid-container");
let currengBackgroundSize = this.getPixelStringAsInteger(getComputedStyle(el).backgroundSize);
if(e.deltaY < 0) {
// decrease size
} else {
// increase size
}
}

jQuery circular animation based on right and left controls and friction

This is a rather biggish question that i am just hoping to find some direction with.. I dont expect anyone to do this entire thing... But to rather learn how to go about projects like this. Here we go:
I am trying to achieve an this animation:
Basically whats happening here is, I need to have a semi oval shape and a ball constrained to it and when you press the left and right arrows it needs to slowly to quickly move left to right and based on the speed of the button clicks it needs to either complete the ramp or stop and drop. Imagine a skateboard and a ramp.
I know the basics of jQuery but the circular animation and friction effect is where i get lost..
Any Help/Direction/Advice Greatly Appreciated. Thank you.

I'm trying an answer for the animation part:
If you are ok with HTML5 then for the animations there are two ways to go:
Either use HTML5 Canvas, which really works well for providing dynamic content. Its basically a canvas on which you can freely draw. It's pixel based and has a good performance and, if done right it does not decline very much when drawing many elements). You should also double-buffer it in order to avoid any flickering when drawing.
Or use HTML5 Inline Svg. It's vector based, so resolution-independent and has good support for animating svg elements. In contrast to HTML5 Canvas the elements of the svg are DOM-Nodes, so you see the graphic elements directly in your DOM-Tree.
In order to sum up the trade-offs:
HTML5 Canvas
-Pixel-based
-Good Performance
-Free drawing
HTML5 Inline Svg
-Vector-based
-Animations built-in
-Elements are DOM-Nodes
For much more information, see
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Javascript & Canvas: Endless random animation of slightly morphing circle?

I'm completely new to canvas and animating objects with it. I did a little bit of research (e.g. I found RaphaelJS) however I couldn't find any general answer or tutorial on how to create a "morphing" circle.
The image I posted here is what I would like to do:
I'd like to create one circle that is endlessly animated via a randomizer and is slightly morphing its contours.
I know this might be not a "real" question for this forum, however I just wonder if anyone could provide a few tipps or tricks on how to do something like that.
By "how to do something like that" I'm speaking actually about the technique on how to morph a circle. Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
I would really appreciate some starting help with this.
Thank you in advance.

A circle can be reasonably well approximated by 4 cubic curves (one for each quarter and the control points on the tangents - google for the correct length of the control segments or calculate them yourself - see here. You could then randomly animate the control points within a small radius to get a wobbling effect.

Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
Yes, you do, although it should not be necessary to create "dozens".
You may find the .bezierCurveTo() and .quadraticCurveTo() functions useful to provide smooth interpolated curves between control points.

When you can use a raster image then for every point you can displace it along the x-axis with a sin function. You can run the same function along the y-axis but instead to simply displace the pixel you can double it. This should give you a morphing circle but it also works with other shapes.

Freeform drawing over an image using <canvas> and javascript

I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.

You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.