CODEWITHSUNDEEP
javascriptcanvas
newbie_javascriptishard
newbie_javascriptishard

Reputation: 3

How can I randomize coordinates in javascript canvas?

Newbie here, currently learning how to code. My teacher gave me the task of proving myself in canvas by making a smiley face on my own. This is the result so far.

Now he gave me the task of randomizing the coordinates, so that the smiley as a whole appears in a new place everytime (whether that happens on load or through a button is my decision).

Edit: to clarify, my problem lies more within the logic behind altering the coordinates of my canvas. I've tried to figure out how to do this, and know that I'll need Math.random for that.

Edit: to clarify, my problem lies more within the logic behind

My code:

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>

    <script type="application/javascript">
        function draw() {
            var canvas = document.getElementById("canvas");
            var smiley = canvas.getContext("2d");

                //Face shape
                smiley.beginPath();
                smiley.arc(75, 75, 50, 0, Math.PI * 2, true);

                //Right eye
                smiley.moveTo(65,55);
                smiley.arc(55,55,10,0, Math.PI * 2, true); 

                //Left eye
                smiley.moveTo(105,55);
                smiley.arc(95,55,10,0, Math.PI * 2, true); 

                //Mouth
                smiley.moveTo(35,75);
                smiley.arc(75, 75, 40, 0, Math.PI, false); 
                smiley.moveTo(36,81);
                smiley.lineTo(114,81);
                smiley.stroke();

                //Pupils
                smiley.beginPath(58,55);
                smiley.moveTo(58,55);
                smiley.arc(55,55,3,0, Math.PI*2,true);
                smiley.moveTo(98,55);
                smiley.arc(95,55,3,0, Math.PI*2, true);
                smiley.fill()

                //Hair
                smiley.beginPath(75,25);
                smiley.moveTo(75,25);
                smiley.lineTo(75,5);
                smiley.moveTo(79,5);
                smiley.lineTo(78,25);
                smiley.moveTo(72,25);
                smiley.lineTo(71,5);
                smiley.stroke();

                //Nose
                smiley.beginPath();
                smiley.moveTo(73,50);
                smiley.lineTo(67,67);
                smiley.lineTo(80,70);
                smiley.stroke();

                smiley.beginPath()
                smiley.moveTo(73,50);
                smiley.lineTo(63,69);
                smiley.lineTo(80,70);
                smiley.lineTo(67,67);
                smiley.lineTo(73,50);
                smiley.fill();
                smiley.endPath();
            }

    </script>
</body>

Thank you for your help.

Upvotes: 0

Views: 610

Answers (2)

ashu saini
ashu saini

Reputation: 86

function getRandom(from, to) {
  return Math.floor(Math.random() * to) + from
}

function normalise(px, shift) {
  return px - 75 + shift // moving it to 0 and then shifting it to anywhere
}


