We Keep Coding

responsive canvas javascript blobby not work

I would like to make a blobby like attached link effect in my web.
[link]https://codepen.io/JuanFuentes/pen/mNVaBX
but I find the blob is not responsive when I try to scale the webpage.
the blob still in the original position.
can any friend help me?

It's not enough to simply resize the canvas! You should reposition your ball's vertices as well according to the new canvas size / height.
Here is updated code: https://codepen.io/gbnikolov/pen/xxZBVMX?editors=0010
Pay attention to line 52:
this.resize = function (deltaX, deltaY) {
// deltaX and deltaY are the difference between old canvas width / height and new ones
for (let i = 0; i < this.vertex.length; i++) {
const vertex = this.vertex[i]
vertex.x += deltaX
vertex.y += deltaY
}
}
EDIT: as you see, the blob takes some time to animate its vertices to the new position on resize. I am not sure wether this is good or bad for your purposes. A more advanced solution would be to stop the requestAnimationFrame() update loop, update the vertices to their new positions and only then start your loop again (so the blob "snaps" to its right position immediately).
EDIT 2: You don't need to return this from constructor functions when calling them with the new keyword, JS does this for you automatically:
var Blob = function(args) {
// ...
return this // <- thats not needed!
}
Read more about the this property and it's relationship to classes in JS here

sprite fall from top of screen with gravity acceleration in plain js

Hi i am trying to move a spite from the top of the screen to the bottom. I want to achieve a gravity like effect. To pre-empt people suggesting using a game engine, A: this js is running on a node.js server and not a client (you may suggest a game engine for node) and B: this is the only place i need to use a gravity effect so i feel that surely it is simpler just to make a loop with some kind of acceleration calculations inside?
In this example i don't need to do anything except the calculations.
var theMeteor = {
"x":500, //the start x position
"y":1000, //the start y position
"v":1 // the velocity
};
function MeteorFall(dt){
theMeteor.y += (theMeteor.v * dt) * -1; // move the meteor down
theMeteor.v++;// increase the velocity
// keep looping until its at the bottom
if(theMeteor.y <= 0){
// its at the bottom so clear the loop
clearInterval(theDeamon);
}
}
var dt = 0.025; //set this to whatever the loop refreshes at (0.025 = 25)
var theDeamon = setInterval(MeteorFall, 25, dt);
This works but it's not very good at all, is there any one who can show me how to do this correctly please?

How to run a KineticJS animation once every second and apply easing to it?

I am creating a chronometer for which I already have all the code working. Now I'm trying to tie the rotation of a 'notch' to the passage of seconds. I have the following code-block:
var minutesNotchAnimation = new Kinetic.Animation(function(frame) {
var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];
notch.rotate(rotationAngle);
}, this.minutesNotchLayer);
minutesNotchAnimation.start();
How can I execute the animation once every second? Also how can I apply custom easing to it? And lastly... how do I control the length of the animation? I find the KineticJS documentation to be really lacking in places, also there are not a lot of comprehensive resources out there that explain the Animation class in depth.
Thanks in advance!
P.S. Here's a fiddle of the complete code in case anyone needs to check it out --> http://jsfiddle.net/k4xA8/

You can't set the animation interval because this object is not doing for that. If you want to make something more accurate (and use easing), it's a lot easier to employ a Tween instead.
By the way, you can use the frame.timeDiff property, or the frame.time in order to control the animation...
var minutesNotchCount = 0;
var minutesNotchAnimation = new Kinetic.Animation(function(frame) {
minutesNotchCount += frame.timeDiff;
var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];
if (minutesNotchCount >= 40) {
notch.rotate(0.25);
minutesNotchCount = 0;
}
}, this.minutesNotchLayer);
minutesNotchAnimation.start();

Update an object with the scroll value as the page scrolls?

So I thought this would be easy but thinking about it, I can't figure out a way to pass the changing scroll value into an object?
Here is an example of what I am trying to achieve https://www.fbf8.com/ notice when you scroll the polygonal objects are manipulated based on the scroll value. Yes I am assuming they are using three.js or maybe the plugin I am using FSS.js (might be custom) I'll inspect the source later but thats unrelated it's just an example.
Like I said I am using FSS.js and here is an instance of the FSS.plane
var geometry = new FSS.Plane(1600, 835, 6, 15);
I am trying to figure a way to pass into the constructor a changing value (scrollPos).
So I hope I am making sense now, here is a useless example but should provoke what my angle is.
var pos = 0;
$(document).scroll(function() {
pos = $(document).scrollTop();
});
var geometry = new FSS.Plane(1600, 835, pos, 15);

