Make smiley go bigger or smaller without changing

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:

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! :slight_smile:

(the image is what it should look like).2020-02-27 (5)

1 Like

Hi there,

Welcome to the forum! :wink:

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 :

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
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);
}
3 Likes

Studio.ProcessingTogether.com/sp/pad/export/ro.9G5yFfYFFDXi1

1 Like

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

2 Likes