# 3d drawing with mouse

**URL:** <https://discourse.processing.org/t/3d-drawing-with-mouse/27738>\
**Category:** Coding Questions\
**Created:** [February 11, 2021, 4:24pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738 "2021-02-11T16:24:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 4:24pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/1 "2021-02-11T16:24:35Z")

</div>

Mr  
@Chrisir

hi

i read this post for you

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/13966/creating-a-xyz-graph-with-points)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

i need some headlights if you kind

```auto
void setup() {
  size(600, 600, OPENGL);
  rectMode(CENTER);
}
 
void draw() {
  background(0);
 
  lights();
 
  translate(width/2, height/2, 0);
 
  scale(3);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(-map(mouseY, 0, height, -PI, PI));
 
  //point(455, 434, 122);
  for (int i=0; i<30; i+=2) {
    sphereMy(50-i, 30-i, 42-i);
  }
 
  stroke(255, 0, 0);
  fill(255, 0, 0, 128);
  plane();
 
  stroke(0, 255, 0);
  fill(0, 255, 0, 128);
  rotateX(HALF_PI);
  plane();
 
  stroke(0, 0, 255);
  fill(0, 0, 255, 128);
  rotateY(HALF_PI);
  plane();
}
 
void plane() {
  for (int y=-6; y<7; y++) {
    for (int x=-6; x<7; x++) {
      rect(10*x, 10*y, 10, 10);
    }
  }
}
void sphereMy(float x, float y, float z) {
  pushMatrix();
  noStroke(); 
  fill(255, 111, 11);
  translate(x, y, z); 
  sphere (2); 
  popMatrix();
}

```

---

<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:** [February 11, 2021, 6:41pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/2 "2021-02-11T18:41:39Z")

</div>

I don’t understand

What can I do for you?

Just explain the Sketch?

