I want to create an abstract curved lines background for website which is reactive on scroll and moving lines.
same design like in this video but reactive on scroll.
can anyone help with the resources, coz i don’t even know how to code 
To get you started, you can:
- create a wavy plane with simplex noise
- add altitude texture and shift it vertically
When I try this, I get a similar result:
However, if you cannot program this yourself, and you want someone to do it for you, it might be better to place this request in the jobs category.
2 Likes
Noise is the key, yes Sci-fi Scene that I made - #7 by prisoner849
2 Likes
Thankyou Pavel, Can you atleast drop me steps so that i can try it on my own.
I like the result with VoroNoise
2 Likes
There are several ways to do this effect. The one that I tried uses the following steps:
1. Start with a plane:
2. Uses some noise function to curve the plane
I used SimplexNoise from Three.js addons. This step requires to change the vertex positions in the BufferAttribute of the geometry.
3. Apply a texture that is just a line
For example, it could be a black square with a white horizontal line. Such a texture could be loaded from a file, or drawn in a canvas. I used canvas texture:
4. Remap the UV coordinates
By default UV coordinates of a plane are mapped to XY coordinates of vertices. For an altitude mapping I set U=0 and V=Z. This will create something called “isolines” – lines that mark the same altitude across the whole ‘terrain’. Practically, this can be done together with shaping the curves of the plane.
5. Flatten the plane
But do not recalculate texture coordinates
6. Look at the plane from above
7. Adjust the density of lines
This requires finding suitable values for texture’s repeat property that makes your aesthetically happy
8. Shift the texture in animation loop
This will continuously move the lines “up” or “down” in altitude. As a code, this is just changing the texture’s offset property.
7 Likes
Thanks Buddy for this help