Forum Discussion
How These Were Made
Its a WebObject with Canvas on it. If you check it in the console you end up here...
https://www.amnvohra.com/projects/fish/story_content/WebObjects/5te71AC6ooa/index.html
The size he uses is 1160x576..
The Canvas is called "jsi-ripple-container", so probably somewhere a Javascript ripple library called something like that that handles all.
And a bit of search... here it is... the original...
https://codepen.io/K-T/pen/Ldgdab
jQuery in fact is the only library used in this.
Every fish in fact is a geometrical calculation and draws on Canvas using this kind of code.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
A function createGoldfishes( ) creates them and each instance has specific settings in code.
GOLDFISH.prototype = {
OFFSET : 30,
RIPPLE_INTERVAL : 20,
VELOCITY_LIMIT : 0.3,
In the second slide it just another SlideLayer on top of the previous one.
Kind regards,
Math
Thanks for the detailed explanation, Math! This looks amazing: https://codepen.io/K-T/pen/Ldgdab
Where do you find stuff like this👆 I'm still a beginner with Javascript, HTML & CSS, but would love to explore more. BTW, is it possible to find details like the Canvas width, font name, font size etc... from the "Source" section in Chrome's Developer tools. Can you share any tutorial which wil help me learn all these basics?