Tutorial: [P3D \ Processing.org](https://www.processing.org/tutorials/p3d/)

Further 3D Sketches: [Some Graphical Editors - #3 by Chrisir](https://discourse.processing.org/t/some-graphical-editors/5347/3)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 7:05pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/3 "2021-02-11T19:05:11Z")

</div>

how to draw 3d shapes using mouse something close to paint in windows

i need i to know how to start  
thanks for reply

---

<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:** [February 11, 2021, 7:12pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/4 "2021-02-11T19:12:37Z")

</div>

Do you mean like here?

see [Some Graphical Editors - #3 by Chrisir](https://discourse.processing.org/t/some-graphical-editors/5347/3)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 7:19pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/5 "2021-02-11T19:19:52Z")

</div>

Honestly, the video is more than amazing and you are very creative

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 7:32pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/6 "2021-02-11T19:32:53Z")

</div>

My idea of ​​drawing is as follows

I will use the Arduino instead of the mouse to draw a land topography

using this module ADXL345 Accelerometer

but first i want to start with mouse then move to arduino

I am a new user of processing and I have benefited greatly from this group and learned very wonderful things

If you can help, I am very grateful for your kindness

---

<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:** [February 11, 2021, 7:56pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/7 "2021-02-11T19:56:52Z")

</div>

here is the Sketch I made the video of: [3DSketches/Mover3De-210211b1.zip at master · Kango/3DSketches · GitHub](https://github.com/Kango/3DSketches/blob/master/Mover3De-210211b1.zip)

I hope you can download it. I hate github.

see also [GitHub - Kango/3DSketches: 3D processing sketches](https://github.com/Kango/3DSketches)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 8:00pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/8 "2021-02-11T20:00:26Z")

</div>

i think i am going to start with this its suit very much

```auto
final String HELP = 
  "Click mouse to draw vertex."
  +"\nBackspace to delete last item."
  +"\nHit c to delete entire list."
  +"\nHit Space bar: fill on/off."
  +"\nHit e to export." ;
 
ArrayList<PVector> list = new ArrayList();  
boolean showFill = false;  
 
void setup() {
  size(888, 888);
  background(111);
}
 
void draw() {
  background(111);
  // example shape / optional 
  showCross(300, 300);
  // the list that has been entered 
  showList();
  // show Instructions
  showInstructions();
}
 
// ----------------------------------------------
// Inputs 
 
void mousePressed () {
  //println(
  // "vertex("
  // +mouseX
  // +", "
  // +mouseY
  // +");");
  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}
 
void keyPressed() {
  if (key=='c') {
    // delete all 
    list.clear();
  } else if (key==BACKSPACE) {
    // delete last 
    if (list.size()>0) {
      list.remove(list.size()-1);
    }
  } else if ( key==' ' ) {
    // toggle 
    showFill = !showFill ;
  } else if ( key=='e' ) {
    // export 
    export();
  }// else if
}//func 
 
//------------------------------------------------------------
// Tools 
 
void showInstructions() {
  fill(255);
  text("Mouse: "
    +mouseX
    +","
    +mouseY
    +"\n\n" + HELP, 
    width-210, 19, 
    200, 900);
}
 
void export() {
  //
  println( "\n// -------------------------------");
  println( "\n// " + dateTimeStamp() ); 
  println( "void setup() {");
  println( " size(888, 888);");
  println( " background(111);");
  println( "} //func");
  println( "");
 
  println( "void draw() {");
  println( " background(111);");
  println( " drawShape1();");
  println( "} //func");
  println( "");
  println( "void drawShape1() {"); 
  println( " beginShape();" ); 
  println( " stroke(0); " );
  println( " fill( 255, 0, 0); " );
  for (PVector pv : list) {
    println(
      " vertex("
      +pv.x
      +", "
      +pv.y
      +");");
  }//for
  println( " endShape(CLOSE); " );
  println( "} //func");
  println( "// -------------------------------");
}
 
void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  //
  for (PVector pv : list) {
    pointPVector(pv);
  }
}
 
void pointPVector( PVector pv) {
  // 
  fill(0, 0, 255);
  stroke(255);
  point (pv.x, pv.y);
 
  point (pv.x, pv.y+1);
  point (pv.x+1, pv.y);
 
  point (pv.x, pv.y+2);
  point (pv.x+2, pv.y);
}
 
// ----------------------------------------------------------------------
// Tools date and time
 
String dateTimeStamp() {
  // short version for file names
  return getDate() + ", " + getTime();
}
 
String getDate() {
  return leadingZeros(year()) 
    + "/"+leadingZeros(month()) 
    + "/"+leadingZeros(day());
}
 
String getTime() {
  return leadingZeros(hour()) 
    + ":"+leadingZeros(minute()) 
    + ":"+leadingZeros(second());
}
 
String leadingZeros(int a) {
  String Buffer;
  Buffer=nf(a, 2);
  return(Buffer);
}
 
//-----------------------------------------------------------------------
// optional 
 
void showCross(float x1, float y1) {
 
  // example shape / optional 
 
  pushMatrix(); 
 
  // the \ line ----------
  beginShape();
  fill( 255, 0, 0);
  noStroke();
  vertex(35, 27);
  vertex(48, 17);
  vertex(85, 80);
  vertex(85-13, 80+3);
  endShape(CLOSE);
 
  // the / line -------
 
  beginShape();
  fill( 255, 0, 0);
  vertex(35, 80);
  vertex(48, 87);
  vertex(85, 20);
  vertex(85-13, 20-3-2);
  endShape(CLOSE);
 
  popMatrix();
}

```

ADXL345 Accelerometer has xyz x could be mouse x and y could be mouse y and z could be mouse pressed

i did order the ADXL345 Accelerometer just now

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 11, 2021, 8:03pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/9 "2021-02-11T20:03:12Z")

</div>

> [@Chrisir](#):
>
> here is the Sketch I made the video of: [3DSketches/Mover3De-210211b1.zip at master · Kango/3DSketches · GitHub](https://github.com/Kango/3DSketches/blob/master/Mover3De-210211b1.zip)

thanks i am going to download it

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 12:39am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/10 "2021-02-18T00:39:01Z")

</div>

@Chrisir

hi how are you

can i use mouse instead of rect in this sketch if yes how to use it ???

thanks in advance

```auto
PImage hm;
int xstep = 1;
int max_height = 120;
 
void setup() {
  size(800, 1000, P3D);
  //background(0);
  

 rect(100,100,300,300,12); // how to use mouse to draw here and make it out of void setuup function 

 
 //filter(BLUR, 18);
  hm = get();
}
 
void draw() {
  background(0);
  strokeWeight(1);
  stroke(2,255,244,244);
  float b, z, px, pz;
  translate(width/2, height/2,-20);
  rotateY(map(mouseX,0,width,-PI,PI));
  rotateX(map(mouseY,0,height,-PI,PI));
 
  translate(-width/2, -height/2);
  for (int y = 15; y < height; y+=8) {
    px = -1;
    pz = 4;
    for (int x = 0; x < width; x+=xstep) {
      b = brightness(hm.get(x,y));
      z = map(b, 0, 800, 0, max_height);
     // stroke(color(b));
      line(px, y, pz, x, y, z);
      px = x;
      pz = z;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 12:47am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/11 "2021-02-18T00:47:47Z")

</div>

![Screenshot_2021-02-17-23-52-17-604](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b6e909750271265ab298445b9c6a67049bca9f16.jpeg)

---

<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:** [February 18, 2021, 2:47pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/12 "2021-02-18T14:47:35Z")

</div>

My new Sketch :

- basically, you can draw as many rects as you want.

- You click and hold the mouse and drag it down and right. Release mouse to draw the rect.

- Repeat with more rects

- Hit return key to submit to 3D

Stay well.

Chrisir

```auto

//

final int STATE_ENTER = 0; 
final int SHOW_3D = 1; 
int state = STATE_ENTER; 

PImage hm;
int xstep = 1;
int max_height = 120;

PVector startMouse, endMouse;  

boolean hold=true;

void setup() {

  size(800, 1000, P3D);
  background(0);

  // rect(100, 100, 300, 300, 12); // how to use mouse to draw here and make it out of void setuup function 
  //filter(BLUR, 18);
}

void draw() {
  //
  if (state == STATE_ENTER) {

    // ENTER ------------------------

    if (hold) {
      // 
      if (startMouse!=null)
        rect( startMouse.x, startMouse.y, 
          mouseX- startMouse.x, mouseY-startMouse.y);
    }
  } else if (state == SHOW_3D) {

    // SHOW ------------------------

    background(0);

    strokeWeight(1);
    stroke(2, 255, 244, 244);
    float b, z, px, pz;
    translate(width/2, height/2, -20);
    rotateY(map(mouseX, 0, width, -PI, PI));
    rotateX(map(mouseY, 0, height, -PI, PI));

    translate(-width/2, -height/2);
    for (int y = 15; y < height; y+=8) {
      px = -1;
      pz = 4;
      for (int x = 0; x < width; x+=xstep) {
        b = brightness(hm.get(x, y));
        z = map(b, 0, 800, 0, max_height);
        // stroke(color(b));
        line(px, y, pz, x, y, z);
        px = x;
        pz = z;
      }
    }
  }//else if
}//func 

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

void mousePressed() {
  startMouse = new PVector(mouseX, mouseY);

  hold=true;
}  

void mouseReleased() {
  endMouse = new PVector(mouseX, mouseY); 
  hold=false;

  rect( startMouse.x, startMouse.y, 
    endMouse.x- startMouse.x, endMouse.y-startMouse.y);
}  

void keyPressed() {
  if (key==ENTER||key==RETURN) {
    hm = get();
    state = SHOW_3D;
  }
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 5:21pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/13 "2021-02-18T17:21:58Z")

</div>

@Chrisir

thanks for your care but i think i failed to inform you what i want this the original sketch adds contours to the text what i want is

i dont want to use text and add contours for it i need to draw shape with mouse then make appear with contours

```auto
PImage hm;
int xstep = 1;
int max_height = 60;
 
void setup() {
  size(600, 400, P3D);
  background(0);
  fill(255);
  textSize(128);
  textAlign(CENTER);
  text("jafal", width/2, height/2);
  filter(BLUR, 8);
  hm = get();
}
 
void draw() {
  background(0);
  strokeWeight(2);
  stroke(255);
  float b, z, px, pz;
  translate(width/2, height/2,-20);
  rotateY(map(mouseX,0,width,-PI,PI));
  rotateX(map(mouseY,0,height,-PI,PI));
 
  translate(-width/2, -height/2);
  for (int y = 5; y < height; y+=5) {
    px = -1;
    pz = 0;
    for (int x = 0; x < width; x+=xstep) {
      b = brightness(hm.get(x,y));
      z = map(b, 0, 200, 0, max_height);
      //stroke(color(b));
      line(px, y, pz, x, y, z);
      px = x;
      pz = z;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 5:34pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/14 "2021-02-18T17:34:36Z")

</div>

i dont want to use text i want to use instead of text drawing with mouse the make it appear like this

 ![Screenshot_2021-02-18-19-19-02-028](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/393ccfea6d14389506a8c378e879dab8dbab5c37.jpeg)

---

<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:** [February 18, 2021, 7:07pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/15 "2021-02-18T19:07:15Z")

</div>

> [@jafal](#):
>
> need to draw shape with mouse then make appear with contours

In my Sketch you can draw rects. And then they are in 3D.

Did you try my Sketch?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 7:15pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/16 "2021-02-18T19:15:47Z")

</div>

> [@jafal](#):
>
> @Chrisir

yes i did but i need to draw same as this sketch then add the contours

```auto
final String HELP = 
  "Click mouse to draw vertex."
  +"\nBackspace to delete last item."
  +"\nHit c to delete entire list."
  +"\nHit Space bar: fill on/off."
  +"\nHit e to export." ;
 
ArrayList<PVector> list = new ArrayList();  
boolean showFill = false;  
 
void setup() {
  size(888, 888);
  background(111);
}
 
void draw() {
  background(111);
  // example shape / optional 
  showCross(300, 300);
  // the list that has been entered 
  showList();
  // show Instructions
  showInstructions();
}
 
// ----------------------------------------------
// Inputs 
 
void mousePressed () {
  //println(
  // "vertex("
  // +mouseX
  // +", "
  // +mouseY
  // +");");
  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}
 
void keyPressed() {
  if (key=='c') {
    // delete all 
    list.clear();
  } else if (key==BACKSPACE) {
    // delete last 
    if (list.size()>0) {
      list.remove(list.size()-1);
    }
  } else if ( key==' ' ) {
    // toggle 
    showFill = !showFill ;
  } else if ( key=='e' ) {
    // export 
    export();
  }// else if
}//func 
 
//------------------------------------------------------------
// Tools 
 
void showInstructions() {
  fill(255);
  text("Mouse: "
    +mouseX
    +","
    +mouseY
    +"\n\n" + HELP, 
    width-210, 19, 
    200, 900);
}
 
void export() {
  //
  println( "\n// -------------------------------");
  println( "\n// " + dateTimeStamp() ); 
  println( "void setup() {");
  println( " size(888, 888);");
  println( " background(111);");
  println( "} //func");
  println( "");
 
  println( "void draw() {");
  println( " background(111);");
  println( " drawShape1();");
  println( "} //func");
  println( "");
  println( "void drawShape1() {"); 
  println( " beginShape();" ); 
  println( " stroke(0); " );
  println( " fill( 255, 0, 0); " );
  for (PVector pv : list) {
    println(
      " vertex("
      +pv.x
      +", "
      +pv.y
      +");");
  }//for
  println( " endShape(CLOSE); " );
  println( "} //func");
  println( "// -------------------------------");
}
 
void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  //
  for (PVector pv : list) {
    pointPVector(pv);
  }
}
 
void pointPVector( PVector pv) {
  // 
  fill(0, 0, 255);
  stroke(255);
  point (pv.x, pv.y);
 
  point (pv.x, pv.y+1);
  point (pv.x+1, pv.y);
 
  point (pv.x, pv.y+2);
  point (pv.x+2, pv.y);
}
 
// ----------------------------------------------------------------------
// Tools date and time
 
String dateTimeStamp() {
  // short version for file names
  return getDate() + ", " + getTime();
}
 
String getDate() {
  return leadingZeros(year()) 
    + "/"+leadingZeros(month()) 
    + "/"+leadingZeros(day());
}
 
String getTime() {
  return leadingZeros(hour()) 
    + ":"+leadingZeros(minute()) 
    + ":"+leadingZeros(second());
}
 
String leadingZeros(int a) {
  String Buffer;
  Buffer=nf(a, 2);
  return(Buffer);
}
 
//-----------------------------------------------------------------------
// optional 
 
void showCross(float x1, float y1) {
 
  // example shape / optional 
 
  pushMatrix(); 
 
  // the \ line ----------
  beginShape();
  fill( 255, 0, 0);
  noStroke();
  vertex(35, 27);
  vertex(48, 17);
  vertex(85, 80);
  vertex(85-13, 80+3);
  endShape(CLOSE);
 
  // the / line -------
 
  beginShape();
  fill( 255, 0, 0);
  vertex(35, 80);
  vertex(48, 87);
  vertex(85, 20);
  vertex(85-13, 20-3-2);
  endShape(CLOSE);
 
  popMatrix();
}

```

**\> what i need is that after drawing with mouse add to the draw the contours and rotate it same as the the rotation of text**

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 7:38pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/17 "2021-02-18T19:38:45Z")

</div>

lets say that i have made draw with this sketch

```auto
void setup(){
  size(600,400);
}

int prevX,prevY;
boolean first = true;

void draw(){
  /* Renders only when mouse is pressed
  
  if((mousePressed)&&(!first)){
    line(mouseX,mouseY,prevX,prevY);
    prevX = mouseX;
    prevY = mouseY;
  }else{
    prevX = mouseX;
    prevY = mouseY;
    first = false;
  } */
}

void mouseClicked(){
  if(!first){
    line(mouseX,mouseY,prevX,prevY);
    prevX = mouseX;
    prevY = mouseY;
  }else{
    prevX = mouseX;
    prevY = mouseY;
    first = false;
  }
}

```

how to combine this section to give the draw contours and  
3d rotation ?

```auto
void draw() {
  background(0);
  strokeWeight(2);
  stroke(255);
  float b, z, px, pz;
  translate(width/2, height/2,-20);
  rotateY(map(mouseX,0,width,-PI,PI));
  rotateX(map(mouseY,0,height,-PI,PI));
 
  translate(-width/2, -height/2);
  for (int y = 5; y < height; y+=5) {
    px = -1;
    pz = 0;
    for (int x = 0; x < width; x+=xstep) {
      b = brightness(hm.get(x,y));
      z = map(b, 0, 200, 0, max_height);
      //stroke(color(b));
      line(px, y, pz, x, y, z);
      px = x;
      pz = z;
    }
  }
}

```

---

<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:** [February 18, 2021, 7:44pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/18 "2021-02-18T19:44:28Z")

</div>

Again, draw with the mouse as long as you want, hit Return to go to 3D

```auto
//

final int STATE_ENTER = 0; 
final int SHOW_3D = 1; 
int state = STATE_ENTER; 

PImage hm;

int xstep = 1;
int max_height = 120;

//

final String HELP = 
  "Click mouse to draw vertex."
  +"\nBackspace to delete last item."
  +"\nHit c to delete entire list."
  +"\nHit Space bar: fill on/off."
  +"\nHit e to export." ;

ArrayList<PVector> list = new ArrayList();  
boolean showFill = false;  

void setup() {
  size(888, 888, P3D);
  background(111);
}

void draw() {
  background(111);

  //
  if (state == STATE_ENTER) {

    // ENTER ------------------------

    // example shape / optional 
    showCross(300, 300);
    // the list that has been entered 
    showList();
    // show Instructions
    showInstructions();
  } else if (state == SHOW_3D) {

    // SHOW ------------------------

    background(0);

    strokeWeight(1);
    stroke(2, 255, 244, 244);
    float b, z, px, pz;
    translate(width/2, height/2, -20);
    rotateY(map(mouseX, 0, width, -PI, PI));
    rotateX(map(mouseY, 0, height, -PI, PI));

    translate(-width/2, -height/2);
    for (int y = 15; y < height; y+=8) {
      px = -1;
      pz = 4;
      for (int x = 0; x < width; x+=xstep) {
        b = brightness(hm.get(x, y));
        z = map(b, 0, 800, 0, max_height);
        // stroke(color(b));
        line(px, y, pz, x, y, z);
        px = x;
        pz = z;
      }
    }
  }//else if
}

// ----------------------------------------------
// Inputs 

void mousePressed () {
  //println(
  // "vertex("
  // +mouseX
  // +", "
  // +mouseY
  // +");");
  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}

void keyPressed() {
  if (key=='c') {
    // delete all 
    list.clear();
  } else if (key==BACKSPACE) {
    // delete last 
    if (list.size()>0) {
      list.remove(list.size()-1);
    }
  } else if ( key==' ' ) {
    // toggle 
    showFill = !showFill ;
  } else if ( key=='e' ) {
    // export 
    export();
  } else if ( key==ENTER||key==RETURN ) {

    hm = get();
    state = SHOW_3D;
  }// else if
}//func 

//------------------------------------------------------------
// Tools 

void showInstructions() {
  fill(255);
  text("Mouse: "
    +mouseX
    +","
    +mouseY
    +"\n\n" + HELP, 
    width-210, 19, 
    200, 900);
}

void export() {
  //
  println( "\n// -------------------------------");
  println( "\n// " + dateTimeStamp() ); 
  println( "void setup() {");
  println( " size(888, 888);");
  println( " background(111);");
  println( "} //func");
  println( "");

  println( "void draw() {");
  println( " background(111);");
  println( " drawShape1();");
  println( "} //func");
  println( "");
  println( "void drawShape1() {"); 
  println( " beginShape();" ); 
  println( " stroke(0); " );
  println( " fill( 255, 0, 0); " );
  for (PVector pv : list) {
    println(
      " vertex("
      +pv.x
      +", "
      +pv.y
      +");");
  }//for
  println( " endShape(CLOSE); " );
  println( "} //func");
  println( "// -------------------------------");
}

void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  //
  for (PVector pv : list) {
    pointPVector(pv);
  }
}

void pointPVector( PVector pv) {
  // 
  fill(0, 0, 255);
  stroke(255);
  point (pv.x, pv.y);

  point (pv.x, pv.y+1);
  point (pv.x+1, pv.y);

  point (pv.x, pv.y+2);
  point (pv.x+2, pv.y);
}

// ----------------------------------------------------------------------
// Tools date and time

String dateTimeStamp() {
  // short version for file names
  return getDate() + ", " + getTime();
}

String getDate() {
  return leadingZeros(year()) 
    + "/"+leadingZeros(month()) 
    + "/"+leadingZeros(day());
}

String getTime() {
  return leadingZeros(hour()) 
    + ":"+leadingZeros(minute()) 
    + ":"+leadingZeros(second());
}

String leadingZeros(int a) {
  String Buffer;
  Buffer=nf(a, 2);
  return(Buffer);
}

//-----------------------------------------------------------------------
// optional 

void showCross(float x1, float y1) {

  // example shape / optional 

  pushMatrix(); 

  // the \ line ----------
  beginShape();
  fill( 255, 0, 0);
  noStroke();
  vertex(35, 27);
  vertex(48, 17);
  vertex(85, 80);
  vertex(85-13, 80+3);
  endShape(CLOSE);

  // the / line -------

  beginShape();
  fill( 255, 0, 0);
  vertex(35, 80);
  vertex(48, 87);
  vertex(85, 20);
  vertex(85-13, 20-3-2);
  endShape(CLOSE);

  popMatrix();
}
//

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 18, 2021, 8:12pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/19 "2021-02-18T20:12:08Z")

</div>

[Chrisir](https://discourse.processing.org/u/Chrisir)

thanks for you i run it on my tablet cause i have issue in my pc and as u know i can hit enter on tablet i will try it on pc after fixing it

I am very grateful to you

---

<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:** [February 18, 2021, 8:18pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/20 "2021-02-18T20:18:47Z")

</div>

same version but right mouse click (also not for your iPad I guess…)

```auto

//

final int STATE_ENTER = 0; 
final int SHOW_3D = 1; 
int state = STATE_ENTER; 

PImage hm;

int xstep = 1;
int max_height = 120;

//

final String HELP = 
  "Click mouse to draw vertex."
  +"\nBackspace to delete last item."
  +"\nHit c to delete entire list."
  +"\nHit Space bar: fill on/off."
  +"\nHit e to export." ;

ArrayList<PVector> list = new ArrayList();  
boolean showFill = false;  

void setup() {
  size(888, 888, P3D);
  background(111);
}

void draw() {
  background(111);

  //
  if (state == STATE_ENTER) {

    // ENTER ------------------------

    // example shape / optional 
    showCross(300, 300);
    // the list that has been entered 
    showList();
    // show Instructions
    showInstructions();
  } else if (state == SHOW_3D) {

    // SHOW ------------------------

    background(0);

    strokeWeight(1);
    stroke(2, 255, 244, 244);
    float b, z, px, pz;
    translate(width/2, height/2, -20);
    rotateY(map(mouseX, 0, width, -PI, PI));
    rotateX(map(mouseY, 0, height, -PI, PI));

    translate(-width/2, -height/2);
    for (int y = 15; y < height; y+=8) {
      px = -1;
      pz = 4;
      for (int x = 0; x < width; x+=xstep) {
        b = brightness(hm.get(x, y));
        z = map(b, 0, 800, 0, max_height);
        // stroke(color(b));
        line(px, y, pz, x, y, z);
        px = x;
        pz = z;
      }
    }
  }//else if
}

// ----------------------------------------------
// Inputs 

void mousePressed () {
  //println(
  // "vertex("
  // +mouseX
  // +", "
  // +mouseY
  // +");");
  if (mouseButton==RIGHT) {
    hm = get();
    state = SHOW_3D;
    return;
  }
  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}

void keyPressed() {
  if (key=='c') {
    // delete all 
    list.clear();
  } else if (key==BACKSPACE) {
    // delete last 
    if (list.size()>0) {
      list.remove(list.size()-1);
    }
  } else if ( key==' ' ) {
    // toggle 
    showFill = !showFill ;
  } else if ( key=='e' ) {
    // export 
    export();
  } else if ( key==ENTER||key==RETURN ) {

    hm = get();
    state = SHOW_3D;
  }// else if
}//func 

//------------------------------------------------------------
// Tools 

void showInstructions() {
  fill(255);
  text("Mouse: "
    +mouseX
    +","
    +mouseY
    +"\n\n" + HELP, 
    width-210, 19, 
    200, 900);
}

void export() {
  //
  println( "\n// -------------------------------");
  println( "\n// " + dateTimeStamp() ); 
  println( "void setup() {");
  println( " size(888, 888);");
  println( " background(111);");
  println( "} //func");
  println( "");

  println( "void draw() {");
  println( " background(111);");
  println( " drawShape1();");
  println( "} //func");
  println( "");
  println( "void drawShape1() {"); 
  println( " beginShape();" ); 
  println( " stroke(0); " );
  println( " fill( 255, 0, 0); " );
  for (PVector pv : list) {
    println(
      " vertex("
      +pv.x
      +", "
      +pv.y
      +");");
  }//for
  println( " endShape(CLOSE); " );
  println( "} //func");
  println( "// -------------------------------");
}

void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  //
  for (PVector pv : list) {
    pointPVector(pv);
  }
}

void pointPVector( PVector pv) {
  // 
  fill(0, 0, 255);
  stroke(255);
  point (pv.x, pv.y);

  point (pv.x, pv.y+1);
  point (pv.x+1, pv.y);

  point (pv.x, pv.y+2);
  point (pv.x+2, pv.y);
}

// ----------------------------------------------------------------------
// Tools date and time

String dateTimeStamp() {
  // short version for file names
  return getDate() + ", " + getTime();
}

String getDate() {
  return leadingZeros(year()) 
    + "/"+leadingZeros(month()) 
    + "/"+leadingZeros(day());
}

String getTime() {
  return leadingZeros(hour()) 
    + ":"+leadingZeros(minute()) 
    + ":"+leadingZeros(second());
}

String leadingZeros(int a) {
  String Buffer;
  Buffer=nf(a, 2);
  return(Buffer);
}

//-----------------------------------------------------------------------
// optional 

void showCross(float x1, float y1) {

  // example shape / optional 

  pushMatrix(); 

  // the \ line ----------
  beginShape();
  fill( 255, 0, 0);
  noStroke();
  vertex(35, 27);
  vertex(48, 17);
  vertex(85, 80);
  vertex(85-13, 80+3);
  endShape(CLOSE);

  // the / line -------

  beginShape();
  fill( 255, 0, 0);
  vertex(35, 80);
  vertex(48, 87);
  vertex(85, 20);
  vertex(85-13, 20-3-2);
  endShape(CLOSE);

  popMatrix();
}
//

```

[Next page](https://discourse.processing.org/t/3d-drawing-with-mouse/27738.md?page=2)