function draw() {
  var canvas = document.getElementById("canvas");
  var smiley = canvas.getContext("2d");
  const [startx, starty] = [getRandom(75, 100), getRandom(75, 100)];
  console.log(startx, starty);


  //Face shape
  smiley.beginPath();
  smiley.arc(normalise(75, startx), normalise(75, starty), 50, 0, Math.PI * 2, true);

  //Right eye
  smiley.moveTo(normalise(65, startx), normalise(55, starty));
  smiley.arc(normalise(55, startx), normalise(55, starty), 10, 0, Math.PI * 2, true);

  //Left eye
  smiley.moveTo(normalise(105, startx), normalise(55, starty));
  smiley.arc(normalise(95, startx), normalise(55, starty), 10, 0, Math.PI * 2, true);

  //Mouth
  smiley.moveTo(normalise(35, startx), normalise(75, starty));
  smiley.arc(normalise(75, startx), normalise(75, starty), 40, 0, Math.PI, false);
  smiley.moveTo(normalise(36, startx), normalise(81, starty));
  smiley.lineTo(normalise(114, startx), normalise(81, starty));
  smiley.stroke();

  //Pupils
  smiley.beginPath(normalise(58, startx), normalise(55, starty));
  smiley.moveTo(normalise(58, startx), normalise(55, starty));
  smiley.arc(normalise(55, startx), normalise(55, starty), 3, 0, Math.PI * 2, true);
  smiley.moveTo(normalise(98, startx), normalise(55, starty));
  smiley.arc(normalise(95, startx), normalise(55, starty), 3, 0, Math.PI * 2, true);
  smiley.fill()

  //Hair
  smiley.beginPath(normalise(75, startx), normalise(25, starty));
  smiley.moveTo(normalise(75, startx), normalise(25, starty));
  smiley.lineTo(normalise(75, startx), normalise(5, starty));
  smiley.moveTo(normalise(79, startx), normalise(5, starty));
  smiley.lineTo(normalise(78, startx), normalise(25, starty));
  smiley.moveTo(normalise(72, startx), normalise(25, starty));
  smiley.lineTo(normalise(71, startx), normalise(5, starty));
  smiley.stroke();

  //Nose
  smiley.beginPath();
  smiley.moveTo(normalise(73, startx), normalise(50, starty));
  smiley.lineTo(normalise(67, startx), normalise(67, starty));
  smiley.lineTo(normalise(80, startx), normalise(70, starty));
  smiley.stroke();

  smiley.beginPath()
  smiley.moveTo(normalise(73, startx), normalise(50, starty));
  smiley.lineTo(normalise(63, startx), normalise(69, starty));
  smiley.lineTo(normalise(80, startx), normalise(70, starty));
  smiley.lineTo(normalise(67, startx), normalise(67, starty));
  smiley.lineTo(normalise(73, startx), normalise(50, starty));
  smiley.fill();
  // smiley.endPath();
}

Upvotes: 0

ahmet dundar
ahmet dundar

Reputation: 92

Hello you need to use Math.random() which gives a number between 0 and 1. But you need a range between 50 and canvasWidth-50 I expanded canvas width to demonstrate randomness more 

<body onload="draw();">
    <canvas id="canvas" width="450px" height="450px"></canvas>

    <script type="application/javascript">
        function draw() {
        var canvas=document.getElementById("canvas");
        var x=Math.random()*(canvas.width-100)-25; //smiley's width 100 and your initial value was +75 it needed to be 100/2=50
        var y=Math.random()*(canvas.height-100)-25; //smiley's height 100 and your initial value was +75 it needed to be 100/2=50
            var canvas = document.getElementById("canvas");
            var smiley = canvas.getContext("2d");

                //Face shape
                smiley.beginPath();
                smiley.arc(75+x, 75+y, 50, 0, Math.PI * 2, true);

                //Right eye
                smiley.moveTo(65+x,55+y);
                smiley.arc(55+x,55+y,10,0, Math.PI * 2, true); 

                //Left eye
                smiley.moveTo(105+x,55+y);
                smiley.arc(95+x,55+y,10,0, Math.PI * 2, true); 

                //Mouth
                smiley.moveTo(35+x,75+y);
                smiley.arc(75+x, 75+y, 40, 0, Math.PI, false); 
                smiley.moveTo(36+x,81+y);
                smiley.lineTo(114+x,81+y);
                smiley.stroke();

                //Pupils
                smiley.beginPath(58+x,55+y);
                smiley.moveTo(58+x,55+y);
                smiley.arc(55+x,55+y,3,0, Math.PI*2,true);
                smiley.moveTo(98+x,55+y);
                smiley.arc(95+x,55+y,3,0, Math.PI*2, true);
                smiley.fill()

                //Hair
                smiley.beginPath(75+x,25+y);
                smiley.moveTo(75+x,25+y);
                smiley.lineTo(75+x,5+y);
                smiley.moveTo(79+x,5+y);
                smiley.lineTo(78+x,25+y);
                smiley.moveTo(72+x,25+y);
                smiley.lineTo(71+x,5+y);
                smiley.stroke();

                //Nose
                smiley.beginPath();
                smiley.moveTo(73+x,50+y);
                smiley.lineTo(67+x,67+y);
                smiley.lineTo(80+x,70+y);
                smiley.stroke();

                smiley.moveTo(73+x,50+y);
                smiley.lineTo(63+x,69+y);
                smiley.lineTo(80+x,70+y);
                smiley.lineTo(67+x,67+y);
                smiley.lineTo(73+x,50+y);
                smiley.fill();
            }

    </script>
</body>

Upvotes: 1

Related Questions