# 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:** 17
**Page:** 2

<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:19pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/21 "2021-02-18T20:19:57Z")

</div>

here you can click mouse in upper right corner

```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 (mouseX<65&&mouseY<65) {
    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();
}
//

```

---

<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:41pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/22 "2021-02-18T20:41:52Z")

</div>

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

hi

can you add button to run the sketch on tablet in-place of hitting enter ?

---

<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, 9:28pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/23 "2021-02-18T21:28:34Z")

</div>

Upper left corner is invisible button

---

<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, 9:37pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/24 "2021-02-18T21:37:53Z")

</div>

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

great nice its working but draws extra UN wanted lines while hitting the corner

---

<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 19, 2021, 1:42am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/25 "2021-02-19T01:42:41Z")

</div>

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

i have cut your code to minimum and add button to the sketch activate the button if you please instead of left corner mouse pressed

```auto

 float rectY ;
float rectX ;
ArrayList<PVector> list = new ArrayList();  
boolean showFill = false;  
 
void setup() {
  size(500, 500);
  background(1);
 rectX = width/2 -50;
 rectY = height*.8 +30;

}
 
void draw() {
  background(111);
  

 
  showList();
 
}
 

 
void mousePressed () {
  
  PVector pv = new PVector(mouseX, mouseY) ;
 list.add(pv);
 

}
 

 

 
void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
 noStroke();
 stroke(0); 
 for (PVector pv : list) {
   vertex(pv.x, pv.y);
  }
 endShape();
  show();
 if (mouseX >rectX && mouseX < rectX+100 && mouseY > rectY && mouseY < rectY+30) {

 
 }
}
void show() {

  stroke(244);
  noFill();
  rect( rectX, rectY, 100, 30);
  stroke(2,22,220);
  textSize(35);
  text("3D" , rectX+10 ,rectY +25);
} 

```

---

<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 19, 2021, 8:23am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/26 "2021-02-19T08:23:22Z")

</div>

```auto

//

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

PImage hm;

int xstep = 1;
int max_height = 120;

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

void setup() {
  size(500, 500, P3D);
  background(1);
  rectX = width/2 -50;
  rectY = height*.8 +30;
}

void draw() {
  //
  if (state == STATE_ENTER) {
    // ENTER POINTS ----------------
    background(111);
    showList();
  } 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
}

void mousePressed () {

  if (mouseX>rectX&&
    mouseX<rectX+100 &&
    mouseY>rectY&&
    mouseY<rectY+30) {
    //submit
    stroke(111);
    fill(111);
    rect( rectX-12, rectY-12, 
      100+12, 30+12);

    hm = get();
    state = SHOW_3D;
    return;
  }

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

  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}

void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  show();
  //if (mouseX >rectX && mouseX < rectX+100 && mouseY > rectY && mouseY < rectY+30) {
  //}
}

void show() {
  stroke(244);
  noFill();
  rect( rectX, rectY, 
    100, 30);
  stroke(2, 22, 220);
  textSize(35);
  text("3D", rectX+10, rectY +25+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 19, 2021, 2:16pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/27 "2021-02-19T14:16:31Z")

</div>

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

great you are creative man ❤

---

<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 19, 2021, 9:49pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/28 "2021-02-19T21:49:29Z")

</div>

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

hi

can we back to draw again without exit or restart sketch ??

switching draw and 3d vise versa ?

---

<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 19, 2021, 11:36pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/29 "2021-02-19T23:36:44Z")

</div>

in this version you can

- switch back and forth between 2D and 3D and
- also have a menu to select colors. Just click a color field to choose it.

Also, you can have multiple independent shapes without a connecting line between them.

```auto

//

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

PImage hm;

int xstep = 1;
int max_height = 320;//120;

float rectY ;
float rectX, rectX2 ;

ArrayList<ListOfVectors> listOfShapes = new ArrayList();  

boolean showFill = false;  

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

void setup() {
  size(500, 500, P3D);
  background(1);
  rectX = width/2 -50;
  rectY = height*.8 +30;
  rectX2=rectX-110;

  listOfShapes.add(new ListOfVectors());
}

