# Dibujar en void setup y moverlo en void draw

**URL:** <https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667>\
**Category:** Español\
**Created:** [November 11, 2022, 8:59am UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667 "2022-11-11T08:59:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![SYN1810](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@SYN1810](https://discourse.processing.org/u/SYN1810)\
**Post date:** [November 11, 2022, 8:59am UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/1 "2022-11-11T08:59:24Z")

</div>

Hola, he estado buscando una forma de mover algo que he hecho previamente en el void setup para despues moverlo de alguna forma, no he encontrado nada, ayuda (son varias ellipses y tal, ademas salen aleatoriamente) (mando el codigo si hace falta)

---

<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:** [November 11, 2022, 9:13am UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/2 "2022-11-11T09:13:13Z")

</div>

Please show your code  
It could be a minor problem like Draw() instead of draw()…

Chrisir

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [November 11, 2022, 11:53pm UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/3 "2022-11-11T23:53:22Z")

</div>

Manda el código, por favor.

`setup()` roda una vez todo código que tienes, después `draw()` roda en un ‘loop’ repitiendo el código cosa de 24 veces en un segundo.

Lo que ha sido dibujado en `setup()` no se le pode moverlo. Para hacer esto tienes que dibujar en `draw()`.

---

<div class="post-metadata">

**Author:** ![SYN1810](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@SYN1810](https://discourse.processing.org/u/SYN1810)\
**Post date:** [November 12, 2022, 1:00pm UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/4 "2022-11-12T13:00:27Z")

</div>

void setup()  
{  
float centerX=width/2;  
float centerY=height/2;

float jWidth=random(width/2,width\*.75);  
float jHeight=random(height/2,height\*.75);

size(200,200);  
//stem  
strokeWeight(random(5,15));  
line(centerX,centerX-jHeight/2,centerX+random(-jWidth\*.25,jWidth\*.25),centerY-jHeight\*.75);  
line(centerX,centerX-jHeight/2,centerX+random(-jWidth\*.25,jWidth\*.25),centerY-jHeight\*.75);  
line(centerX,centerX-jHeight/2,centerX+random(-jWidth\*.25,jWidth\*.25),centerY-jHeight\*.75);  
line(centerX,centerX-jHeight/2,centerX+random(-jWidth\*.25,jWidth\*.25),centerY-jHeight\*.75);

//face  
strokeWeight(1);  
fill(251,221,202);  
ellipse(centerX,centerY,jWidth,jHeight);

//generate left eye  
float leftEyeWidth = random(jWidth\*.1,jWidth\*.35);  
float leftEyeHeight = random(jHeight\*.1,jHeight\*.25);  
float leftEyeX = ((centerX - jWidth/2) + centerX)/2;  
float leftEyeY = (centerY+20 - jHeight\*0.1 - leftEyeHeight);

//draw ejes  
fill(250);  
circle(leftEyeX, leftEyeY, leftEyeWidth);  
circle(leftEyeX+60, leftEyeY, leftEyeWidth);  
fill(0);  
circle(leftEyeX, leftEyeY, leftEyeWidth-20);  
circle(leftEyeX+60, leftEyeY, leftEyeWidth-20);

//generate nose  
float noseWidth = random(jWidth\*.1-50,jWidth\*.35-200);  
float noseHeight = random(jHeight\*.1,jHeight\*.25);  
float noseX = ((centerX-80 + jWidth/2) + centerX)/2;  
float noseY = centerY+20 - jHeight\*.1 - noseHeight;

//draw nose  
fill(251,221,202);  
circle(centerX, centerY, noseWidth+50);

//generate mouth  
float mouthWidth = random(jWidth\*.1,jWidth\*.8);  
float mouthHeight = random(jHeight\*.1, jHeight\*.25);  
float mouthY = centerY + random (jHeight\*.1, jHeight\*.35);

//draw mouth  
fill(255,0,0);  
arc(centerX, mouthY, mouthWidth, mouthHeight, 3.14, 2\*3.14);  
line(centerX-mouthWidth/2, mouthY, centerX+mouthWidth/2, mouthY);  
}

---

<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:** [November 12, 2022, 1:11pm UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/5 "2022-11-12T13:11:45Z")

</div>

First off, `size()` should be the first command in the function `setup()`, because only after that we have values for `width` and `height`. Before that they are 0.

**Another important point:**

when you define variables in setup() that you use in draw(), make them global variables, so that they are known in both functions.

- To make them global, declare them before setup, set them in setup and use them in draw().

I show this for centerX, centerY and jWidth, jHeight.  
The other lines and variables you have to treat the same way:

- declare the vars **before** setup
- give the vars values **in** setup
- move the other code lines with circle/ellipse/line to draw()

**Remark**

- for the hair: when you use random(-jWidth\*.25, jWidth\*.25), better store this in 4 new variables (hair1X, hair2X, hair3X, hair4X) in setup() and use them in draw() so that the hair doesn’t flicker.

```auto
float centerX;
float centerY;

float jWidth;
float jHeight;

// ------------------------------------------------------------

void setup() {
  size(200, 200);

  centerX=width/2;
  centerY=height/2;

  jWidth=random(width/2, width*.75);
  jHeight=random(height/2, height*.75);

  //generate left eye
  float leftEyeWidth = random(jWidth*.1, jWidth*.35);
  float leftEyeHeight = random(jHeight*.1, jHeight*.25);
  float leftEyeX = ((centerX - jWidth/2) + centerX)/2;
  float leftEyeY = (centerY+20 - jHeight*0.1 - leftEyeHeight);

  //draw ejes
  fill(250);
  ellipse(leftEyeX, leftEyeY, leftEyeWidth, leftEyeWidth);
  ellipse(leftEyeX+60, leftEyeY, leftEyeWidth, leftEyeWidth);
  fill(0);
  ellipse(leftEyeX, leftEyeY, leftEyeWidth-20, leftEyeWidth-20);
  ellipse(leftEyeX+60, leftEyeY, leftEyeWidth-20, leftEyeWidth-20);

  //generate nose
  float noseWidth = random(jWidth*.1-50, jWidth*.35-200);
  float noseHeight = random(jHeight*.1, jHeight*.25);
  float noseX = ((centerX-80 + jWidth/2) + centerX)/2;
  float noseY = centerY+20 - jHeight*.1 - noseHeight;

  //draw nose
  fill(251, 221, 202);
  ellipse(centerX, centerY, noseWidth+50, noseWidth+50);

  //generate mouth
  float mouthWidth = random(jWidth*.1, jWidth*.8);
  float mouthHeight = random(jHeight*.1, jHeight*.25);
  float mouthY = centerY + random (jHeight*.1, jHeight*.35);

  //draw mouth
  fill(255, 0, 0);
  arc(centerX, mouthY, mouthWidth, mouthHeight, 3.14, 2*3.14);
  line(centerX-mouthWidth/2, mouthY, centerX+mouthWidth/2, mouthY);
}

void draw() {
  background(111); 

  //stem
  strokeWeight(random(5, 15));
  line(centerX, centerX-jHeight/2, centerX+random(-jWidth*.25, jWidth*.25), centerY-jHeight*.75);
  line(centerX, centerX-jHeight/2, centerX+random(-jWidth*.25, jWidth*.25), centerY-jHeight*.75);
  line(centerX, centerX-jHeight/2, centerX+random(-jWidth*.25, jWidth*.25), centerY-jHeight*.75);
  line(centerX, centerX-jHeight/2, centerX+random(-jWidth*.25, jWidth*.25), centerY-jHeight*.75);

  //face
  strokeWeight(1);
  fill(251, 221, 202);
  ellipse(centerX, centerY, jWidth, jHeight);
}
//

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 12, 2022, 2:28pm UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/6 "2022-11-12T14:28:14Z")

</div>

> [@Chrisir](#):
>
> First off, `size()` should be the first command in the function `setup()`, because only after that we have values for `width` and `height`. Before that they are 0.

I was curious whether it was 0 and tested it, but had other results. Mayhaps they changed it with Processing 4?

```auto
float w, h;

void setup() {
  w = width;
  h = height;
  size(500, 250);
  noLoop();
}

void draw() {
  println(w, h); // prints 500.0 250.0

}

```

---

<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:** [November 12, 2022, 8:25pm UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/7 "2022-11-12T20:25:25Z")

</div>

Hello @Tiemen,

Behind the scenes Processing generates this from your code and _width_ and _height_ will be defined in `settings()` before `setup()`:

```auto
public void settings() { size(500, 250); }

```

> **Full code! \< Click here to open!**
>
> ```auto
> /* autogenerated by Processing revision 1286 on 2022-11-12 */
> import processing.core.*;
> import processing.data.*;
> import processing.event.*;
> import processing.opengl.*;
> 
> import java.util.HashMap;
> import java.util.ArrayList;
> import java.io.File;
> import java.io.BufferedReader;
> import java.io.PrintWriter;
> import java.io.InputStream;
> import java.io.OutputStream;
> import java.io.IOException;
> 
> public class sketch_221112n extends PApplet {
> 
> float w, h;
> 
> public void setup() {
> w = width;
> h = height;
> /* size commented out by preprocessor */;
> noLoop();
> }
> 
> public void draw() {
> println(w, h); // prints 500.0 250.0
> }
> 
> public void settings() { size(500, 250); }
> 
> static public void main(String[] passedArgs) {
> String[] appletArgs = new String[] { "sketch_221112n" };
> if (passedArgs != null) {
> PApplet.main(concat(appletArgs, passedArgs));
> } else {
> PApplet.main(appletArgs);
> }
> }
> }
> 
> ```

The` size()` reference states that it _must_ be the first line:  
[https://processing.org/reference/size\_.html](https://processing.org/reference/size_.html)

For readability of code the first line is a good place for `size()` but it can be elsewhere in `setup()` or in `settings()`.

References:  
[https://processing.org/reference/settings\_.html](https://processing.org/reference/settings_.html)

`:)`

---

<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:** [November 14, 2022, 2:24am UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/8 "2022-11-14T02:24:06Z")

</div>

Hello @SYN1810,

Try this:

```auto
void setup()
  {
  size(200,200);
  noLoop();
  }
  
void draw()
  {
  background(255);  
  face();
  }
  
void face()
  {
 // your face code goes here
  }
  
void keyPressed()
  {
  redraw();
  }

```

Or this if you want to move the shape:

```auto
int seed;

void setup()
  {
  size(200,200);
  }
  
void draw()
  {
  background(255);  
  translate(mouseX, mouseY);
  randomSeed(seed);
  face();
  }
  
void face()
  {
 // your face code goes here
  }
  
void keyPressed()
  {
  seed = int(random(1000));
  }

```

Resources (tutorials, references and examples) are here:  
[https://processing.org/](https://processing.org/)

`:)`

---

<div class="post-metadata">

**Author:** ![SYN1810](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@SYN1810](https://discourse.processing.org/u/SYN1810)\
**Post date:** [November 14, 2022, 10:56am UTC](https://discourse.processing.org/t/dibujar-en-void-setup-y-moverlo-en-void-draw/39667/9 "2022-11-14T10:56:49Z")

</div>

Thank you very much! It’s not exactly what I need but thanks to you I already know how to do the code, thank you very much