Dibujar en void setup y moverlo en void draw

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)

1 Like

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

Chrisir

1 Like

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().

1 Like

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);
}

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.
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);
}
//

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

float w, h;

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

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

}
2 Likes

Hello @Tiemen,

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

public void settings() { size(500, 250); }
Full code! < Click here to open!
/* 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

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

:)

1 Like

Hello @SYN1810,

Try this:

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:

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/

:)

1 Like

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

2 Likes