void draw() {
  //
  if (state == STATE_ENTER) {
    //
    // ENTER POINTS (2D) -----------------------------------------------
    //
    background(111);
    showList2D();
    showButton2D3D();
    showButtonMenu();
    //
  } else if (state == MENU) {
    //
    // Choose Color ----------------------------------------------------
    //

    background(111);
    int x=0, y=50;
    fill(255); 
    text("Choose your color", 
      12, 39); 
    for (int i = 0; i<256; i++) {
      fill(i); 
      noStroke(); 
      rect (x, y, 15, 15);
      x+=16;
      if (x>width-17) {
        x=0; 
        y+=16;
      }//if
    }//for
  } else if (state == SHOW_3D) {

    // SHOW 3D ------------------------------------------------------

    background(0);
    lights();

    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));
        if (b!=111.0)
          println(b); 
        // z = map(b, 0, 256, 0, max_height);
        z = map(b, 0, 256, 0, max_height);
        // stroke(color(b));
        line(px, y, pz, x, y, z);
        px = x;
        pz = z;
      }
    }//for
    // buttons 
    showButton2D3D();
  } //else if
  //
}//func 

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

void mousePressed () {

  if (mouseX>rectX&&
    mouseX<rectX+100 &&
    mouseY>rectY&&
    mouseY<rectY+30) {
    //submit
    stroke(111);
    fill(111);
    rect( rectX-12, rectY-12, 
      100+12, 30+12);
    rect( rectX-110, rectY, 
      100, 30);

    hm = get();

    // toggle !!!!!!!!!!!!!!!!!!!!!!!!
    if (state == STATE_ENTER) {
      state = SHOW_3D;
    } else {
      state = STATE_ENTER;
    }//else 
    return;
  }//if

  if (mouseX>rectX2&&
    mouseX<rectX2+100 &&
    mouseY>rectY&&
    mouseY<rectY+30) {
    // Menu 
    state = MENU;
    return;
  }

  if (state == MENU) {
    listOfShapes.add(new ListOfVectors());
    listOfShapes.get(listOfShapes.size()-1).col2D = get(mouseX, mouseY);
    state=STATE_ENTER; 
    return;
  }

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

  PVector pv = new PVector(mouseX, mouseY);
  listOfShapes.get(listOfShapes.size()-1).list.add(pv);
}

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

void showList2D() {

  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  //stroke(col2D);
  for (ListOfVectors currentListOfVectors : listOfShapes) {
    currentListOfVectors.display();
  }
  endShape();
}//func 

void showButtonMenu() {
  // show button 

  if (state == STATE_ENTER) {

    stroke(244); 
    noFill(); 
    rect( rectX2, rectY, 
      100, 30); 
    stroke(2, 22, 220); 
    textSize(35); 
    fill(255); 
    text("Menu", 
      rectX2+4, rectY +25+3);
  }
}

void showButton2D3D() {
  // show two different buttons 

  if (state == STATE_ENTER) {

    stroke(244); 
    noFill(); 
    rect( rectX, rectY, 
      100, 30); 
    stroke(2, 22, 220); 
    textSize(35); 
    fill(255); 
    text("3D", rectX+20, rectY +25+3);
  } else {
    // in 3D mode 

    // prepare for 2D
    hint(DISABLE_DEPTH_TEST); 
    camera(); 
    noLights(); 

    // 2D code 
    stroke(244); 
    noFill(); 
    rect( rectX, rectY, 
      100, 30); 
    stroke(2, 22, 220); 
    textSize(35); 
    fill(255); 
    // text("2e", xs+22, ys);
    text("2D", rectX+10, rectY +25+3); 

    // reset for 3D again 
    hint(ENABLE_DEPTH_TEST); 
    lights();
  }//else
}//func 

// ==================================================================

class ListOfVectors {

  ArrayList<PVector> list = new ArrayList();
  color col2D=color(0);

  void display () {

    beginShape();
    stroke(col2D);
    for (PVector pv : list) {
      vertex(pv.x, pv.y);
    }//for
    endShape();
  }//method
  //
}//class
//

