# Display Teapot and Graph

**URL:** https://discourse.processing.org/t/display-teapot-and-graph/2413
**Category:** Coding Questions
**Created:** [August 6, 2018, 12:38pm UTC](https://discourse.processing.org/t/display-teapot-and-graph/2413 "2018-08-06T12:38:09Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![DragosMDx](https://avatars.discourse-cdn.com/v4/letter/d/7feea3/32.png) [@DragosMDx](https://discourse.processing.org/u/DragosMDx)
#### Post date: [August 6, 2018, 12:38pm UTC](https://discourse.processing.org/t/display-teapot-and-graph/2413/1 "2018-08-06T12:38:09Z")

</div>

Hi,

I have the Teapot code [https://gist.github.com/cooperaj/10965142](https://gist.github.com/cooperaj/10965142) and I would like to know how can I create a graph in the right side with the values that the air plane receives ?

Any indications will be very helpful.

PS: I have the code for graph working, but I do not know to create a space on the right side in order to merge the codes after.

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [August 6, 2018, 12:50pm UTC](https://discourse.processing.org/t/display-teapot-and-graph/2413/2 "2018-08-06T12:50:42Z")

</div>

Let’s see it! Chances are good that you will want to render the teapot (airplane?) on one PGraphics object, and then draw the image from that object next to the graph.

Example:

```auto
PGraphics pg;

void setup(){
  size(400,200,P3D);
  pg = createGraphics(200,200,P3D);
}

void draw(){
  pg.beginDraw();
  // Am I, perhaps, a teapot in abstract?
  pg.background(60,0,0);
  pg.translate(100,100);
  pg.lights();
  pg.rotateX(map(mouseY,0,height,-PI,PI));
  pg.rotateY(map(mouseX%(width/2),0,width/2,-PI,PI));
  pg.noStroke();
  pg.fill(0,200,0);
  pg.box(90);
  pg.endDraw();
  background(0);
  // Am I, perhaps, a graph, unlabeled?
  stroke(200,200,200);
  line(220,20,220,180);
  line(220,180,380,180);
  stroke(200,0,0);
  line(240,160,260,60);
  line(260,60,280,100);
  line(280,100,300,20);
  // Ah, here is that teapot.
  image(pg, 0, 0);
}

```

Actually you might want to do the drawing to two different PGraphic objects… That way your 2D graph won’t look… wonky.

---

<div class="post-metadata">

### Author: ![DragosMDx](https://avatars.discourse-cdn.com/v4/letter/d/7feea3/32.png) [@DragosMDx](https://discourse.processing.org/u/DragosMDx)
#### Post date: [August 6, 2018, 2:01pm UTC](https://discourse.processing.org/t/display-teapot-and-graph/2413/3 "2018-08-06T14:01:17Z")

</div>

Excellent answer indeed!

Thank you!