scaling based on distance from center

limit scaling based on distance from center

by rob Davis

HTML

<body>
    <span class="mouse"></span>
<span class="other"></span>

    <canvas id="myCanvas" width="500" height="500"></canvas> 
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
          background-color:white;
      }
canvas { border: 1px solid black; }
span {font-size:smaller}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
var centerX = width/2;
var centerY = height/2;
var maxDistanceFromCenter=50;
update(0,0,centerX,centerY); // initial position before mouse

// trap mouse movements and cause updates
$(window).mousemove(function (event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    // not sure why I need this -20, but it works
    update(event.pageX, event.pageY-20, centerX, centerY);
    $('.mouse').html(pageCoords + ' ' + clientCoords);
});

// update the two spikes
function update(mX,mY,cX,cY) {
    // clear the window
    context.clearRect ( 0 , 0 , width , height );
    context.save();
    // center and draw a black dot for reference
    context.translate(cX,cY);
    context.fillStyle='black';
    context.fillRect(-3,-3,6,6);
    // set angle
    var radians = Math.atan2(mY - cY, mX - cX);
    var angle = 90 + rad2Deg(radians);
    drawSpike(angle, 'red', 1.0);
    // move to new location based on distance(and max)
    var distance = getDistance(mX,mY,cX,cY);
    if (distance > maxDistanceFromCenter) {
        distance=maxDistanceFromCenter;
    }
    var newPoint = getNewPoint(radians, distance)
    context.translate(newPoint.x, newPoint.y);
    // the percentage of distance to maxDistanceFromCenter
    // defines the inverse scale
    var perct = (distance / maxDistanceFromCenter) * 100;
    var scale = ((100-perct)+1)/100;
    if (scale<0.5)scale=0.5;
    $('.other').html(perct + ' ' +scale);
    drawSpike(angle, 'green', scale);
    context.restore();
}

function drawSpike(angle, style, yScale) {
    context.save();
    context.rotate(deg2Rad(angle));
    context.scale(1.0, yScale);
    context.beginPath();
    context.moveTo(-10, 0);
    context.lineTo(10, 0);
    context.lineTo(0, -80);
    context.fillStyle = style;
    context.closePath();
   ...