```

---

<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 19, 2021, 11:45pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/30 "2021-02-19T23:45:58Z")

</div>

@Chrisir

You are cool and creative, and thank you for your help

The best way to refine the information inside the mind and accept it and the ability to deal with it is multiple examples of the same code because it enables you to compare different points in a specific programming function

---

<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 19, 2021, 11:59pm UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/31 "2021-02-19T23:59:18Z")

</div>

@Chrisir

hi while rotating crash

---

<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 20, 2021, 12:13am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/32 "2021-02-20T00:13:28Z")

</div>

what about to delete the last draw when switch from 3d to 2d like this

```auto
void DeletePoints() {

  for (int i=points.size()-1; i>=0; i--) {
   
    points.remove(i);
  }  
  background(0);
  reset();
}

//click on reset button
void mousePressed() {

  if (mouseX >rectX && mouseX < rectX+100 && mouseY > rectY && mouseY < rectY+30) {

    DeletePoints();
  }
}

//make reset button
void reset() {

  stroke(255);
  noFill();
  rect( rectX, rectY, 100, 30);
  stroke(255,0,0);
  textSize(35);
  text("reset" , rectX+10 ,rectY +25);
}

```

---

<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: [March 2, 2021, 6:56am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/33 "2021-03-02T06:56:31Z")

</div>

@Chrisir  
i need your help if you please and thank you  
for many days i am trying to do this i could not

how to use vertex grid instead draw line in this sketch i want to replace this part :

```auto
void draw() {
  //
  if (state == STATE_ENTER) {
    // ENTER POINTS ----------------
    background(111);
    showList();
  } 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+=1) {
      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;
      }
    }

```

in this sketch

```auto
//

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

PImage hm;

int xstep = 1;
int max_height = 120;

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

void setup() {
  size(500, 500, P3D);
  background(1);
  rectX = width/2 -50;
  rectY = height*.8 +30;
}

void draw() {
  //
  if (state == STATE_ENTER) {
    // ENTER POINTS ----------------
    background(111);
    showList();
  } 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
}

void mousePressed () {

  if (mouseX>rectX&&
    mouseX<rectX+100 &&
    mouseY>rectY&&
    mouseY<rectY+30) {
    //submit
    stroke(111);
    fill(111);
    rect( rectX-12, rectY-12, 
      100+12, 30+12);

    hm = get();
    state = SHOW_3D;
    return;
  }

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

  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}

void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  show();
  //if (mouseX >rectX && mouseX < rectX+100 && mouseY > rectY && mouseY < rectY+30) {
  //}
}

void show() {
  stroke(244);
  noFill();
  rect( rectX, rectY, 
    100, 30);
  stroke(2, 22, 220);
  textSize(35);
  text("3D", rectX+10, rectY +25+3);
}
//

```

and use vertex gird

```auto
int cols, rows;
int scl = 13;
int w = 1200;
int h = 1600;

float flying = 0;

//int scl = 10;
//int w = 1900;
//int h = 2600;

float[][] terrain;
 
void setup() {
  size (600, 600, P3D);
  cols = w / scl;
  rows = h / scl;
  terrain = new float[cols][rows];
}

void draw() {
  
 // flying -= 0.06;
  
  float yoff = 1;
  
  for (int y = 0; y < rows - 1; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -7, 7);
      xoff += 0.1;
    }
    yoff += 0.1;
  }
  
  
  background(0);
  stroke(255);
  noFill();
  
  translate(width / 2, height / 2 - 50);
  rotateX(PI/3);
  translate(- w / 2, - h / 2);
  
  for (int y = 0; y < rows - 1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      vertex(x * scl, y * scl, terrain[x][y]);
      vertex(x * scl, (y + 1) * scl, terrain[x][y+1]);
    }
    endShape();
  }
}

```

---

<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: [March 2, 2021, 7:07am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/34 "2021-03-02T07:07:11Z")

</div>

@Chrisir

i have found this sketch but i need draw with mouse instead image

```auto
int cols, rows;
int scl = 20;
int w = 2000;
int h = 1600;
 
float flying = 0;
 
float[][] terrain;
 
PImage img;
 
void setup() {
  size(600, 600, P3D);
  cols = w / scl;
  rows = h/ scl;
  terrain = new float[cols][rows];
  String http = "http://";
  img = loadImage( http + "www.tfguy44.com/MyIcon1.PNG");
  texture(img);
}
 
 
void draw() {
 
  flying -= 0.1;
 
  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }
 
 
 
  background(0);
  //stroke(255);
  //noFill();
 
  translate(width/2, height/2+50);
  rotateX(PI/3);
  scale(0.5);
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    texture(img);
    for (int x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y], map(x,0,cols,0,img.width), map(y,0,rows,0,img.height) );
      vertex(x*scl, (y+1)*scl, terrain[x][y+1], map(x,0,cols,0,img.width), map(y+1,0,rows,0,img.height));
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();
  }
}

