# Helix likes animation

Hi, im new to threejs and i want to do this thing and animate it. Problem Is i dont even know where to start.  Hi!
Don’t hesitate to use forum’s search https://discourse.threejs.org/search?q=helix

1 Like

Yes but nothing helped as much as it would need

Where did you get those reference pics from?

From this website i want to animate that

I would start with distortion of a plane, applying noise.

Okay, thank you i will come for help with code

1 Like

Displacing vertices by sin: three.js webgl - geometry - dynamic

It is far away from the goal but it is something
codepen

Something about vertices and noise: Perlin Particles - #4 by prisoner849

I looked through the code on perlin but i have just plane with perlin

Try to put points in helix formation.
`.setFromCylindricalCoords` will help: three.js docs

So here i should do the function : .setFromCylindricalCoords?

``````const vertices = geometry.attributes.position.array;

for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
vertices[ j + 1 ] = data[ i ] * 10;
}
``````

As you want points in formation of helix, so use

``````let g = new THREE.BufferGeometry().setFromPoints( _your_points_ );
let m = new THREE.PointsMaterial({size: 0.05, color: "aqua"});
let p = new THREE.Points(g, m);
``````

`_your_points_` is an array of `THREE.Vector3()`, where vertices are in helix formation.

1 Like

But where i get the _your_points array from

``````var points=[];
var stepXZ=0.2;
var stepY=0.01;

for(var n=0;n<610;n++){
points.push(Math.sin(n*stepXZ)*r2);
points.push(n*stepY);
points.push(Math.cos(n*stepXZ)*r2);
}

var geometry=new THREE.BufferGeometry();
geometry.setAttribute("position",new THREE.BufferAttribute(new Float32Array(points),3));
var material=new THREE.PointsMaterial({size:0.1,color:"aqua"});
var mesh=new THREE.Points(geometry,material);
`````` Animating in shaders, with noise, makes it more funny  2 Likes

Sometimes, trying to create something complex, forget how cool simple things can be.

A distorted helix of points: https://codepen.io/prisoner849/full/qBjBwPz

A distorted helix of trails (indexed + LineSegments): https://codepen.io/prisoner849/full/KKqwogK

The base of both examples is the same helix formation 4 Likes

Sounds like https://sphere.cz should hire you!

Thank you for your help really appreciate it.