Loading...
Logo
Processing Forum
I've tried over and over again to make EVERYTHING move but I just can't seem to grasp it. Can someone please help me with my code? It would be greatly appreciated. I want this 'character' to move with my mouse.


//STEVE is a hybrid of Hitler, a duck, and a lego

void setup() {
size(500, 500);
smooth();
background(255);
strokeWeight(3);
frameRate(30);
}

void draw() {
  background(255);
  ellipseMode(CENTER);
  rectMode(CENTER);

//head
fill(#FAFF12);
rect(250, 200, 100, 100, 3, 6, 12, 18);

//hair
stroke(3);
fill(0);
ellipse(238, 150, 35, 15);
ellipse(265, 150, 45, 18);
ellipse(277, 150, 45, 18);

noStroke();
fill(0);
arc(232, 152, 25, 25, HALF_PI, PI);
fill(#AD343E);
arc(215, 152, 25, 25, HALF_PI, PI);

//eyes

noStroke();
fill(0);
arc(235, 200, 14, 14, 0, PI+QUARTER_PI, CHORD);
arc(265, 200, 14, 14, -2, PI+QUARTER_PI, CHORD);

//brows
stroke(15);
fill(0);
quad(225,185,235,175,230,180,245,190);//left brow
quad(260, 185, 270, 180, 275, 185, 260, 190); //right brow

//mouth
fill(#ff0000);
stroke(0);
strokeWeight(3);
ellipse(250, 227, 30, 35);
fill(0);
ellipse(250,227,25,15);
}
void mousePressed() {
  println("I am STEVE");
  println("One does NOT simply");
  println("Exit!");
}




Thanks a bunch!
Shanimal

Replies(5)

I wrapped the drawing of steve inside of function drawSteve(). As you have been drawing steve starting with coorindate 250,200 i had to "undo" this by calling translate(-250,-200) so now you can just assume that drawSteve() always draws steve at coordinate 0,0 .

This is why inside of draw() function I use translate(mouseX, mouseY) to move "centre of coordinates" to where mouse is. Thus resulting in steve drawn where the mouse is.



Copy code
  1. //STEVE is a hybrid of Hitler, a duck, and a lego

  2. void setup() {
  3. size(500, 500);
  4. smooth();
  5. background(255);
  6. strokeWeight(3);
  7. frameRate(30);

  8.   ellipseMode(CENTER);
  9.   rectMode(CENTER);

  10. }

  11. void draw(){
  12.     background(255);
  13.     
  14.     translate(mouseX, mouseY);
  15.     drawSteve();
  16. }

  17. void drawSteve() {
  18.   // because looks like everything here is shifted 250,200
  19.   // we translate it back, so that top-left corner is 0,0
  20.   translate(-250,-200);
  21. //head
  22. fill(#FAFF12);
  23. rect(250, 200, 100, 100, 3, 6, 12, 18);

  24. //hair
  25. stroke(3);
  26. fill(0);
  27. ellipse(238, 150, 35, 15);
  28. ellipse(265, 150, 45, 18);
  29. ellipse(277, 150, 45, 18);

  30. noStroke();
  31. fill(0);
  32. arc(232, 152, 25, 25, HALF_PI, PI);
  33. fill(#AD343E);
  34. arc(215, 152, 25, 25, HALF_PI, PI);

  35. //eyes

  36. noStroke();
  37. fill(0);
  38. arc(235, 200, 14, 14, 0, PI+QUARTER_PI, CHORD);
  39. arc(265, 200, 14, 14, -2, PI+QUARTER_PI, CHORD);

  40. //brows
  41. stroke(15);
  42. fill(0);
  43. quad(225,185,235,175,230,180,245,190);//left brow
  44. quad(260, 185, 270, 180, 275, 185, 260, 190); //right brow

  45. //mouth
  46. fill(#ff0000);
  47. stroke(0);
  48. strokeWeight(3);
  49. ellipse(250, 227, 30, 35);
  50. fill(0);
  51. ellipse(250,227,25,15);
  52. }
  53. void mousePressed() {
  54.   println("I am STEVE");
  55.   println("One does NOT simply");
  56.   println("Exit!");
  57. }
Thank you SO much dimkir! I'm still new to this processing program and you were a great help :D
:)

I wonder how did you manage to draw this "Steve"? Did you first draw it in Illustrator or smth? Or did you draw it directly in processing? It kinda looks a bit like images they have on KhanAcademy, but made by someone who knows how to draw.

I actually drew everything in processing. but every bit of it was drawn up mathematically
Another interesting approach is to draw once and store it as a PImage.
It's much faster than keep drawing it over & over.

An interesting post about drawing Angry Bird. It was tweaked to be save the whole thing as a PImage:
https://forum.processing.org/topic/wanna-change-direction-with-keypressed

Another example is Wall.E. But unfortunately, that post was deleted.
But I've got the source code of it all:

Wall_E.pde:

Copy code
    /** 
     * Wall.E (v2.2)
     * by Victoria (2013/Aug)
     * mod GoToLoop
     * 
     * http://forum.processing.org/topic/
     * help-i-d-like-to-make-this-smoother-any-help-would-be-great-thanks
     *
     * http://forum.processing.org/topic/need-help-with-mousex-and-mousey
     *
     * http://studio.processingtogether.com/sp/pad/export/ro.9ck0KLYubLcZG/latest
     *
     * http://studio.processingtogether.com/sp/pad/export/ro.9bY07S95k2C2a/latest
     * http://studio.processingtogether.com/sp/pad/export/ro.9lSicL0a3WMfi/latest
     */
    
    final static int NUM = 1000, DIM = 3, SPD = 10, FPS = 60;
    final static float CHANCE = .1;
    
    final static short[] starX = new short[NUM];
    final static short[] starY = new short[NUM];
    final static color[] starC = new color[NUM];
    
    static PImage robotImg;
    
    static int x, y;     // positions
    static int w, h;     // dimensions
    static int ww, hh;   // radii
    static int gw, gh;   // (canvas - radii)
    
    static boolean north, south, west, east;
    
    void setup() {
      size(800, 600);
      frameRate(FPS);
      noSmooth();
      strokeWeight(DIM);
      imageMode(CENTER);
    
      for (int i = 0; i != NUM; i++) {
        starX[i] = (short) random(width);
        starY[i] = (short) random(height);
        starC[i] = (color) random(0200, 0400);
      }
    
      robotImg = createRobot();
      initVars(width, height);
    }
    
    void draw() {
      background(0);
    
      for (int i = 0; i != NUM; i++) {
        if (random(1) < CHANCE)   starC[i] = (color) random(0200, 0400);
        stroke(starC[i]);
        point(starX[i], starY[i]);
      }
    
      moveRobot();
      confineToEdges();
    
      image(robotImg, x, y);
    }
    
    void keyPressed() {
      setDirection(keyCode, true);
    }
    
    void keyReleased() {
      setDirection(keyCode, false);
    }
    
    static final void setDirection(int k, boolean decision) {
      if      (k == UP    | k == 'W')   north = decision;
      else if (k == DOWN  | k == 'S')   south = decision;
      else if (k == LEFT  | k == 'A')   west  = decision;
      else if (k == RIGHT | k == 'D')   east  = decision;
    }
    
    static final void moveRobot() {
      x += (east?  SPD : 0) - (west?  SPD : 0);
      y += (south? SPD : 0) - (north? SPD : 0);
    }
    
    static final void confineToEdges() {
      x = constrain(x, ww, gw);
      y = constrain(y, hh, gh);
    }
    
    static final void initVars(int wdt, int hgt) {
      x = wdt>>1;            // position @ center of screen 
      y = hgt>>1;
    
      w = robotImg.width>>2; // robot dimensions
      h = robotImg.height;
    
      ww = w>>1;             // distances from center (radii)
      hh = h>>1;
    
      gw = wdt - ww;         // diff. of (canvas dimensions - obj. radii)
      gh = hgt - hh;
    }
    


Robot.pde:

Copy code
    // MY CUSTOM FUNCTION FOR MY ROBOT I CALL IT LIKE THIS: robot();
    PImage createRobot() {
      final PGraphics pg = createGraphics(400, 250, JAVA2D);
    
      pg.beginDraw();
      pg.smooth();
      pg.background(0, 0);
    
      //body
      //1stpointx,1y,2ndpointx,2pointy,x3ypoint
      //      \    \    \      /      /  \
      pg.fill(#3A3535);
      pg.triangle(180, 210, 155, 185, 155, 220);//leg gear left big triangle
      pg.fill(#3A3535);
      pg.triangle(240, 210, 265, 185, 265, 220);//leg gear right big triangle
      pg.fill(#ffffff);
      pg.rect(110, 140, 40, 100);//leftleg done
      pg.fill(#fdc145);
      pg.rect(205, 50, 10, 30);//neckjoint done
      pg.fill(#dea52e);
      pg.rect(150, 80, 120, 120);//body done
      pg.fill(#ffffff);
      pg.rect(270, 140, 40, 100);//rightleg done
      pg.fill(#a47b24);
      pg.rect(168, 20, 40, 30);//lefthead done
      pg.fill(#c8c8c8);
      pg.rect(170, 22, 36, 26);//leftheadlining
      pg.fill(#a47b24);
      pg.rect(212, 20, 40, 30);//righthead done
      pg.fill(#c8c8c8);
      pg.rect(214, 22, 36, 26);//rightheadlining
      pg.fill(#a47b24);
      pg.rect(150, 75, 34, 5);//shoulderleft
      pg.fill(#a47b24);
      pg.rect(236, 75, 34, 5);//shoulderright
      pg.fill(#d7d7d7);
      pg.rect(186, 76, 48, 4);//buttonholder
      pg.fill(#666666);
      pg.rect(188, 74, 6, 2);//button1
      pg.fill(#666666);
      pg.rect(196, 74, 6, 2);//button2
      pg.fill(#666666);
      pg.rect(204, 74, 6, 2);//button3
      pg.fill(#666666);
      pg.rect(225, 74, 6, 2);//button4
      pg.fill(#a47b24);
      pg.rect(150, 184, 120, 16);//bodydetail4
      pg.fill(#fdc145);
      pg.rect(155, 110, 110, 90);//bodydetail5
      pg.stroke(#fdc145);
      pg.fill(#dea52e);
      pg.rect(179, 120, 5, 35);//bodydetail1
      pg.fill(#dea52e);
      pg.rect(209, 120, 5, 35);//bodydetail2
      pg.fill(#dea52e);
      pg.rect(239, 120, 5, 35);//bodydetail3
      pg.stroke(#000000);
    
      //console
      pg.fill(#c8c8c8);
      pg.rect(150, 80, 120, 30);//console done
      pg.fill(#c8c8c8);
      pg.rect(185, 80, 50, 30);//innerconsole
      pg.fill(#c8c8c8);
      pg.rect(187, 82, 21, 26);//fanlining
      pg.fill(#c8c8c8);
      pg.rect(213, 80, 22, 30);//screenlining
      pg.fill(#676767);
      pg.rect(189, 84, 17, 10);//fan
      pg.fill(#9d9d9d);
      pg.rect(191, 96, 6, 10);//buttonlining
      pg.fill(#b73b3b);
      pg.rect(192, 98, 4, 5);//redbutton
      pg.fill(#b73b3b);
      pg.ellipse(194, 101, 3, 3);//redbutton
      pg.stroke(#676767);
      pg.fill(#676767);
      pg.rect(189, 84, 17, 2);//fanlines1hori
      pg.fill(#c8c8c8);
      pg.rect(189, 86, 17, 2);//fanlines2hori
      pg.fill(#676767);
      pg.rect(189, 88, 17, 2);//fanlines3hori
      pg.fill(#c8c8c8);
      pg.rect(189, 90, 17, 2);//fanlines4hori
      pg.fill(#c8c8c8);
      pg.rect(193, 84, 2, 10);//fanlines1verti
      pg.fill(#c8c8c8);
      pg.rect(199, 84, 2, 10);//fanlines1verti
      pg.fill(#222222);
      pg.stroke(#000000);
      pg.rect(215, 82, 18, 26);//screen
      pg.stroke(#9d9d9d);
      pg.fill(#9d9d9d);
      pg.rect(236, 100, 33, 3);//consoleright1
      pg.fill(#9d9d9d);
      pg.rect(236, 87, 33, 3);//consoleright2
      pg.fill(#9d9d9d);
      pg.rect(151, 100, 33, 3);//consoleleft1
      pg.fill(#9d9d9d);
      pg.rect(151, 87, 33, 3);//consoleleft2
      pg.stroke(#000000);
    
      //right leg detail-complete
      pg.fill(#b6b6b6);
      pg.rect(270, 140, 40, 8);//line1
      pg.fill(#b1b1b1);
      pg.rect(270, 148, 40, 8);//line2
      pg.fill(#acacac);
      pg.rect(270, 156, 40, 8);//line3
      pg.fill(#a3a3a3);
      pg.rect(270, 164, 40, 8);//line4
      pg.fill(#9a9a9a);
      pg.rect(270, 172, 40, 8);//line5
      pg.fill(#8c8c8c);
      pg.rect(270, 180, 40, 8);//line6
      pg.fill(#818181);
      pg.rect(270, 188, 40, 8);//line7
      pg.fill(#767676);
      pg.rect(270, 196, 40, 8);//line8
      pg.fill(#6a6a6a);
      pg.rect(270, 204, 40, 8);//line9
      pg.fill(#5e5e5e);
      pg.rect(270, 212, 40, 8);//line10
      pg.fill(#505050);
      pg.rect(270, 220, 40, 8);//line11
      pg.fill(#494949);
      pg.rect(270, 228, 40, 8);//line12
      pg.fill(#3f3f3f);
      pg.rect(270, 236, 40, 8);//line13
      //1stpointx,1y,2ndpointx,2pointy,x3ypoint
      //      \    \    \      /      /  \
      pg.fill(#2C2828);
      pg.triangle(240, 210, 265, 210, 265, 225); //bottom triangle gear right
      pg.rect(260, 210, 10, 13);
      //1stpointx,1y,2ndpointx,2pointy,x3ypoint
      //      \    \    \      /      /  \
    
      //left leg detail-complete
      pg.fill(#b6b6b6);
      pg.rect(110, 140, 40, 8);//line1
      pg.fill(#b1b1b1);
      pg.rect(110, 148, 40, 8);//line2
      pg.fill(#acacac);
      pg.rect(110, 156, 40, 8);//line3
      pg.fill(#a3a3a3);
      pg.rect(110, 164, 40, 8);//line4
      pg.fill(#9a9a9a);
      pg.rect(110, 172, 40, 8);//line5
      pg.fill(#8c8c8c);
      pg.rect(110, 180, 40, 8);//line6
      pg.fill(#818181);
      pg.rect(110, 188, 40, 8);//line7
      pg.fill(#767676);
      pg.rect(110, 196, 40, 8);//line8
      pg.fill(#6a6a6a);
      pg.rect(110, 204, 40, 8);//line9
      pg.fill(#5e5e5e);
      pg.rect(110, 212, 40, 8);//line10
      pg.fill(#505050);
      pg.rect(110, 220, 40, 8);//line11
      pg.fill(#494949);
      pg.rect(110, 228, 40, 8);//line12
      pg.fill(#3f3f3f);
      pg.rect(110, 236, 40, 8);//line13
      //1stpointx,1y,2ndpointx,2pointy,x3ypoint
      //      \    \    \      /      /  \
      pg.fill(#2C2828);
      pg.triangle(155, 225, 155, 210, 180, 210); //bottom triangle gear left
      pg.rect(150, 210, 10, 13); //rect gear left
    
      //TRACKS
      //1stpointx,1y,2ndpointx,2pointy,x3ypoint
      //      \    \    \      /      /  \
      pg.fill(#000000);
      pg.triangle(113, 146, 118, 142, 124, 146);//line1track1
      pg.fill(#000000);
      pg.triangle(132, 146, 138, 142, 144, 146);//line1track2
      pg.fill(#000000);
      pg.triangle(113, 154, 118, 150, 124, 154);//line2track1
      pg.fill(#000000);
      pg.triangle(132, 154, 138, 150, 144, 154);//line2track2
      pg.fill(#000000);
      pg.triangle(113, 162, 118, 158, 124, 162);//line3track1
      pg.fill(#000000);
      pg.triangle(132, 162, 138, 158, 144, 162);//line3track2
      pg.fill(#000000);
      pg.triangle(113, 170, 118, 166, 124, 170);//line4track1
      pg.fill(#000000);
      pg.triangle(132, 170, 138, 166, 144, 170);//line4track2
      pg.fill(#000000);
      pg.triangle(113, 178, 118, 174, 124, 178);//line5track1
      pg.fill(#000000);
      pg.triangle(132, 178, 138, 174, 144, 178);//line5track2
      pg.fill(#000000);
      pg.triangle(113, 186, 118, 182, 124, 186);//line6track1
      pg.fill(#000000);
      pg.triangle(132, 186, 138, 182, 144, 186);//line6track2
      pg.fill(#000000);
      pg.triangle(113, 194, 118, 190, 124, 194);//line7track1
      pg.fill(#000000);
      pg.triangle(132, 194, 138, 190, 144, 194);//line7track2
      pg.fill(#000000);
      pg.triangle(113, 202, 118, 198, 124, 202);//line8track1
      pg.fill(#000000);
      pg.triangle(132, 202, 138, 198, 144, 202);//line8track2
      pg.fill(#000000);
      pg.triangle(113, 210, 118, 206, 124, 210);//line9track1
      pg.fill(#000000);
      pg.triangle(132, 210, 138, 206, 144, 210);//line9track2
      pg.fill(#000000);
      pg.triangle(113, 218, 118, 214, 124, 218);//line10track1
      pg.fill(#000000);
      pg.triangle(132, 218, 138, 214, 144, 218);//line10track2
      pg.fill(#000000);
      pg.triangle(113, 226, 118, 222, 124, 226);//line11track1
      pg.fill(#000000);
      pg.triangle(132, 226, 138, 222, 144, 226);//line11track2
      pg.fill(#000000);
      pg.triangle(113, 234, 118, 230, 124, 234);//line12track1
      pg.fill(#000000);
      pg.triangle(132, 234, 138, 230, 144, 234);//line12track2
      pg.fill(#000000);
      pg.triangle(113, 242, 118, 238, 124, 242);//line13track1
      pg.fill(#000000);
      pg.triangle(132, 242, 138, 238, 144, 242);//line13track2.
    
      pg.fill(#000000);
      pg.triangle(273, 146, 278, 142, 284, 146);//line1track1
      pg.fill(#000000);
      pg.triangle(292, 146, 297, 142, 303, 146);//line1track2
      pg.fill(#000000);
      pg.triangle(273, 154, 278, 150, 284, 154);//line2track1
      pg.fill(#000000);
      pg.triangle(292, 154, 297, 150, 303, 154);//line2track2
      pg.fill(#000000);
      pg.triangle(273, 162, 278, 158, 284, 162);//line3track1
      pg.fill(#000000);
      pg.triangle(292, 162, 297, 158, 303, 162);//line3track2
      pg.fill(#000000);
      pg.triangle(273, 170, 278, 166, 284, 170);//line4track1
      pg.fill(#000000);
      pg.triangle(292, 170, 297, 166, 303, 170);//line4track2
      pg.fill(#000000);
      pg.triangle(273, 178, 278, 174, 284, 178);//line5track1
      pg.fill(#000000);
      pg.triangle(292, 178, 297, 174, 303, 178);//line5track2
      pg.fill(#000000);
      pg.triangle(273, 186, 278, 182, 284, 186);//line6track1
      pg.fill(#000000);
      pg.triangle(292, 186, 297, 182, 303, 186);//line6track2
      pg.fill(#000000);
      pg.triangle(273, 194, 278, 190, 284, 194);//line7track1
      pg.fill(#000000);
      pg.triangle(292, 194, 297, 190, 303, 194);//line7track2
      pg.fill(#000000);
      pg.triangle(273, 202, 278, 198, 284, 202);//line8track1
      pg.fill(#000000);
      pg.triangle(292, 202, 297, 198, 303, 202);//line8track2
      pg.fill(#000000);
      pg.triangle(273, 210, 278, 206, 284, 210);//line9track1
      pg.fill(#000000);
      pg.triangle(292, 210, 297, 206, 303, 210);//line9track2
      pg.fill(#000000);
      pg.triangle(273, 218, 278, 214, 284, 218);//line10track1
      pg.fill(#000000);
      pg.triangle(292, 218, 297, 214, 303, 218);//line10track2
      pg.fill(#000000);
      pg.triangle(273, 226, 278, 222, 284, 226);//line11track1
      pg.fill(#000000);
      pg.triangle(292, 226, 297, 222, 303, 226);//line11track2
      pg.fill(#000000);
      pg.triangle(273, 234, 278, 230, 284, 234);//line12track1
      pg.fill(#000000);
      pg.triangle(292, 234, 297, 230, 303, 234);//line12track2
      pg.fill(#000000);
      pg.triangle(273, 242, 278, 238, 284, 242);//line13track1
      pg.fill(#000000);
      pg.triangle(292, 242, 297, 238, 303, 242);//line13track2.
    
      // to create the tracks I added 8 to all the y's number 
      // to create the y value for the tracks
      // so I could repeatedly get the exact same shape 
      // I need and the positioning. 
      // 2nd point triangle add 8 to y value.
    
      //arms
      pg.fill(#fdc145);
      pg.rect(100, 110, 50, 20);//leftupperarm done
      pg.fill(#fdc145);
      pg.rect(270, 110, 50, 20);//rightupperarm done
      pg.fill(#acacac);
      pg.rect(65, 113, 35, 13);//leftlowerarm done
      pg.fill(#acacac);
      pg.rect(320, 113, 35, 13);//rightlowerarm done
      pg.fill(#acacac);
      pg.rect(355, 114, 15, 10);//rightwrist
      pg.fill(#acacac);
      pg.rect(52, 114, 13, 10);//leftwirst
      pg.fill(#acacac);
      pg.rect(371, 105, 26, 12);//righthand1
      pg.fill(#acacac);
      pg.rect(371, 105, 13, 12);//righthand1.1
      pg.fill(#acacac);
      pg.rect(371, 120, 26, 12);//righthand2
      pg.fill(#acacac);
      pg.rect(371, 120, 13, 12);//righthand2.1
      pg.fill(#acacac);
      pg.rect(371, 115, 16, 8);//righthand3
      pg.fill(#acacac);
      pg.rect(24, 105, 26, 12);//lefthand1
      pg.fill(#acacac);
      pg.rect(24, 105, 13, 12);//lefthand1.1
      pg.fill(#acacac);
      pg.rect(24, 120, 26, 12);//lefthand2
      pg.fill(#acacac);
      pg.rect(24, 120, 13, 12);//lefthand2.1
      pg.fill(#acacac);
      pg.rect(35, 115, 16, 8);//lefthand3
    
      //head-complete
      pg.fill(#000000);
      pg.ellipse(194, 34, 20, 20);//eyeleft
      pg.ellipse(204, 25, 1, 1);//screw1
      pg.ellipse(174, 25, 1, 1);//screw2
      pg.ellipse(173, 44, 1, 1);//screw3
      pg.fill(#000000);
      pg.ellipse(226, 34, 20, 20);//eyeright
      pg.ellipse(217, 25, 1, 1);//screw1
      pg.ellipse(247, 25, 1, 1);//screw2
      pg.ellipse(247, 44, 1, 1);//screw3
      pg.fill(#a47b24);
      pg.ellipse(210, 39, 4, 8);//eyeconnecter
      pg.stroke(#330542);
      pg.fill(#330542);
      pg.ellipse(194, 34, 16, 16);//eyeleftrim
      pg.ellipse(226, 34, 16, 16);//eyerightrim
      pg.stroke(#7f6e85);
      pg.fill(#7f6e85);
      pg.ellipse(226, 34, 10, 10);//eyerightiris
      pg.ellipse(194, 34, 10, 10);//eyeleftiris
      pg.stroke(#000000);
      pg.fill(#000000);
      pg.ellipse(194, 34, 6, 6);//eyeleftpupil
      pg.ellipse(226, 34, 6, 6);//eyerightpupil
    
      //logo-complete
    
      pg.rect(192, 184, 1, 7);//donew
      pg.rect(198, 184, 1, 7);//donew
      pg.rect(204, 184, 1, 7);//donew
      pg.rect(208, 184, 1, 9);//donea
      pg.rect(216, 184, 1, 9);//donea
      pg.rect(220, 184, 1, 7);//donel
      pg.rect(229, 184, 1, 7);//donel
      pg.rect(192, 192, 6, 1);//horiw
      pg.rect(199, 192, 6, 1);//horiw
      pg.rect(208, 184, 9, 1);//horia
      pg.rect(208, 188, 9, 1);//horia
      pg.rect(220, 192, 7, 1);//horil
      pg.rect(229, 192, 7, 1);//horil
      pg.stroke(#c42c29);
      pg.fill(#c42c29);
      pg.ellipse(254, 189, 16, 16);//eoutline
      pg.stroke(0);
      pg.fill(#000000);
      pg.ellipse(241, 188, 4, 4);//blackdot
      pg.stroke(#ffffff);
      pg.fill(#ffffff);
      pg.rect(250, 184, 1, 7);//e
      pg.fill(#ffffff);
      pg.rect(250, 184, 7, 1);//e
      pg.fill(#ffffff);
      pg.rect(250, 188, 7, 1);//e
      pg.fill(#ffffff);
      pg.rect(250, 192, 7, 1);//e
    
      pg.endDraw();
      return pg.get();
    }