imaginary creature

• Describe what values were stored in the array(s) and how you utilized them. Share your experience while using the array(s).

I used arrays to store colors, because it made it easier to then utilize loops to assign the colors to the shapes. I had a lot of colors (to create gradients) so it was the most optimal way to do that.

• Explain when/why translate(), push() and pop().

I used these to center the composition. It made it much more easier to have the center of the canvas as a relative position.

• What is the effectiveness of User-Defined Functions?

1. they are reusable (if the function has parameters)
2. they make the code look cleaner as it breaks down your process into smaller pieces of code
3. you can easily experiment by choosing to call the function multiple times/not to call it

• What parameters did you added to your functions? How were they manipulate the effects of the functions?

Mostly the parameters were the position variables. As I also used translate() it made it easier to calculate the position of the shapes.

• Are you able to identify methods/processes in your programming that are radically changed because of the uses of the functions you defined?

I used the UDF before so I would not say much changed, however I did find translate() very useful when working with composition and passing the position variables into the functions. 

This is what i created: 

Here is the link: https://editor.p5js.org/zhuanya28/sketches/vIDc_V0OY 

There is the code:

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(255);

  drawCreature(width / 2, height / 2);
}

let tentacleSize = 80;
let yChange = 6;
let colors = [];
let colors2 = [];

function drawTentacle2(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;

  for (let i = x; i < x + 200; i += 15) {
    colors[currentColor].setAlpha(100);
    fill(colors[currentColor]);
    if (currentColor < colors.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y += yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function drawTentacle(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;
  tentacleSize = 80;

  for (let i = x; i < x + 200; i += 15) {
    colors2[currentColor].setAlpha(100);
    fill(colors2[currentColor]);
    if (currentColor < colors2.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y -= yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function colorsDefine() {
  // colors[0] = color("#c9e4ca");
  // colors[1] = color("#87bba2");
  // colors[2] = color("#55828b");
  // colors[3] = color("#3b6064");
  // colors[4] = color("#364958");

  // colors[0] = color("#99e2b4");
  // colors[1] = color("#88d4ab");
  // colors[2] = color("#78c6a3");
  // colors[3] = color("#67b99a");
  // colors[4] = color("#56ab91");
  // colors[5] = color("#469d89");
  // colors[6] = color("#358f80");
  // colors[7] = color("#248277");
  // colors[8] = color("#14746f");
  // colors[9] = color("#036666");
  colors[11] = color("#EBF5CA");
  colors[10] = color("#DFF0A6");

  colors[9] = color("#d9ed92");
  colors[8] = color("#b5e48c");
  colors[7] = color("#99d98c");
  colors[6] = color("#76c893");
  colors[5] = color("#52b69a");
  colors[4] = color("#34a0a4");
  colors[3] = color("#168aad");
  colors[2] = color("#1a759f");
  colors[1] = color("#1e6091");
  colors[0] = color("#184e77");

  colors2[0] = color("#103755");
  colors2[1] = color("#0D3655");
  colors2[2] = color("#0E3757");
  colors2[3] = color("#194E77");
  colors2[4] = color("#22608F");

  // colors[5] = color("PaleVioletRed");
}

function drawHead(x, y) {
  colors2[0].setAlpha(255);
  fill(colors2[0]);
  circle(x, y, 150);
}

function drawFace(x, y) {
  noStroke();
  fill(255);

  rect(x - 60, y - 20, 40, 20);
  rect(x + 20, y - 20, 40, 20);
  arc(x + 40, y - 30, 20, 20, PI, 0);
  arc(x - 40, y - 30, 20, 20, PI, 0);
  arc(x, y + 20, 80, 80, 0, PI);
  fill(colors2[0]);
  arc(x - 40, y, 20, 20, PI, 0);
  arc(x + 40, y, 20, 20, PI, 0);

  arc(x + 10, y + 20, 20, 40, 0, PI);
  arc(x - 10, y + 20, 20, 40, 0, PI);
}

function drawCreature(x, y) {
  colorsDefine();
  translate(x, y);

  for (let i = 0; i < 2 * PI; i += PI / 6) {
    drawTentacle(0, 0, i);
  }

  for (let i = PI / 8; i < 2 * PI; i += PI / 8) {
    drawTentacle2(0, 0, i);
  }
  drawHead(0, 0);
  drawFace(0, 0);
}