0

multiplication of canvas line coordinates, is there anyway to lose the multiplication of the coordinates? Like for each object in the rects and rects2, the computer would have calculated all the possible outcomes before the code starts? full code at: https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

The example below is just a shape with no color fill, but I do also fill the shape with a colour as seen in the rects array.

I feel like these multiplications give off bad performance...? Or maybe it doesn't affect the performance at all?

var rects = [{x: 10 * Xf, y: 10 * Yf, w: xc, h: yc, color: 'Green'},        //Green
        {x: 110 * Xf, y: 10 * Yf, w: xc, h: yc, color: '#DC143C'},          //Red
        {x: 10 * Xf, y: 130 * Yf, w: xc, h: yc, color: "#1E90FF"},          //Blue
        {x: 10 * Xf, y: 250 * Yf, w: xc, h: yc, color: "Gold"},             //Gold
        {x: 110 * Xf, y: 250 * Yf, w: xc, h: yc, color: "#8B008B"},         //Purple
        {x: 210 * Xf, y: 10 * Yf, w: xc, h: yc, color: "#DDA0DD"},          //Pink
        {x: 210 * Xf, y: 130 * Yf, w: xc, h: yc, color: "#FF8C00"},         //Orange k6
        {x: 210 * Xf, y: 250 * Yf, w: xc, h: yc, color: "Lightseagreen"},   //Lightseagreen
        {x: 110 * Xf, y: 130 * Yf, w: xc, h: yc, color: "Brown"}];          //Brown

var rects2 = [{x: 10, y: 10},   //Green
        {x: 110, y: 10},        //Red
        {x: 10, y: 130},        //Blue
        {x: 10, y: 250},        //Gold
        {x: 110, y: 250},       //Purple
        {x: 210, y: 10},        //Pink
        {x: 210, y: 130},       //Orange k6
        {x: 210, y: 250},       //Lightseagreen
        {x: 110, y: 130}];      //Brown


                for (i = 0; i < lengd; i += 1) {
                    if (collides([rects[i]], ex, ey)) {
                        var rightBox = rects[i];
                        var rectangle = rects2[i];
                    }
                }
                ctx.beginPath();
                ctx.moveTo((rectangle.x + 10) * Xf, rightBox.y);
                ctx.lineTo((rectangle.x + 80) * Xf, rightBox.y);
                ctx.quadraticCurveTo((rectangle.x + 90) * Xf, rightBox.y, (rectangle.x + 90) * Xf, (rectangle.y + 10) * Yf);
                ctx.lineTo((rectangle.x + 90) * Xf, (rectangle.y + 100) * Yf);
                ctx.quadraticCurveTo((rectangle.x + 90) * Xf, (rectangle.y + 110) * Yf, (rectangle.x + 80) * Xf, (rectangle.y + 110) * Yf);
                ctx.lineTo((rectangle.x + 10) * Xf, (rectangle.y + 110) * Yf);
                ctx.quadraticCurveTo(rightBox.x, (rectangle.y + 110) * Yf, rightBox.x, (rectangle.y + 100) * Yf);
                ctx.lineTo(rightBox.x, (rectangle.y + 10) * Yf);
                ctx.quadraticCurveTo(rightBox.x, rightBox.y, (rectangle.x + 10) * Xf, rightBox.y);
                ctx.lineWidth = 4;
                ctx.strokeStyle = 'red';
                ctx.stroke();
Guðni Már Gilbert
  • 155
  • 1
  • 11
  • I want to add that this code is intended for mobile devices such as iPhone. – Guðni Már Gilbert Dec 07 '14 at 13:57
  • 1
    These calculations are not a challenge to modern browsers. For uniform scaling you could use `ctx.scale()` but I see your width and height some places won't allow this approach. You can instead create rect objects and do the calculations when creating an instance of it. This way the pre-calculated value can be used directly when you need to draw it. But I wouldn't worry too much as it is - it do depend on how often you need to redraw them though. Try to measure using jsperf.com etc. –  Dec 07 '14 at 14:06
  • @KenFyrstenberg I have done some time measuring of the current code, it seems to take 0.100ms - 0.080ms to complete. But I do not have a code to compare it to. – Guðni Már Gilbert Dec 07 '14 at 14:13
  • Not knowing the full scope I would still say it looks ok. As long as it takes less than a frame update (16.67ms), and preferably lot less, you should be ok. The result will vary depending on client hardware. –  Dec 07 '14 at 14:16
  • I did a measurement INSIDE the function this time, and I got a much different result. 175ms - 180ms isn't that a bit much? – Guðni Már Gilbert Dec 07 '14 at 15:35
  • 1
    Your repository code does many multiplications that could be done once, stored in a variable and reused. For example `var x1=(rects2[i].x + 10) * Xf` and then reuse `x1` instead of remultiplying every time. Having said that @KenFyrstenberg correctly says that the multiplication is likely not causing you much delay. You could draw 100+ inefficient rounded-rects before performance would suffer much. So...(1) cache repeated multiplications into variables & (2) look elsewhere for your performance problem. ;-) – markE Dec 07 '14 at 19:17
  • If you want to draw rounded rectangles then this may help (a more efficient way): https://stackoverflow.com/questions/19743250/how-to-create-a-rounded-rectangle-with-thickness-and-an-image-inside-it-in-canva/19745956#19745956 –  Dec 07 '14 at 19:54

0 Answers0