```

---

<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: [March 2, 2021, 7:29am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/35 "2021-03-02T07:29:46Z")

</div>

@Chrisir

if you kind when you have time adpt this code to use it to draw with mouse instead of image.png

😘 😘 😘

thanks in advance

---

<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: [March 2, 2021, 11:14am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/36 "2021-03-02T11:14:23Z")

</div>

```auto

// https://discourse.processing.org/t/3d-drawing-with-mouse/27738/33

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

PImage hm;

int xstep = 1;
int max_height = 120;

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

int cols, rows;
int scl = 2;
int w = 1200;
int h = 900;

float flying = 0;

//int scl = 10;
//int w = 1900;
//int h = 2600;

float[][] terrain;

void setup() {
  size(1200, 900, P3D);

  background(111);
  rectX = width/2 -50;
  rectY = height*.8 +30;

  cols = w / scl;
  rows = h / scl;
  terrain = new float[cols][rows];
}

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

    // ENTER POINTS in 2D ----------------

    background(111);
    stroke(255);
    noFill(); 
    rect(0, 0, cols, rows);
    fill(255); 
    text("<- This is your canvas. In 3D use mouse to rotate.", cols+23, rows/2);  
    showList();
    //
  } else if (state == SHOW_3D) {

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

    background(0);
    lights();

    // stroke(255);
    // noFill();
    fill(255, 0, 0);
    noStroke(); 

    translate(width / 2, height / 2 - 50);
    rotateX(map(mouseY, 0, height, -TWO_PI, TWO_PI));  

    rotateX(PI/3);
    translate(- w / 2, - h / 2);

    for (int y = 0; y < rows - 1; y++) {
      beginShape(TRIANGLE_STRIP);
      for (int x = 0; x < cols; x++) {
        vertex(x * scl, y * scl, terrain[x][y]);
        vertex(x * scl, (y + 1) * scl, terrain[x][y+1]);
      }
      endShape();
    }

    //
  }//else if
}

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

void mousePressed () {

  // Check whether we are in the correct state 
  if (state != STATE_ENTER) {
    return;
  }

  // check Button
  if (mouseX>rectX &&
    mouseX<rectX+100 &&
    mouseY>rectY &&
    mouseY<rectY+30) {

    //submit ************

    stroke(111);
    fill(111);
    rect( rectX-12, rectY-12, 
      100+12, 30+12);
    noFill();
    rect(0, 0, cols, rows);

    hm = get(0, 0, cols, rows);

    float yoff = 1;

    for (int y = 0; y < rows; y++) {
      float xoff = 0;
      for (int x = 0; x < cols; x++) {
        color cc = hm.get(x, y); 
        print(brightness(cc), " "); 
        terrain[x][y] = map(brightness(cc), 0, 120, 7, -66);
        xoff += 0.1;
      }
      yoff += 0.1;
    }

    state = SHOW_3D;
    return;
  } //if

  // ************

  // draw stuff
  PVector pv = new PVector(mouseX, mouseY) ;
  list.add(pv);
}

void showList() {
  beginShape();
  if (showFill) { 
    fill( 255, 0, 0);
  } else { 
    noFill();
  }
  noStroke();
  stroke(0); 
  for (PVector pv : list) {
    vertex(pv.x, pv.y);
  }
  endShape();
  show();
  //if (mouseX >rectX && mouseX < rectX+100 && mouseY > rectY && mouseY < rectY+30) {
  //}
}

void show() {
  stroke(244);
  noFill();
  rect( rectX, rectY, 
    100, 30);
  stroke(2, 22, 220);
  textSize(35);
  text("3D", rectX+10, rectY +25+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: [March 2, 2021, 11:47am UTC](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/37 "2021-03-02T11:47:17Z")

</div>

@[Chrisir](https://discourse.processing.org/u/Chrisir)  
Thank you very much and, God willing, I would return your beautiful work to you if circumstances were possible

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