# Make a program with percentage

**URL:** <https://discourse.processing.org/t/make-a-program-with-percentage/6677>\
**Category:** Processing.py\
**Created:** [December 16, 2018, 10:18pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677 "2018-12-16T22:18:21Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 16, 2018, 10:18pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/1 "2018-12-16T22:18:21Z")

</div>

Hello, I would like to create a code where we can move shield shapes on a warrior and know the percentage of the warrior covered, I unfortunately do not know how to do it, help me please

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 16, 2018, 10:23pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/2 "2018-12-16T22:23:01Z")

</div>

Can you describe more what you are trying to do? Are you dragging an outline of a shield with the mouse on top of an outline of a person, and calculating the amount of the person visible based on where you dragged the shield?

Are you putting on different shields, always held in the hand, or moving one shield around to different places on the body?

More details please!

One solution would be to use a mask() and count the number of visible pixels to find the exposed area.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 17, 2018, 7:49pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/3 "2018-12-17T19:49:52Z")

</div>

Thank you for replying, I wish I could move different shield with the mouse on any part of the warrior’s body, and then know how many pixels belong to the warrior are covered by the different shields. I’m really not very good at this software so it’s a difficult task for me.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 17, 2018, 7:51pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/4 "2018-12-17T19:51:49Z")

</div>

I recommend you start by making a sketch like this:

1. it shows a circle (the warrior)
2. a rectangle (the shield) is dragged around by the mouse – don’t even bother dropping it, just draw it where-ever the mouse is.

Why don’t you start by making that sketch and sharing it here in this thread – then we can explore how to pick-up / drop the shield, and how measure the overlap.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 17, 2018, 7:55pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/5 "2018-12-17T19:55:36Z")

</div>

Ok, I’m doing this tomorrow and I’ll send it to you, thank you very much.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 18, 2018, 9:42pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/6 "2018-12-18T21:42:01Z")

</div>

![IMG_20181218_222820](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5c5402875558d8879cfd7314091fc2ee1673028e.jpeg) Here is my schema, I draw the basic plan for my animation.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 18, 2018, 11:00pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/7 "2018-12-18T23:00:04Z")

</div>

Thanks for this drawing. It makes some things about your concept clear!

By a sketch, I also meant a sketch in Processing – for example, like this.

```auto
void draw(){
  background(0);
  fill(255,0,0);
  rect(25, 25, 50, 75);
  fill(0,0,255);
  ellipse(mouseX, mouseY, 50, 50);
}

```

![37%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f100c59b5e3e91688875c46a41a50513e155b91c.png)

Have you done any programming in Processing (or anything else) before, or is this your very first sketch?

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 19, 2018, 3:01pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/8 "2018-12-19T15:01:41Z")

</div>

Yes, my first program on this site and I do not have much computer knowledge, I did this skit to demonstrate my presentation topic for the French BAC.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 19, 2018, 3:41pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/9 "2018-12-19T15:41:42Z")

</div>

![IMG_20181219_161857](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c23d27f7f1d4785a7a8baaa18fb3d1fda3efcd4e.jpeg) !  
Here’s what I already did, in my program I can only move the ellipse but I can not do the same for the other three shields.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 19, 2018, 3:44pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/11 "2018-12-19T15:44:20Z")

</div>

![IMG_20181219_162938](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4096b0894cc37a3315de1fa8a00807e226f99a21.jpeg)

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 19, 2018, 3:46pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/12 "2018-12-19T15:46:09Z")

</div>

![IMG_20181219_162959](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/583837b46c34142b0ab959bf88f5dee9bd9eae41.jpeg) Here’s what it gives after running the program

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 19, 2018, 6:50pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/13 "2018-12-19T18:50:24Z")

</div>

Hi @justin38 –

Thank youi. Please don’t post screenshots of your code. Instead, cut and paste your code into the forum, and highlight and format it with the \</\> editor button.

Forum members can’t run or debug your screenshot – and we shouldn’t have to type your whole program back in to get it to work!

I notice from your screenshot that you are using Python mode rather than Java mode, so I will move this conversation into that part of the forum. I also notice that you are using a combination of primitive shapes and vertex shapes.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 19, 2018, 7:07pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/14 "2018-12-19T19:07:46Z")

</div>