Try putting the initiation function in your on scroll function
$(document).scroll(function() {
var pos = $(document).scrollTop();
var geometry = new FSS.Plane(1600, 835, pos, 15);
});

I think the code produced by Michael is right. The only thing that need to be done is updating the geometry when you scroll (instead of recreating the object like Ronnel said).
Look into your FSS.Plane object and search for an updatePosition method and call it after pos = $(document).scrollTop();
If this doesn't work, then maybe the scrollTop method always return the same thing. Depends on what you point with document

How can I make Raphael.js elements "wiggle" on the canvas?

I'm working on a project that uses SVG with Raphael.js. One component is a group of circles, each of which "wiggles" around randomly - that is, slowly moves along the x and y axes a small amount, and in random directions. Think of it like putting a marble on your palm and shaking your palm around slowly.
Is anyone aware of a Raphael.js plugin or code example that already accomplishes something like this? I'm not terribly particular about the effect - it just needs to be subtle/smooth and continuous.
If I need to create something on my own, do you have any suggestions for how I might go about it? My initial idea is along these lines:
Draw a circle on the canvas.
Start a loop that:
Randomly finds x and y coordinates within some circular boundary anchored on the circle's center point.
Animates the circle from its current location to those coordinates over a random time interval, using in/out easing to smooth the effect.
My concern is that this might look too mechanical - i.e., I assume it will look more like the circle is tracing a star pattern, or having a a seizure, or something like that. Ideally it would curve smoothly through the random points that it generates, but that seems far more complex.
If you can recommend any other code (preferably JavaScript) that I could adapt, that would be great too - e.g., a jQuery plugin or the like. I found one named jquery-wiggle, but that seems to only work along one axis.
Thanks in advance for any advice!

Something like the following could do it:
var paper = Raphael('canvas', 300, 300);
var circle_count = 40;
var wbound = 10; // how far an element can wiggle.
var circleholder = paper.set();
function rdm(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
// add a wiggle method to elements
Raphael.el.wiggle = function() {
var newcx = this.attrs.origCx + rdm(-wbound, wbound);
var newcy = this.attrs.origCy + rdm(-wbound, wbound);
this.animate({cx: newcx, cy: newcy}, 500, '<');
}
// draw our circles
// hackish: setting circle.attrs.origCx
for (var i=0;i<circle_count;i++) {
var cx = rdm(0, 280);
var cy = rdm(0, 280);
var rad = rdm(0, 15);
var circle = paper.circle(cx, cy, rad);
circle.attrs.origCx = cx;
circle.attrs.origCy = cy;
circleholder.push(circle);
}
// loop over all circles and wiggle
function wiggleall() {
for (var i=0;i<circleholder.length;i++) {
circleholder[i].wiggle();
}
}
// call wiggleAll every second
setInterval(function() {wiggleall()}, 1000);
http://jsfiddle.net/UDWW6/1/
Changing the easing, and delays between certain things happening should at least help in making things look a little more natural. Hope that helps.

You can accomplish a similar effect by extending Raphael's default easing formulas:
Raphael.easing_formulas["wiggle"] = function(n) { return Math.random() * 5 };
[shape].animate({transform:"T1,1"}, 500, "wiggle", function(e) {
this.transform("T0,0");
});
Easing functions take a ratio of time elapsed to total time and manipulate it. The returned value is applied to the properties being animated.
This easing function ignores n and returns a random value. You can create any wiggle you like by playing with the return formula.
A callback function is necessary if you want the shape to end up back where it began, since applying a transformation that does not move the shape does not produce an animation. You'll probably have to alter the transformation values.
Hope this is useful!

There is a very good set of easing effects available in Raphael.
Here's a random set of circles that are "given" bounce easing.
Dynamically add animation to objects
The full range of easing effects can be found here. You can play around with them and reference the latest documentation at the same time.
Putting calls in a loop is not the thing to do, though. Use callbacks, which are readily available.