# Need Help Animating This Drawing

**URL:** <https://discourse.processing.org/t/need-help-animating-this-drawing/9446>\
**Category:** Coding Questions\
**Created:** [March 19, 2019, 4:07pm UTC](https://discourse.processing.org/t/need-help-animating-this-drawing/9446 "2019-03-19T16:07:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mahubis](https://avatars.discourse-cdn.com/v4/letter/m/7ea924/32.png) [@Mahubis](https://discourse.processing.org/u/Mahubis)\
**Post date:** [March 19, 2019, 4:07pm UTC](https://discourse.processing.org/t/need-help-animating-this-drawing/9446/1 "2019-03-19T16:07:24Z")

</div>

```auto
float x;
float theta =0;

void setup() {
  size(600, 600);
}

  void draw() {
  background(255);

  fill(0);
  strokeWeight(2);
  rect(30, 200, 100, 100);
  line(30, 200, 400, 200);
  line(50, 300, 400, 300);
  line(30, 300, 30, 450);
  line(30, 450, 400, 450);
  line(400, 200, 400,550);
  line(380,550,420,550);
  line(390,560,410,560);
  line(395,570,405,570);

  fill(255);
  stroke(0);

  strokeWeight(5);

  beginShape(TRIANGLES);
vertex(400,300);
vertex(400,200);
vertex(550, 250);
endShape();

  line(381,551,421,551);
  line(391,561,411,561);
  line(396,571,406,571);

  fill(127);
  rect(260, 170, 150, 60);
  rect(260, 270, 150, 60);

  float lX=0;
  float lY2=0;
  float lY=0;
  float lY3=0;

  println(x);
  theta=theta +0.05;
  float y = theta;
  for (int i = 0; i<=15; i++) {
    x = sin(y);
    line((i*10)+130, 200+(50*x), lX, lY);
    line((i*10)+130, 300+(50*x), lX, lY2);
    line((i*10)+130, 300+(50*x), lX, lY3);
    // ellipse(i*10, 100+(100*x), 10, 10);
    lX = (i*10)+130;
    lY2 = 300+(50*x);
    lY = 200+(50*x);
    lY3 = 300+(50*x);
    y+=0.9;
  }

}

```

Here is the code for what I have got so far. I’m having trouble with the sine waves. I cant seem to add two more and move them into the box like they are in the picture. Mine are also slightly too big and there are straight lines coming out of the back of them. Also I’m trying to make the bottom one of the first two waves out of phase. I’d appreciate any help guys thanks!

 ![balanced_cable_explained](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/520399837f0fdca396fe2f72e03e7ee09779e50e.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 19, 2019, 4:51pm UTC](https://discourse.processing.org/t/need-help-animating-this-drawing/9446/2 "2019-03-19T16:51:04Z")

</div>

you can use a little block/function just for the sinus with noise…

```auto
void setup() {
  size( 500, 500 );
//}

//void draw () {
  background(200, 200, 0);
  draw_sin(20, 40, 100, 50, 1, 0); // posx, posy, width, height, invert_mul, noise_pct
  draw_sin(20, 140, 100, 50, -1, 20);
}

void draw_sin(float x, float y, float w, float h, float mul, float nois) {
  push();
  translate(x, y);
  fill(255);
  noStroke(); 
  //stroke(0);
  rect(0, 0, w, h);
  translate(0, h/2);
  float fine =20;
  float dphi = 3*TWO_PI/(w*fine);
  float phi = 0;
  float amp = h/2.0;
  stroke(0);
  for ( float i =0; i <=w*fine; i++) {
    phi += dphi;
    float sy = mul*amp*sin(phi)*-1.0;
    if (nois > 0 ) {
      strokeWeight(0.1);
      for ( float k = -h/2; k < h/2; k++ ) if ( random(100) < nois ) point(i/fine, k);
    }
    strokeWeight(1);
    point(i/fine, sy);
  }
  pop();
}

```

 ![SNAG-0016](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cadedeb1de75131406e56cf6f1fca4a4b36c00a8.jpeg)