# Help processing GIF

**URL:** <https://discourse.processing.org/t/help-processing-gif/40207>\
**Category:** Coding Questions\
**Created:** [December 19, 2022, 7:50am UTC](https://discourse.processing.org/t/help-processing-gif/40207 "2022-12-19T07:50:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![polllynarium](https://avatars.discourse-cdn.com/v4/letter/p/bbce88/32.png) [@polllynarium](https://discourse.processing.org/u/polllynarium)\
**Post date:** [December 19, 2022, 7:50am UTC](https://discourse.processing.org/t/help-processing-gif/40207/1 "2022-12-19T07:50:09Z")

</div>

Hi! It does not work to saddle the gif, the balls disappear because it is not necessary, and the radius does not decrease, I attach the code, please see what is wrong!  
 ![C10C2019-CA57-4E32-A6DF-24E78946A153](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/5/f54f3657a13c5f2c79d6ab1123027578ecae422d.gif)

}`Preformatted text`  
float angle;  
float w = 36;  
float ma;  
float maxD;  
float ang=0;  
float angV=0.1;  
void setup() {  
size(600, 600, P3D);  
frameRate(60);  
ellipseMode(CENTER);

ma = atan(1 / sqrt(4));  
maxD = dist(0, 0, width / 2, height / 2);  
}

void draw() {  
background(255);  
translate(width/2, height/2-150,+70);  
lights();

rotateX(-QUARTER\_PI-PI/2);  
// rotateY(ma);  
rotateY(0);  
for (int z = 0; z \< height; z += w) {  
for (int x = 0; x \< width; x += w) {  
pushMatrix();

```
  float d = dist(x, z, width / 2, height / 2);
  float offset = map(d, 5, maxD, -PI,PI);
  float a = angle + offset;
  float h = map(sin(a), -1, 1, 50, 150);
  translate(x - width / 2, h, z - height / 2);

  fill(0);
  // noStroke();
  sphere(10);
  popMatrix();
}
angle+=0.01;

```

}  
noStroke();  
fill(255);  
float r=map(sin(ang),-1,1,0,600);  
rotateX(-PI/4);  
ellipse(0,950,r_2,r_2);  
ang+=angV;  
angV+=0.00001;  
}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 19, 2022, 11:58am UTC](https://discourse.processing.org/t/help-processing-gif/40207/2 "2022-12-19T11:58:10Z")

</div>

Hi @polllynarium,

Welcome to the forum! 😉

Can you please format correctly your code by using the `</>` button:

[![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/4/34521338de6902479873291389bf53a11d12237d.gif) ](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/4/34521338de6902479873291389bf53a11d12237d.gif)

I also have an error at this line:

```auto
ellipse(0, 950, r2, r2);

```

(the variable `r2` is not defined)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 19, 2022, 5:56pm UTC](https://discourse.processing.org/t/help-processing-gif/40207/3 "2022-12-19T17:56:14Z")

</div>

this works.

maybe the ellipse at the end was covering the spheres?

also, it could be some kind of clipping on the camera

```auto

float angle;
float w = 36;
float ma;
float maxD;
float ang=0;
float angV=0.1;

void setup() {
  size(600, 600, P3D);
  //frameRate(60);
  //ellipseMode(CENTER);

  ma = atan(1 / sqrt(4));
  maxD = dist(0, 0, width / 2, height / 2);
}

void draw() {
  background(255);
  translate(width/2, height, -70);
  lights();

  rotateX(-QUARTER_PI-PI/2);
  // rotateY(ma);
  rotateY(0);
  for (int z = 0; z < height; z += w) {
    for (int x = 0; x < width; x += w) {
      pushMatrix();

      float d = dist(x, z, width / 2, height / 2);
      float offset = map(d, 5, maxD, -PI, PI);
      float a = angle + offset;
      float h = map(sin(a), -1, 1, 50, 150);
      translate(x - width / 2, h, z - height / 2);

      fill(222, 0, 0);
      // 
      noStroke();
      sphere(10);
      popMatrix();
    }
    angle+=0.01;
  }

  noStroke();
  fill(255);
  float r=map(sin(ang), -1, 1, 0, 600);
  rotateX(-PI/4);
  // float r2=22; 
  // ellipse(0, 950, r2, r2);
  // ellipse(10, 10, r2, r2);

  ang+=angV;
  angV+=0.00001;
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 19, 2022, 11:45pm UTC](https://discourse.processing.org/t/help-processing-gif/40207/4 "2022-12-19T23:45:22Z")

</div>

@polllynarium,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

I guessed that r2 should be r\*2… that is what happens when you post code that is not properly formatted.

Once I corrected that it seemed to work and I created this:  
 ![flowers.gif.mov](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/4/64a2f0c48b57b41d71f53c35f6d150d7d5536aa9.gif)

I did have to make changes to this to center it and I moved the z-axis in the negative direction:

`translate(width/2, height/2-150,+70); // I made changes to this`

I used _saveFrame()_ and _MovieMaker_ to make the GIF.

The co-ordinate system for P3D is detailed here:

> **[P3D](https://processing.org/tutorials/p3d/)**
>
> Developing advanced graphics applications in Processing using P3D (OpenGL) mode.

`:)`