2

Exactly as the title says, I'm trying to add a random color parameter (as a 4th parameter) to a pre-existing function. I have tried many things but nothing has been working.

That is what I'm working with. I know, it's not efficient but I'm a beginner. It's a smiley face. I need to add a random color parameter so that only the first 'fillStyle' gets changed but the rest of the colors remain the same. How can I achieve this?

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = "yellow";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);
<canvas id="cnv"><</canvas>

Improve this question
1
  • whats the problem Commented Nov 7, 2017 at 10:16

3 Answers 3

Reset to default
1

You mean

context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];

or perhaps

var bgArr = ["yellow","red","green"];
var rndBg = bgArr[Math.floor(Math.random()*bgArr.length)];
pintaSmiley(centerX, centerY, size, rndBg);

using 

function pintaSmiley(cX, cY, s, bg) {
  "use strict";
  context.beginPath();
  context.fillStyle = bg;

Here is the first:

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);
<canvas id="cnv"><</canvas>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can use function for generate random color.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}


var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = getRandomColor();
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);
<canvas id="cnv"><</canvas>

Improve this answer

2 Comments

Funny how subdued your colors are compared to the HSL one
That's really helpful, thanks so much, but what I need is a fourth parameter for the "pintaSmiley" function :)
0

You could perhaps use the HSL Color mode and use it with a random hue value.

context.fillStyle = "hsl("+Math.round(Math.random()*360)+",100%,50%)";


var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s, hue) {
  "use strict";
  context.beginPath();
  context.fillStyle = "hsl("+hue+",100%,50%)";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size, Math.round(Math.random()*360));
}

pintaSmiley(centerX, centerY, size * 14, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5, Math.round(Math.random()*360));
<canvas id="cnv"><</canvas>

Improve this answer

3 Comments

That's nice too :)
That's absolutely beautiful but what I need is a fourth parameter for the "pintaSmiley" function, something like "pintaSmiley(cX, cY, s, color)" :)
@DogukanTUNA you can make the hue as a parameter. I updated the snippet, check it out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.