```auto
def setup():
    size(700,500)
    fill(200,200,0)
X=100
Y=100
def draw():
    global X,Y
    background(255)
    fill(255,255,0)   
    beginShape()
    vertex(250,400)
    vertex(250,240)
    vertex(267,230)
    vertex(284,230)
    vertex(284,225)
    vertex(274,220)
    vertex(274,205)
    vertex(284,190)
    vertex(316,190)
    vertex(326,205)
    vertex(326,220)
    vertex(316,225)
    vertex(316,230)
    vertex(333,230)
    vertex(350,240)
    vertex(350,400)
    endShape(CLOSE)
#save("guerrier.tif")
    fill(150)
    ellipse(X,Y,100,160)
#crée bouclier
    fill(150)
    rect(50,250,100,160)
#crée bouclier
    fill(150)
    ellipse(500,100,130,130)
#crée bouclier
    fill(150)
    beginShape()
    vertex(500,250)
    vertex(560,250)
    vertex(580,280)
    vertex(580,380)
    vertex(560,410)
    vertex(500,410)
    vertex(480,380)
    vertex(480,280)
    endShape(CLOSE)

def mouseDragged():
    global X,Y
    X=mouseX
    Y=mouseY

```

Hi, actually I use python, will it still be you if you change me part of the forum?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 19, 2018, 9:09pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/15 "2018-12-19T21:09:46Z")

</div>

I will still respond to Python questions, yes. Hopefully other Python users will also respond.

Now that you have a sketch

> One solution would be to use a mask()

You could use a PGraphics (or PGraphics.mask()) and then use PGraphics.get to count the number of visible pixels to find the exposed area.

1. Draw your warrior shape onto the PGraphics in white
2. Draw the shield shape in black
3. Count the number of white pixels on the PGraphics – this is your score.

> **[PGraphics / Reference](https://processing.org/reference/PGraphics.html)**
>
> Main graphics and rendering context, as well as the base API implementation for processing "core". Use this class if you need to draw into an off-screen graphics buffer. A PGraphics object can be cons…

> **[PImage / Reference](https://processing.org/reference/PImage.html)**
>
> Datatype for storing images. Processing can display .gif, .jpg, .tga, and .png images. Images may be displayed in 2D and 3D space. Before an image is used, it must be loade…

> **[get() / Reference](https://processing.org/reference/PImage_get_.html)**
>
> Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a…

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [December 23, 2018, 3:02pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/16 "2018-12-23T15:02:11Z")

</div>

Hello, I will try to do your technique and I will recontacterize if I can not do it or if I have a problem.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 1, 2019, 3:55am UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/17 "2019-01-01T03:55:55Z")

</div>

Here is a very simple example without PGraphics, written for Python mode.

The console prints the amount of warrior visible as a count of the white pixels and as a percentage of the white pixels. Move the shield (circle) over the warrior (rectangle) and watch the results change.

```auto
def setup():
  size(300, 200)
  noStroke()

def draw():
  background(0)
  fill(255)
  body_w = 100.0
  body_h = 150.0
  body_area = body_w * body_h
  rect(100, 50, 100, 150)
  fill(128)
  ellipse(mouseX, mouseY, 140, 140)
  body_exposed = count_color_pixels(color(255))
  body_percent_exposed = float(nfc(body_exposed / body_area, 2))
  print(body_exposed, body_percent_exposed)

def count_color_pixels(match_color):
  measure = 0
  loadPixels()
  for pix in pixels:
    if pix == match_color:
      measure = measure + 1
  return measure

```

In order to integrate this into a sketch with a different display (such as graphics), draw the simple measurement colors onto a PGraphics, and draw your display shapes onto the main canvas.

---

<div class="post-metadata">

**Author:** ![justin38](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@justin38](https://discourse.processing.org/u/justin38)\
**Post date:** [January 5, 2019, 10:14pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/18 "2019-01-05T22:14:16Z")

</div>

Hello, sorry for my absence. I did not understand everything in your program and when I want to execute it, it signals me an error in this line : body\_percent\_exposed = float (nfc(body\_exposed / body\_area, 2)). With writing:  
“invalid litteral for float : 1.00”

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 6, 2019, 7:09pm UTC](https://discourse.processing.org/t/make-a-program-with-percentage/6677/19 "2019-01-06T19:09:46Z")

</div>

> [@justin38](#):
>
> “invalid literal for float : 1.00”

Strange. The sketch works as given. Perhaps you made a copy and paste error?

My best guess – perhaps you have non-English language settings that write render floats with a comma, and that is causing an error for the parser? I really don’t know. This works in Python mode in PDE 3.4

Does this work?

```
print(1.00)
print('1.00')
print(float(1.00))
print(float('1.00'))

```

> 1.0  
> 1.00  
> 1.0  
> 1.0