How can i make my function appear big and small?

p5.js Coding Questions
1

function setup() {
createCanvas(1000, 1000);
background(‘beige’);
noLoop()
angleMode(DEGREES);
//noStroke();

}

//s is my scale factor

function draw() {

dog(0,0,1);
dog(1,3,2);
//dog(4,3,3);
}

//This is my sketch part down below is my function that I created.

function dog(x,y,s){

strokeWeight(1s)
//The left foot
fill(‘Brown’)
beginShape();
vertex(s210+x, s380+y)
vertex(s200+x, s400+y)
vertex(s180+x, s400+y)
vertex(s170+x, s*370+y)
endShape();

//The left leg
fill('SaddleBrown')
beginShape();
vertex(s*210+x, s*380+y)
vertex(s*270+x, s*330+y)
vertex(s*200+x, s*340+y)
vertex(s*170+x, s*370+y)
endShape();

//The butt of the dog
beginShape();
vertex(s*270+x, s*330+y)
vertex(s*200+x, s*340+y)
vertex(s*220+x, s*280+y)
vertex(s*250+x, s*250+y)
endShape();

//The biggining of the tail
fill('Chocolate')

beginShape();
vertex(s*220+x, s*280+y)
vertex(s*200+x, s*250+y)
vertex(s*220+x, s*230+y)
vertex(s*230+x, s*270+y)
endShape();

//The middle of the tail
fill('DarkGoldenrod')
beginShape();
vertex(s*230+x, s*270+y)
vertex(s*220+x, s*230+y)
vertex(s*250+x, s*235+y)
vertex(s*250+x, s*270+y)
endShape();

//The end of the tail
triangle(s*245+x, s*290+y, s*230+x, s*270+y, s*250+x, s*270+y);

//The foot in the front on right side
fill('Brown')
beginShape();
vertex(s*510+x, s*370+y)
vertex(s*530+x, s*370+y)
vertex(s*500+x, s*410+y)
vertex(s*500+x, s*380+y)
endShape();

//The shorter part of the leg on the right side
fill('SaddleBrown')
beginShape();
vertex(s*500+x, s*410+y)
vertex(s*440+x, s*410+y)
vertex(s*470+x, s*360+y)
vertex(s*500+x, s*380+y)
endShape();

//The nose
fill('black')
beginShape();
vertex(s*460+x, s*270+y)
vertex(s*440+x, s*230+y)
vertex(s*470+x, s*200+y)
vertex(s*490+x,s* 220+y)
vertex(s*490+x, s*250+y)
endShape();

//The ear
fill('black')
beginShape()
vertex(s*360+x, s*170+y)
vertex(s*380+x, s*200+y)
vertex(s*420+x, s*200+y)
vertex(s*430+x, s*150+y)
endShape();

////I dont know what i did wrong for my ear and dont know where it went

//The bigger part of the leg in front
fill('SaddleBrown')
beginShape()
vertex(s*440+x, s*410+y)
vertex(s*400+x, s*340+y)
vertex(s*450+x, s*300+y)
vertex(s*470+x, s*360+y)
endShape();

//The body of the dog
fill('brown')
beginShape()
vertex(s*350+x, s*400+y)
vertex(s*270+x, s*330+y)
vertex(s*250+x, s*260+y)
vertex(s*340+x, s*220+y)
vertex(s*360+x, s*170+y)
vertex(s*430+x, s*150+y)
vertex(s*470+x, s*180+y)
vertex(s*470+x, s*200+y)
vertex(s*460+x, s*270+y)
vertex(s*450+x, s*300+y)
vertex(s*400+x, s*340+y)
endShape();


//I started just looking at my sketch then typing in what I sketched
//I don't know where I messed up and I am struggling

}

//I also want to create a sun and cloud. Where the sun is able to change to different kind of oranges and yellows and where the clouds can move.

2

it seems easier when you have the dog around a 0,0 point that you move to x,y

example in java processing:



void setup() {
  size(1000, 1000);
  background(0);
  noLoop();
  //angleMode(DEGREES);
  //noStroke();
}

//s is my scale factor

void draw() {

  dog(width/2, height/2, 3);
  //dog(76, 0, 2);
  //dog(4,3,3);
}

//This is my sketch part down below is my function that I created.

void dog(float x, float  y, float s) {


  // translate(width/2, height/2);
  translate(x, y); 

  fill(133); 

  strokeWeight(1*s);
  //The left foot
  fill(123);
  beginShape();
  vertex(s*-44, s*-44);
  vertex(s*-34, s*-34);
  vertex(s*44, s*-44);
  vertex(s*44, s*44);
  vertex(s*-44, s*44);
  endShape();

  fill(255, 0, 0); 
  ellipse(0, 0, 9, 9);
}

otherwise, the dog is moved also to the right and down like in your example. Not so good.

3

Also isolate any transformations by using push an pop around the drawing code

void dog(float x, float  y, float s) {
push();
translate(x, y); 

 // dog drawing code
 pop();
}
4

sun




void setup() {
  size(700, 700);
}

void draw() {
  background(0); 

  sun();
}

void sun() {
  float amt = map( frameCount % 120, 
    0, 120, 
    0, 1);
  color col = lerpColor ( #F7FF15, 
    #FF8615, 
    amt ); 
  fill (col); 
  ellipse(120, 120, 21, 21);
}
//

and clouds



// cloud data: 
float[] x     = new float [13]; 
float[] y     = new float [13];
float[] xAdd  = new float [13]; 
float[] yAdd  = new float [13];
color[] col   = new color [13];
float[] offset= new float [13]; // relative x pos of left cloud ear 


void setup() {
  size(700, 700);

  // init 
  for (int index=0; index < x.length; index++) {
    x[index] = random(width); 
    y[index]= random(49);
    xAdd[index]=random(.4, 2.7);// small 
    yAdd[index]=random(.1, .22);// very small
    // make negative 50 % 
    if (random(1)<.5)
      xAdd[index]*=-1;
    if (random(1)<.5)
      yAdd[index]*=-1;
    col[index]=int(random( 190, 256 ));
    offset[index]=random(-44, -22);
  }//for
}

void draw() {
  background(10, 22, 255); 

  // show 
  sun();

  // show 
  for (int i=0; i < x.length; i++) {
    cloud(i);
  }
}

void sun() {
  float amt = map( frameCount % 120, 
    0, 120, 
    0, 1);
  color col = lerpColor ( #F7FF15, 
    #FF8615, 
    amt ); 
  fill (col); 
  ellipse(120, 120, 21, 21);
}

void cloud (int index) {
  // show 
  pushMatrix();
  translate (x[index], y[index]);
  noStroke(); 
  fill(col[index]);
  ellipse(-33, 0, 44, 22);
  ellipse(-23, -13, 23, 13);
  ellipse(offset[index], -11, 23, 13);
  popMatrix();

  // move
  x[index]+=xAdd[index];
  y[index]+=yAdd[index];

  // take care when they leave the screen left / right  
  if (x[index] < -30) { 
    x[index]= random(width+33, width+177);
    xAdd[index] = - abs(xAdd[index]);
  }
  if (x[index] > width+55) { 
    x[index]= random(-133, -77);
    xAdd[index] =  abs(xAdd[index]);
  }

  // AND top / down 
  if (y[index] < -30) { 
    yAdd[index] = abs(yAdd[index]);
  }
  if (y[index] > 166) { 
    yAdd[index] = - abs(yAdd[index]);
  }
} // method