# Make smiley go bigger or smaller without changing

**URL:** <https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173>\
**Category:** Coding Questions\
**Created:** [February 27, 2020, 10:35am UTC](https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173 "2020-02-27T10:35:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![M.juliet](https://avatars.discourse-cdn.com/v4/letter/m/43a26b/32.png) [@M.juliet](https://discourse.processing.org/u/M.juliet)\
**Post date:** [February 27, 2020, 10:35am UTC](https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173/1 "2020-02-27T10:35:32Z")

</div>

Hi, I’m writing some code where I need to draw smiley’s. Now I already have the smiley’s but I need to change the position and the size of the smiley with functions. The only thing I still need to do is change the size but every time I change it, the eyes and the mouth of the smiley don’t stay in place.

This is my code:

```auto
void setup(){
    size(500, 500);
    frameRate(30);
}

void draw(){
    background(200);
    background(#C2C6F0);
    smiley ();
    positionSmiley (300, 300);
    sizeSmiley();

}

void smiley (){

    //head
    ellipse(100,100,160,160);
    fill (#000000);
    strokeWeight(1);

    //eyes
    ellipse (70, 80, 15, 15); // left
    ellipse (130, 80, 15, 15); // right
    strokeWeight(1);
    fill(#F02222);

    fill (#CEB090);
    strokeWeight(15);

    //mouth
    line(70, 130, 130, 130);
    strokeWeight(1);
}

void positionSmiley (float x, float y){
  
    ellipse(x+100,y+100,160,160);
    fill (#000000);
    strokeWeight(1);

    ellipse (x+70, y+80, 15, 15); // left
    ellipse (x+130, y+80, 15, 15); // right
    strokeWeight(1);
    fill(#F02222);

    fill (#CEB090);
    strokeWeight(15);

    line(x+70, y+130, x+130, y+130);
    strokeWeight(1);
}

void sizeSmiley (){

}

```

Help much appreciated! 🙂

(the image is what it should look like). ![2020-02-27 (5)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/abba20354fad7c48ef4559e2ee3ed78f9a7841af.png)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 27, 2020, 11:16am UTC](https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173/2 "2020-02-27T11:16:33Z")

</div>

Hi there,

Welcome to the forum! 😉

_Remember that you can format your code by using the `</>` parameter in the message editor._

First of all, you should consider making your drawing functions as more generic as possible by giving them the parameters of where and how the smiley should be drawn.

In fact, you are calling two functions (`smiley()` and `positionSmiley()`) that have exactly the same behavior.

This is an example of how it would look :

```auto
void drawSmiley(float x, float y, color smiley_color, float size){
  //Draw the smiley at location (x,y)
  //With the ellipse color as smiley_color
  //The size is controlling the scale of the smiley
}

```

For the size, one solution is to give a `size` parameter and in your smiley function, then you draw each elements (eyes, mouth and ellipse) proportional to that size.

This could be the solution :

> **CODE**
>
> ```auto
> void setup() {
> size(500, 500);
> }
> 
> void draw() {
> background(#C2C6F0);
>   
> //Smiley size proportional to mouseX position
> float smiley_size = map(mouseX, 0, width, 0, 400);
>   
> //We draw the smiley in the middle of the screen
> drawSmiley(width/2, height/2, color(#EFF02C), smiley_size);
> }
> 
> void drawSmiley(float x, float y, color smiley_color, float size){
> //Head
> strokeWeight(5);
> fill(smiley_color);
> ellipse(x, y, size, size);
>   
> //Eyes
> float face_factor = 6;
> strokeWeight(size / 10);
> stroke(0);
> point(x - size/face_factor, y - size/face_factor);
> point(x + size/face_factor, y - size/face_factor);
>   
> //Mouth
> line(x - size/face_factor, y + size/face_factor, 
> x + size/face_factor, y + size/face_factor);
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 27, 2020, 12:59pm UTC](https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173/3 "2020-02-27T12:59:54Z")

</div>

> [@M.juliet](#):
>
> … but I need to change the position and the size of the smiley with functions.

[Studio.ProcessingTogether.com/sp/pad/export/ro.9G5yFfYFFDXi1](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9G5yFfYFFDXi1)

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 27, 2020, 3:48pm UTC](https://discourse.processing.org/t/make-smiley-go-bigger-or-smaller-without-changing/18173/4 "2020-02-27T15:48:09Z")

</div>

There is an excellent tutorial for beginner coders on youtube by Khan Academy that walks through the steps of resizing shapes with variable expressions.

[![](https://img.youtube.com/vi/KVBYgTrZXYI/maxresdefault.jpg "Resizing shapes with variable expressions | Computer Programming | Khan Academy") ](https://www.youtube.com/watch?v=KVBYgTrZXYI)