mat2(vec2, vec2);
mat3(vec3, vec3, vec3);
mat4(vec4, vec4, vec4, vec4);

mat2(float, float,
     float, float);

mat3(float, float, float,
     float, float, float,
     float, float, float);

mat4(float, float, float, float,
     float, float, float, float,
     float, float, float, float,
     float, float, float, float);

mat4 matrix=mat4(
    1.0, 1.0, 0.0, 0.0,
    0.5, 0.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0);

  c0  c1  c2  c3             c0   c1   c2   c3
[ Xx  Yx  Zx  Tx ]        [ 1.0  0.5  0.0  0.0 ]     
[ Xy  Yy  Zy  Ty ]        [ 1.0  0.0  0.0  0.0 ]     
[ Xz  Yz  Zz  Tz ]        [ 0.0  0.0  1.0  0.0 ]     
[  0   0   0   1 ]        [ 0.0  0.0  0.0  1.0 ] 

   Xx,  Xy,  Xz,   0,  Yx,  Yy,  Yz,   0,  Zx,  Zy,  Zz,   0,  Tx,  Ty,  Tz,   1
[ 1.0, 1.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ]

mat2(
    float, float,   // first column
    float, float);  // second column

mat4 m;
m[1] = vec4(2.0); // sets the second column to all 2.0
m[0][0] = 1.0; // sets the upper left element to 1.0
m[2][3] = 2.0; // sets the 4th element of the third column to 2.0

vec3 v, u;
mat3 m;

u.x = dot(v, m[0]); // m[0] is the left column of m
u.y = dot(v, m[1]); // dot(a,b) is the inner (dot) product of a and b
u.z = dot(v, m[2]);

u.x = m[0].x * v.x + m[1].x * v.y + m[2].x * v.z;
u.y = m[0].y * v.x + m[1].y * v.y + m[2].y * v.z;
u.z = m[0].z * v.x + m[1].z * v.y + m[2].z * v.z;

mat4 m = mat4(
    1.0, 1.0, 0.0, 0.0,
    0.5, 0.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0);

vec4 v = vec4( -1.0, 0.0, 0.0, 1.0 );

u = m * v 

u.x  = m[0].x * v.x  + m[1].x * v.y + m[2].x * v.z + m[3].x * v.w;
u.y  = m[0].y * v.x  + m[1].y * v.y + m[2].y * v.z + m[3].y * v.w;
u.z  = m[0].z * v.x  + m[1].z * v.y + m[2].z * v.z + m[3].z * v.w;
u.w  = m[0].w * v.x  + m[1].w * v.y + m[2].w * v.z + m[3].w * v.w;

u.x  =  1.0 * -1.0   +  0.5 * 0.0   +  0.0 * 0.0   +  0.0 * 1.0  =  -1.0
u.y  =  1.0 * -1.0   +  0.0 * 0.0   +  0.0 * 0.0   +  0.0 * 1.0  =  -1.0
u.z  =  0.0 * -1.0   +  0.0 * 0.0   +  1.0 * 0.0   +  0.0 * 1.0  =   0.0
u.w  =  0.0 * -1.0   +  0.0 * 0.0   +  0.0 * 0.0   +  1.0 * 1.0  =   1.0

u_.x  =  dot(v, m[0]);
u_.y  =  dot(v, m[1]);
u_.z  =  dot(v, m[2]); 
u_.w  =  dot(v, m[3]); 

u_.x  =  dot( vec4( -1.0, 0.0, 0.0, 1.0 ), vec4( 1.0, 1.0, 0.0, 0.0 ) )  =  -1.0 
u_.y  =  dot( vec4( -1.0, 0.0, 0.0, 1.0 ), vec4( 0.5, 0.0, 0.0, 0.0 ) )  =  -0.5
u_.z  =  dot( vec4( -1.0, 0.0, 0.0, 1.0 ), vec4( 0.0, 0.0, 1.0, 0.0 ) )  =   0.0
u_.w  =  dot( vec4( -1.0, 0.0, 0.0, 1.0 ), vec4( 0.0, 0.0, 0.0, 1.0 ) )  =   1.0 

mat4 eyeTrans = mat4(
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 4.0, 0.0, 1.0
);

  c0  c1  c2  c3            c0  c1  c2  c3
[ Xx  Yx  Zx  Tx ]        [  0   4   8  12 ]     
[ Xy  Yy  Zy  Ty ]        [  1   5   9  13 ]     
[ Xz  Yz  Zz  Tz ]        [  2   6  10  14 ]     
[  0   0   0   1 ]        [  3   7  11  15 ] 

vec4 c0 = eyeTrans[0].xyzw;
vec4 c1 = eyeTrans[1].xyzw;
vec4 c2 = eyeTrans[2].xyzw;
vec4 c3 = eyeTrans[3].xyzw;

[ Xx, Xy, Xz, 0, Yx, Yy, Yz, 0, Zx, Zy, Zz, 0, Tx, Ty, Tz, 1 ]

import requests
import pandas as pd
from selenium import webdriver

urls = [
    'https://www.nakedcph.com/sneakers-by-adidas/s/37'
] 

baseURL = 'https://www.nakedcph.com'
final = []
with requests.Session() as s:
    for url in urls:
        driver = webdriver.Chrome('C:/chromedriver_win32/chromedriver.exe')
        driver.get(url)
        soup = bs(driver.page_source, 'lxml')
        items  = soup.findAll("div", {"class" : lambda L: L and L.startswith('col-6 col-md-3 mb-5')})

        name = []
        tag = []
        for each in items:
            name.append(each.find('span',{'class':'product-name d-block'}).text.strip())
            try:
                tag.append(each.find('svg').next_sibling.strip())
            except:
                tag.append(None)
        results = list(zip(name,tag))
        df = pd.DataFrame(results)

driver.quit()

print (df)
                            0               1
0                  ZX Torsion  Releasing Soon
1                      Campus         Restock
2                      Campus         Restock
3    Consortium Runner Mid 4D            None
4                     Ozweego            None
5                     Ozweego            None
6   Yeezy Boost 350 V2 Infant        Sold out
7     Yeezy Boost 350 V2 Kids        Sold out
8          Yeezy Boost 350 V2        Sold out
9                      Yung-1            None
10                     Yung 1            None
11               A.R. Trainer            None
12               A.R. Trainer            None
13             Adilette Pride            None
14                 Supercourt            None
15              Supercourt RX            None
16                 ZX 4000 4D            None
17         Yeezy Boost 700 V2        Sold out
18  Yeezy Boost 350 V2 Infant        Sold out
19    Yeezy Boost 350 V2 Kids        Sold out
20         Yeezy Boost 350 V2        Sold out
21         Yeezy Boost 700 V2        Sold out
22    Yeezy Boost 700 V2 Kids        Sold out
23  Yeezy Boost 700 V2 Infant        Sold out

    function func() {
    var canvas = document.getElementById("image");
    var context = canvas.getContext("2d");

    canvas.width = 100;
    canvas.height = 100;

    var width = 100
    var x = 0;
    var y = 0;
    var zX = 50;
    var zY = 50;
    
    var cb = [27,94,32,255];
    var cn = [67,160,71,255];

    context.strokeStyle = "black";
    context.lineWidth = 2;
    context.strokeRect(x, y, width, width);

    if (zX > x && zX < x + width && zY > y && zY < y + width) {
        fill4(zY, zY, cb, cn, context);
    }
    function fill4(zX, zY, cb, cn, content) {
        var imagedata = context.createImageData(1, 1);
        for (let i = 0; i < 4; i++) {
            imagedata.data[i] = cn[i];
        }
        var color = context.getImageData(zX, zY, 1, 1).data;
        if (zX > x && zX < x + width && zY > y && zY < y + width) {
            if (color[0] != cn[0] && color[1] != cn[1] && color[2] != cn[2] && color[3] != cn[3]) {
                context.putImageData(imagedata, zX, zY);
                setTimeout(function() {
                    fill4(zX, zY-1, cb, cn, context);
                    fill4(zX, zY+1, cb, cn, context);
                    fill4(zX-1, zY, cb, cn, context);
                    fill4(zX+1, zY, cb, cn, context);                            
                }, 20);
            }
        }
    }    
}

function draw() {
  var circles = 10; //parseInt  (document.getElementById('c').value);
  var ratio = 1; //parseFloat(document.getElementById('r').value);
  var min_r = 1; //parseInt  (document.getElementById('a').value);
  var max_r = 10; //parseInt  (document.getElementById('b').value);

  console.log(circles, ratio, min_r, max_r);
  var radiuses = [];
  // for (var i = 0 ; i != circles ; i++)
  // radiuses.push (Math.random() * (max_r-min_r) + min_r);
  radiuses = [
    3.9583054608672303,
    5.108187765437406,
    5.8970449014304505,
    6.176802256787828,
    2.875371765313655,
    8.017411283036802,
    8.751854615569854,
    2.7833816354701018,
    2.408464192175587,
    3.8428318045023144
  ];
  var packer = new Packer(radiuses, ratio);
  draw_result(packer);
}

// ===========================
// ancillary geometric classes
// ===========================
var Point = function(x, y) {
  this.x = x;
  this.y = y;
};

Point.prototype = {
  dist: function(p) {
    return this.vect(p).norm();
  },
  vect: function(p) {
    return new Point(p.x - this.x, p.y - this.y);
  },
  norm: function(p) {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  },
  add: function(v) {
    return new Point(this.x + v.x, this.y + v.y);
  },
  mult: function(a) {
    return new Point(this.x * a, this.y * a);
  }
};
var Circle = function(radius, center) {
  this.r = radius;
  this.c = center;
};

Circle.prototype = {
  surface: function() {
    return Math.PI * this.r * this.r;
  },
  distance: function(circle) {
    return this.c.dist(circle.c) - this.r - circle.r;
  }
};

// =========================
// circle packer lives here!
// =========================
var Packer = function(circles, ratio) {
  this.circles = circles;
  this.ratio = ratio || 1;
  this.list = this.solve();
};

Packer.prototype = {
  // try to fit all circles into a rectangle of a given surface
  compute: function(surface) {
    // check if a circle is inside our rectangle
    function in_rect(radius, center) {
      if (center.x - radius < -w / 2) return false;
      if (center.x + radius > w / 2) return false;
      if (center.y - radius < -h / 2) return false;
      if (center.y + radius > h / 2) return false;
      return true;
    }

    // approximate a segment with an "infinite" radius circle
    function bounding_circle(x0, y0, x1, y1) {
      var xm = Math.abs((x1 - x0) * w);
      var ym = Math.abs((y1 - y0) * h);
      var m = xm > ym ? xm : ym;
      var theta = Math.asin(m / 4 / bounding_r);
      var r = bounding_r * Math.cos(theta);
      return new Circle(
        bounding_r,
        new Point(
          (r * (y0 - y1)) / 2 + ((x0 + x1) * w) / 4,
          (r * (x1 - x0)) / 2 + ((y0 + y1) * h) / 4
        )
      );
    }

    // return the corner placements for two circles
    function corner(radius, c1, c2) {
      var u = c1.c.vect(c2.c); // c1 to c2 vector
      var A = u.norm();
      if (A == 0) return []; // same centers
      u = u.mult(1 / A); // c1 to c2 unary vector
      // compute c1 and c2 intersection coordinates in (u,v) base
      var B = c1.r + radius;
      var C = c2.r + radius;
      if (A > B + C) return []; // too far apart
      var x = (A + (B * B - C * C) / A) / 2;
      var y = Math.sqrt(B * B - x * x);
      var base = c1.c.add(u.mult(x));

      var res = [];
      var p1 = new Point(base.x - u.y * y, base.y + u.x * y);
      var p2 = new Point(base.x + u.y * y, base.y - u.x * y);
      if (in_rect(radius, p1)) res.push(new Circle(radius, p1));
      if (in_rect(radius, p2)) res.push(new Circle(radius, p2));
      return res;
    }

    /////////////////////////////////////////////////////////////////

    // deduce starting dimensions from surface
    var bounding_r = Math.sqrt(surface) * 100; // "infinite" radius
    var w = (this.w = Math.sqrt(surface * this.ratio));
    var h = (this.h = this.w / this.ratio);

    // place our bounding circles
    var placed = [
      bounding_circle(1, 1, 1, -1),
      bounding_circle(1, -1, -1, -1),
      bounding_circle(-1, -1, -1, 1),
      bounding_circle(-1, 1, 1, 1)
    ];

    // Initialize our rectangles list
    var unplaced = this.circles.slice(0); // clones the array
    while (unplaced.length > 0) {
      // compute all possible placements of the unplaced circles
      var lambda = {};
      var circle = {};
      for (var i = 0; i != unplaced.length; i++) {
        var lambda_min = 1e10;
        lambda[i] = -1e10;
        // match current circle against all possible pairs of placed circles
        for (var j = 0; j < placed.length; j++)
          for (var k = j + 1; k < placed.length; k++) {
            // find corner placement
            if (k > 3) {
              zog = 1;
            }
            var corners = corner(unplaced[i], placed[j], placed[k]);

            // check each placement
            for (var c = 0; c != corners.length; c++) {
              // check for overlap and compute min distance
              var d_min = 1e10;
              for (var l = 0; l != placed.length; l++) {
                // skip the two circles used for the placement
                if (l == j || l == k) continue;

                // compute distance from current circle
                var d = placed[l].distance(corners[c]);
                if (d < 0) break; // circles overlap

                if (d < d_min) d_min = d;
              }
              if (l == placed.length) {
                // no overlap
                if (d_min < lambda_min) {
                  lambda_min = d_min;
                  lambda[i] = 1 - d_min / unplaced[i];
                  circle[i] = corners[c];
                }
              }
            }
          }
      }

      // select the circle with maximal gain
      var lambda_max = -1e10;
      var i_max = -1;
      for (var i = 0; i != unplaced.length; i++) {
        if (lambda[i] > lambda_max) {
          lambda_max = lambda[i];
          i_max = i;
        }
      }

      // failure if no circle fits
      if (i_max == -1) break;

      // place the selected circle
      unplaced.splice(i_max, 1);
      placed.push(circle[i_max]);
    }

    // return all placed circles except the four bounding circles
    this.tmp_bounds = placed.splice(0, 4);
    return placed;
  },

  // find the smallest rectangle to fit all circles
  solve: function() {
    // compute total surface of the circles
    var surface = 0;
    for (var i = 0; i != this.circles.length; i++) {
      surface += Math.PI * Math.pow(this.circles[i], 2);
    }

    // set a suitable precision
    var limit = surface / 1000;

    var step = surface / 2;
    var res = [];
    while (step > limit) {
      var placement = this.compute.call(this, surface);
      if (placement.length != this.circles.length) {
        surface += step;
      } else {
        res = placement;
        this.bounds = this.tmp_bounds;
        surface -= step;
      }
      step /= 2;
    }
    return res;
  }
};

// ====
// demo
// ====
function draw_result(packer) {
  function draw_circle(circle) {
    ctx.beginPath();
    ctx.arc(
      (circle.c.x + dx) * zoom + mx,
      (circle.c.y + dy) * zoom + my,
      circle.r * zoom,
      0,
      2 * Math.PI
    );
    ctx.closePath();
    ctx.stroke();
  }

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width += 0; // clear canvas
  var margin_factor = 0.1;

  var mx = (canvas.width * margin_factor) / 2;
  var my = (canvas.height * margin_factor) / 2;
  var dx = packer.w / 2;
  var dy = packer.h / 2;
  var zx = (canvas.width * (1 - margin_factor)) / packer.w;
  var zy = (canvas.height * (1 - margin_factor)) / packer.h;
  var zoom = zx < zy ? zx : zy;

  // draw all circles
  ctx.strokeStyle = "black";
  for (var i = 0; i != packer.list.length; i++) draw_circle(packer.list[i]);

  // draw bounding circles
  ctx.strokeStyle = "red";
  for (var i = 0; i != packer.bounds.length; i++) draw_circle(packer.bounds[i]);

  // draw rectangle
  ctx.strokeStyle = "orange";
  ctx.beginPath();
  ctx.rect(
    (-packer.w / 2 + dx) * zoom + mx,
    (-packer.h / 2 + dy) * zoom + my,
    packer.w * zoom,
    packer.h * zoom
  );
  ctx.closePath();
  ctx.stroke();
}

function draw() {
  var circles = parseInt(document.getElementById("c").value);
  var ratio = parseFloat(document.getElementById("r").value);
  var min_r = parseInt(document.getElementById("a").value);
  var max_r = parseInt(document.getElementById("b").value);
  var radiuses = [];
  // for (var i = 0 ; i != circles ; i++)
  // radiuses.push (Math.random() * (max_r-min_r) + min_r);
  radiuses = [
    3.9583054608672303,
    5.108187765437406,
    5.8970449014304505,
    6.176802256787828,
    2.875371765313655,
    8.017411283036802,
    8.751854615569854,
    2.7833816354701018,
    2.408464192175587,
    3.8428318045023144
  ];
  var packer = new Packer(radiuses, ratio);
  draw_result(packer);
}

window.onload = draw;

        

Circles   

Ratio     

min radius

max radius

Draw

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class Line {
    constructor(fromPoint = null, toPoint = null, zigZagged = false) {
        this.from = fromPoint;
        this.to = toPoint;
        this.dashed = false;
        this.zigZagged = zigZagged;

        this.prepareZigZag();
    }

    setFrom(point) { this.from = point;}

    setTo(point) { this.to = toPoint;}

    getFrom() { return this.from; }

    getTo() { return this.to}

    prepareZigZag() {
        // Get the radian angle of the line
        this.lineRadians = Math.atan2(this.to.y - this.from.y, this.to.x - this.from.x);

        // Get the length of the line
        const a = this.from.x - this.to.x;
        const b = this.from.y - this.to.y;
        this.lineLength = Math.sqrt( a * a + b * b );

        // 10 pixels between each zig zag "wave"
        this.zigzagSpacing = 10;

        // Length of one zig zag line - will in reality be doubled see below usage
        this.oneZigZagLength = 10;

        //Length of the last straight bit - so we do not zig zag all the line
        this.straightLengthWhenZigZag = 30

        // The length of the zig zag lines
        this.zigZagLength = this.lineLength - this.straightLengthWhenZigZag;
    }


    draw(ctx, color = '#000', lineWidth = 2.0) {
        if (this.dashed) {
            ctx.setLineDash([4, 2]);
        } else {
            ctx.setLineDash([]);
        }

        if (this.zigZagged) {
            this.drawZigZagged(ctx);
        } else {
            ctx.beginPath();
            ctx.moveTo(this.from.x, this.from.y);
            ctx.lineTo(this.to.x, this.to.y);
        }
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.stroke();

    }

    drawZigZagged(ctx) {
        // Save the current drawing state
        ctx.save();

        // Begin the new path
        ctx.beginPath();

        //Set the new 0, 0
        ctx.translate(this.from.x, this.from.y);

        // Rotate the canvas so we can treat it like straight
        ctx.rotate(this.lineRadians);

        // Begin from 0, 0 (ie this.from.x, this.from.y)
        ctx.moveTo(0,0);
        let zx = 0;
        // Create zig zag lines
        for (let n = 0; zx < this.zigZagLength; n++) {
            // The new zig zag x position
            zx = ((n + 1) * this.zigzagSpacing);

            // The new zig zag y position - each and other time up and down
            const  zy = (n % 2 == 0) ? -this.oneZigZagLength : this.oneZigZagLength;

            // Draw the an actual line of the zig zag line
            ctx.lineTo(zx, zy);
        }
        // Back to the center vertically
        ctx.lineTo(this.lineLength - (this.straightLengthWhenZigZag / 2), 0);

        // Draw the last bit straight
        ctx.lineTo(this.lineLength, 0);

        // Restore the previous drawing state
        ctx.restore();
    }

    setDashed(enable) {
        this.dashed = enable;
    }

    setZigZagged(enable){
        this.zigZagged = enable
    }
}

public class ZoomableLayout extends FrameLayout {

    public ZoomableLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public ZoomableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public ZoomableLayout(final Context context) {
        super(context);
    }

    /**
     * Zooming view listener interface.
     *
     * @author karooolek
     *
     */
    public interface ZoomViewListener {

        void onZoomStarted(float zoom, float zoomx, float zoomy);

        void onZooming(float zoom, float zoomx, float zoomy);

        void onZoomEnded(float zoom, float zoomx, float zoomy);
    }

    // zooming
    float zoom = 1.0f;
    float maxZoom = 2.0f;
    float smoothZoom = 1.0f;
    float zoomX, zoomY;
    float smoothZoomX, smoothZoomY;
    private boolean scrolling; //

    // minimap variables
    private boolean showMinimap = false;
    private int miniMapColor = Color.WHITE;
    private int miniMapHeight = -1;
    private String miniMapCaption;
    private float miniMapCaptionSize = 10.0f;
    private int miniMapCaptionColor = Color.WHITE;

    // touching variables
    private long lastTapTime;
    private float touchStartX, touchStartY;
    private float touchLastX, touchLastY;
    private float startd;
    private boolean pinching;
    private float lastd;
    private float lastdx1, lastdy1;
    private float lastdx2, lastdy2;

    // drawing
    private final Matrix m = new Matrix();
    private final Paint p = new Paint();

    // listener
    ZoomViewListener listener;

    private Bitmap ch;

    public float getZoom() {
        return zoom;
    }

    public float getMaxZoom() {
        return maxZoom;
    }

    public void setMaxZoom(final float maxZoom) {
        if (maxZoom < 1.0f) {
            return;
        }

        this.maxZoom = maxZoom;
    }

    public void setMiniMapEnabled(final boolean showMiniMap) {
        this.showMinimap = showMiniMap;
    }

    public boolean isMiniMapEnabled() {
        return showMinimap;
    }

    public void setMiniMapHeight(final int miniMapHeight) {
        if (miniMapHeight < 0) {
            return;
        }
        this.miniMapHeight = miniMapHeight;
    }

    public int getMiniMapHeight() {
        return miniMapHeight;
    }

    public void setMiniMapColor(final int color) {
        miniMapColor = color;
    }

    public int getMiniMapColor() {
        return miniMapColor;
    }

    public String getMiniMapCaption() {
        return miniMapCaption;
    }

    public void setMiniMapCaption(final String miniMapCaption) {
        this.miniMapCaption = miniMapCaption;
    }

    public float getMiniMapCaptionSize() {
        return miniMapCaptionSize;
    }

    public void setMiniMapCaptionSize(final float size) {
        miniMapCaptionSize = size;
    }

    public int getMiniMapCaptionColor() {
        return miniMapCaptionColor;
    }

    public void setMiniMapCaptionColor(final int color) {
        miniMapCaptionColor = color;
    }

    public void zoomTo(final float zoom, final float x, final float y) {
        this.zoom = Math.min(zoom, maxZoom);
        zoomX = x;
        zoomY = y;
        smoothZoomTo(this.zoom, x, y);
    }

    public void smoothZoomTo(final float zoom, final float x, final float y) {
        smoothZoom = clamp(1.0f, zoom, maxZoom);
        smoothZoomX = x;
        smoothZoomY = y;
        if (listener != null) {
            listener.onZoomStarted(smoothZoom, x, y);
        }
    }

    public ZoomViewListener getListener() {
        return listener;
    }

    public void setListner(final ZoomViewListener listener) {
        this.listener = listener;
    }

    public float getZoomFocusX() {
        return zoomX * zoom;
    }

    public float getZoomFocusY() {
        return zoomY * zoom;
    }

    @Override
    public boolean dispatchTouchEvent(final MotionEvent ev) {
        // single touch
        if (ev.getPointerCount() == 1) {
            processSingleTouchEvent(ev);
        }

        // // double touch
        if (ev.getPointerCount() == 2) {
            processDoubleTouchEvent(ev);
        }

        // redraw
        getRootView().invalidate();
        invalidate();

        return true;
    }

    private void processSingleTouchEvent(final MotionEvent ev) {

        final float x = ev.getX();
        final float y = ev.getY();

        final float w = miniMapHeight * (float) getWidth() / getHeight();
        final float h = miniMapHeight;
        final boolean touchingMiniMap = x >= 10.0f && x <= 10.0f + w
                && y >= 10.0f && y <= 10.0f + h;

        if (showMinimap && smoothZoom > 1.0f && touchingMiniMap) {
            processSingleTouchOnMinimap(ev);
        } else {
            processSingleTouchOutsideMinimap(ev);
        }
    }

    private void processSingleTouchOnMinimap(final MotionEvent ev) {
        final float x = ev.getX();
        final float y = ev.getY();

        final float w = miniMapHeight * (float) getWidth() / getHeight();
        final float h = miniMapHeight;
        final float zx = (x - 10.0f) / w * getWidth();
        final float zy = (y - 10.0f) / h * getHeight();
        smoothZoomTo(smoothZoom, zx, zy);
    }

    private void processSingleTouchOutsideMinimap(final MotionEvent ev) {
        final float x = ev.getX();
        final float y = ev.getY();
        float lx = x - touchStartX;
        float ly = y - touchStartY;
        final float l = (float) Math.hypot(lx, ly);
        float dx = x - touchLastX;
        float dy = y - touchLastY;
        touchLastX = x;
        touchLastY = y;

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touchStartX = x;
                touchStartY = y;
                touchLastX = x;
                touchLastY = y;
                dx = 0;
                dy = 0;
                lx = 0;
                ly = 0;
                scrolling = false;
                break;

            case MotionEvent.ACTION_MOVE:
                if (scrolling || (smoothZoom > 1.0f && l > 30.0f)) {
                    if (!scrolling) {
                        scrolling = true;
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                        super.dispatchTouchEvent(ev);
                    }
                    smoothZoomX -= dx / zoom;
                    smoothZoomY -= dy / zoom;
                    return;
                }
                break;

            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_UP:

                // tap
                if (l < 30.0f) {
                    // check double tap
                    if (System.currentTimeMillis() - lastTapTime < 500) {
                        if (smoothZoom == 1.0f) {
                            smoothZoomTo(maxZoom, x, y);
                        } else {
                            smoothZoomTo(1.0f, getWidth() / 2.0f,
                                    getHeight() / 2.0f);
                        }
                        lastTapTime = 0;
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                        super.dispatchTouchEvent(ev);
                        return;
                    }

                    lastTapTime = System.currentTimeMillis();

                    performClick();
                }
                break;

            default:
                break;
        }

        ev.setLocation(zoomX + (x - 0.5f * getWidth()) / zoom, zoomY
                + (y - 0.5f * getHeight()) / zoom);

        ev.getX();
        ev.getY();

        super.dispatchTouchEvent(ev);
    }

    private void processDoubleTouchEvent(final MotionEvent ev) {
        final float x1 = ev.getX(0);
        final float dx1 = x1 - lastdx1;
        lastdx1 = x1;
        final float y1 = ev.getY(0);
        final float dy1 = y1 - lastdy1;
        lastdy1 = y1;
        final float x2 = ev.getX(1);
        final float dx2 = x2 - lastdx2;
        lastdx2 = x2;
        final float y2 = ev.getY(1);
        final float dy2 = y2 - lastdy2;
        lastdy2 = y2;

        // pointers distance
        final float d = (float) Math.hypot(x2 - x1, y2 - y1);
        final float dd = d - lastd;
        lastd = d;
        final float ld = Math.abs(d - startd);

        Math.atan2(y2 - y1, x2 - x1);
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startd = d;
                pinching = false;
                break;

            case MotionEvent.ACTION_MOVE:
                if (pinching || ld > 30.0f) {
                    pinching = true;
                    final float dxk = 0.5f * (dx1 + dx2);
                    final float dyk = 0.5f * (dy1 + dy2);
                    smoothZoomTo(Math.max(1.0f, zoom * d / (d - dd)), zoomX - dxk
                            / zoom, zoomY - dyk / zoom);
                }

                break;

            case MotionEvent.ACTION_UP:
            default:
                pinching = false;
                break;
        }

        ev.setAction(MotionEvent.ACTION_CANCEL);
        super.dispatchTouchEvent(ev);
    }

    private float clamp(final float min, final float value, final float max) {
        return Math.max(min, Math.min(value, max));
    }

    private float lerp(final float a, final float b, final float k) {
        return a + (b - a) * k;
    }

    private float bias(final float a, final float b, final float k) {
        return Math.abs(b - a) >= k ? a + k * Math.signum(b - a) : b;
    }

    @Override
    protected void dispatchDraw(final Canvas canvas) {

        // do zoom
        zoom = lerp(bias(zoom, smoothZoom, 0.05f), smoothZoom, 0.2f);
        smoothZoomX = clamp(0.5f * getWidth() / smoothZoom, smoothZoomX,
                getWidth() - 0.5f * getWidth() / smoothZoom);
        smoothZoomY = clamp(0.5f * getHeight() / smoothZoom, smoothZoomY,
                getHeight() - 0.5f * getHeight() / smoothZoom);

        zoomX = lerp(bias(zoomX, smoothZoomX, 0.1f), smoothZoomX, 0.35f);
        zoomY = lerp(bias(zoomY, smoothZoomY, 0.1f), smoothZoomY, 0.35f);
        if (zoom != smoothZoom && listener != null) {
            listener.onZooming(zoom, zoomX, zoomY);
        }

        final boolean animating = Math.abs(zoom - smoothZoom) > 0.0000001f
                || Math.abs(zoomX - smoothZoomX) > 0.0000001f
                || Math.abs(zoomY - smoothZoomY) > 0.0000001f;

        // nothing to draw
        if (getChildCount() == 0) {
            return;
        }

        // prepare matrix
        m.setTranslate(0.5f * getWidth(), 0.5f * getHeight());
        m.preScale(zoom, zoom);
        m.preTranslate(
                -clamp(0.5f * getWidth() / zoom, zoomX, getWidth() - 0.5f
                        * getWidth() / zoom),
                -clamp(0.5f * getHeight() / zoom, zoomY, getHeight() - 0.5f
                        * getHeight() / zoom));

        // get view
        final View v = getChildAt(0);
        m.preTranslate(v.getLeft(), v.getTop());

        // get drawing cache if available
        if (animating && ch == null && isAnimationCacheEnabled()) {
            v.setDrawingCacheEnabled(true);
            ch = v.getDrawingCache();
        }

        // draw using cache while animating
        if (animating && isAnimationCacheEnabled() && ch != null) {
            p.setColor(0xffffffff);
            canvas.drawBitmap(ch, m, p);
        } else { // zoomed or cache unavailable
            ch = null;
            canvas.save();
            canvas.concat(m);
            v.draw(canvas);
            canvas.restore();
        }

        // draw minimap
        if (showMinimap) {
            if (miniMapHeight < 0) {
                miniMapHeight = getHeight() / 4;
            }

            canvas.translate(10.0f, 10.0f);

            p.setColor(0x80000000 | 0x00ffffff & miniMapColor);
            final float w = miniMapHeight * (float) getWidth() / getHeight();
            final float h = miniMapHeight;
            canvas.drawRect(0.0f, 0.0f, w, h, p);

            if (miniMapCaption != null && miniMapCaption.length() > 0) {
                p.setTextSize(miniMapCaptionSize);
                p.setColor(miniMapCaptionColor);
                p.setAntiAlias(true);
                canvas.drawText(miniMapCaption, 10.0f,
                        10.0f + miniMapCaptionSize, p);
                p.setAntiAlias(false);
            }

            p.setColor(0x80000000 | 0x00ffffff & miniMapColor);
            final float dx = w * zoomX / getWidth();
            final float dy = h * zoomY / getHeight();
            canvas.drawRect(dx - 0.5f * w / zoom, dy - 0.5f * h / zoom, dx
                    + 0.5f * w / zoom, dy + 0.5f * h / zoom, p);

            canvas.translate(-10.0f, -10.0f);
        }

        // redraw
        // if (animating) {
        getRootView().invalidate();
        invalidate();
        // }
    }
}

            
                // Your contents here
            

    

    public void onFIRE(View view){

    if(btnStart.getVisibility()== View.VISIBLE){
        startLabel.setText("No Firing Start Game");
        return;
    }

    gunANGLE = ivTRI.getRotation();

    if(gunANGLE == 0.0f){
        ZY -= 200.0;
        ZX += 0;
        pink.setX(pink.getX()+ZX);
        pink.setY(pink.getY()+ZY);
        //System.out.println("$$$$$$$$$$ Y "+pink.getY());
        //System.out.println("$$$$$$$$$$ X "+pink.getX());

        hitCHECK();

        ZX = 0;
        ZY = 0;
        if( pink.getY() < 40){
            HITorMISS();
            pink.setX(ivTRI.getX()+30);
            pink.setY(ivTRI.getY()+60);
            // rotate gun bring bullet back to breach
            HITorMISS();
            // loose point for missing
        }
    }

    public void hitCHECK(){

    Rect pinkRect = new Rect();
    pink.getHitRect(pinkRect);

    Rect iv1Rect = new Rect();
    iv1.getHitRect(iv1Rect);
    Rect iv2Rect = new Rect();
    iv2.getHitRect(iv2Rect);
    Rect iv3Rect = new Rect();
    iv3.getHitRect(iv3Rect);
    Rect iv4Rect = new Rect();
    iv4.getHitRect(iv4Rect);
    Rect iv5Rect = new Rect();
    iv5.getHitRect(iv5Rect);
    Rect iv6Rect = new Rect();
    iv6.getHitRect(iv6Rect);

    Rect earthRect = new Rect();
    earth.getHitRect(earthRect);

    Rect asteroidRect = new Rect();
    asteroid.getHitRect(asteroidRect);

    Rect arrowLeftRect = new Rect();
    arrowLeft.getHitRect(arrowLeftRect);
    Rect arrowRightRect = new Rect();
    arrowRight.getHitRect(arrowRightRect);

    if (Rect.intersects(pinkRect, arrowLeftRect)) {
        arrowLeft.setVisibility(View.INVISIBLE);
        arrowLeft.setX(-100);
        arrowLeft.setY(-100);
        arrowLeft.setEnabled(false);
    }
    if (Rect.intersects(pinkRect, arrowRightRect)) {
        arrowRight.setVisibility(View.INVISIBLE);
        arrowRight.setX(-100);
        arrowRight.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv1Rect)) {
        iv1.setVisibility(View.INVISIBLE);
        iv1.setX(-100);
        iv1.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv2Rect)) {
        iv2.setVisibility(View.INVISIBLE);
        iv2.setX(-100);
        iv2.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv3Rect)) {
        iv3.setVisibility(View.INVISIBLE);
        iv3.setX(-100);
        iv3.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv4Rect)) {
        iv4.setVisibility(View.INVISIBLE);
        iv4.setX(-100);
        iv4.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv5Rect)) {
        iv5.setVisibility(View.INVISIBLE);
        iv5.setX(-100);
        iv5.setY(-100);
    }
    if (Rect.intersects(pinkRect, iv6Rect)) {
        iv6.setVisibility(View.INVISIBLE);
        iv6.setX(-100);
        iv6.setY(-100);
    }

    if (Rect.intersects(pinkRect, asteroidRect)) {

        count = count + 1;
        if (count > 5) {
            asteroid.setVisibility(View.INVISIBLE);
            asteroid.setX(-90);
            asteroid.setY(-180);
            timerA.cancel();
            timerA.purge();

        } else {
            asteroid.setVisibility(View.VISIBLE);
            asteroid.setX(-90);
            asteroid.setY(-180);
            asteroid.setRotation(asteroidANGLE = -0.0f);
            // These settings make the asteroid follow a new
            // path it continues to come back and attack the earth
        }
    }

    if (Rect.intersects(pinkRect, earthRect)) {
        Intent intent = new Intent(getApplicationContext(), you_hit_earth.class);
        intent.putExtra("MSG", 1);
        startActivity(intent);
        stopGAME(null);
    }
    if (Rect.intersects(asteroidRect, earthRect)) {

        Intent intent = new Intent(getApplicationContext(), you_hit_earth.class);
        intent.putExtra("MSG", 2);
        startActivity(intent);
        stopGAME(null);
    }

    if(iv1.getVisibility()==View.INVISIBLE && iv2.getVisibility()==View.INVISIBLE&&
            iv3.getVisibility()==View.INVISIBLE&&iv4.getVisibility()==View.INVISIBLE&&
            iv5.getVisibility()==View.INVISIBLE&&iv6.getVisibility()==View.INVISIBLE&&
            arrowLeft.getVisibility()==View.INVISIBLE&&arrowRight.getVisibility()==View.INVISIBLE){

        Long spentTime = System.currentTimeMillis()/1000 - startTime;
        score = spentTime;
        Intent intent = new Intent(getApplicationContext(), result.class);
        intent.putExtra("SCORE", score);
        startActivity(intent);

        stopGAME(null);
    }
}

function lookAt(eye, target, up) {
  const zAxis = v3.normalize(v3.subtract(eye, target));
  const xAxis = v3.normalize(v3.cross(up, zAxis));
  const yAxis = v3.normalize(v3.cross(zAxis, xAxis));

  return [
    ...xAxis, 0,
    ...yAxis, 0,
    ...zAxis, 0,
    ...eye, 1,
  ];
}

+----+----+----+----+
| xx | xy | xz |    |  xaxis
+----+----+----+----+
| yx | yy | yz |    |  yaxis
+----+----+----+----+
| zx | zy | zz |    |  zaxis
+----+----+----+----+
| tx | ty | tz |    |  translation
+----+----+----+----+

const camera = lookAt(eye, target, up);
const xaxis = camera.slice(0, 3);
const yaxis = camera.slice(4, 7);
const zaxis = camera.slice(8, 11);

matrix = mult(matrix, zaxis);  // moves 1 unit away from camera

moveVec = [zaxis[0] * moveAmount, zaxis[1] * moveAmount, zaxis[2] * moveAmount];
matrix = mult(matrix, moveVec);  // moves moveAmount units away from camera

// assuming tx, ty, and tz are our translation
tx += zaxis[0] * moveAmount;
ty += zaxis[1] * moveAmount;
tz += zaxis[2] * moveAmount;

const vs = `
uniform mat4 u_worldViewProjection;

attribute vec4 position;
attribute vec2 texcoord;

varying vec4 v_position;
varying vec2 v_texcoord;

void main() {
  v_texcoord = texcoord;
  gl_Position = u_worldViewProjection * position;
}
`;
const fs = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D u_texture;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;


"use strict";
const m4 = twgl.m4;
const v3 = twgl.v3;
const gl = document.getElementById("c").getContext("webgl");

// compiles shaders, links program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for positions, texcoords
const bufferInfo = twgl.primitives.createCubeBufferInfo(gl);

// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const tex = twgl.createTexture(gl, {
  min: gl.NEAREST,
  mag: gl.NEAREST,
  src: [
    255, 64, 64, 255,
    64, 192, 64, 255,
    64, 64, 255, 255,
    255, 224, 64, 255,
  ],
});

const settings = {
  xoff: 0,
  yoff: 0,
  zoff: 0,
};

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  const fov = 45 * Math.PI / 180;
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.01;
  const zFar = 100;
  const projection = m4.perspective(fov, aspect, zNear, zFar);

  const eye = [3, 4, -6];
  const target = [0, 0, 0];
  const up = [0, 1, 0];

  const camera = m4.lookAt(eye, target, up);
  const view = m4.inverse(camera);
  const viewProjection = m4.multiply(projection, view);

  gl.useProgram(programInfo.program);

  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  const t = time * .1;
  for (let z = -1; z <= 1; ++z) {
    for (let x = -1; x <= 1; ++x) {
      const world = m4.identity();
      m4.translate(world, v3.mulScalar(camera.slice(0, 3), settings.xoff), world);
      m4.translate(world, v3.mulScalar(camera.slice(4, 7), settings.yoff), world);
      m4.translate(world, v3.mulScalar(camera.slice(8, 11), settings.zoff), world);
      m4.translate(world, [x * 1.4, 0, z * 1.4], world);
      m4.rotateY(world, t + z + x, world);

      // calls gl.uniformXXX
      twgl.setUniforms(programInfo, {
        u_texture: tex,
        u_worldViewProjection: m4.multiply(viewProjection, world),
      });

      // calls gl.drawArrays or gl.drawElements
      twgl.drawBufferInfo(gl, bufferInfo);
    }
  }

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

setupSlider("#xSlider", "#xoff", "xoff");
setupSlider("#ySlider", "#yoff", "yoff");
setupSlider("#zSlider", "#zoff", "zoff");

function setupSlider(sliderId, labelId, property) {
  const slider = document.querySelector(sliderId);
  const label = document.querySelector(labelId);

  function updateLabel() {
    label.textContent = settings[property].toFixed(2);
  }

  slider.addEventListener('input', e => {
    settings[property] = (parseInt(slider.value) / 100 * 2 - 1) * 5;
    updateLabel();
  });

  updateLabel();
  slider.value = (settings[property] / 5 * .5 + .5) * 100;
}

body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }
#ui { 
  position: absolute; 
  left: 10px; 
  top: 10px; 
  z-index: 2; 
  background: rgba(255, 255, 255, 0.9);
  padding: .5em;
}

  xoff: 
  yoff: 
  zoff: 

public class ScrollViewCustom extends ScrollView {

    public interface ZoomViewListener {

        void onZoomStarted(float zoom, float zoomx, float zoomy);

        void onZooming(float zoom, float zoomx, float zoomy);

        void onZoomEnded(float zoom, float zoomx, float zoomy);
    }

    // zooming
    float zoom = 1.0f;
    float maxZoom = 2.0f;
    float smoothZoom = 1.0f;
    float zoomX, zoomY;
    float smoothZoomX, smoothZoomY;
    private boolean scrolling; // NOPMD by karooolek on 29.06.11 11:45

    // minimap variables
    private boolean showMinimap = false;
    private int miniMapColor = Color.BLACK;
    private int miniMapHeight = -1;
    private String miniMapCaption;
    private float miniMapCaptionSize = 10.0f;
    private int miniMapCaptionColor = Color.WHITE;

    // touching variables
    private long lastTapTime;
    private float touchStartX, touchStartY;
    private float touchLastX, touchLastY;
    private float startd;
    private boolean pinching;
    private float lastd;
    private float lastdx1, lastdy1;
    private float lastdx2, lastdy2;

    // drawing
    private final Matrix m = new Matrix();
    private final Paint p = new Paint();

    // listener
    ZoomViewListener listener;

    private Bitmap ch;

    public ScrollViewCustom(Context context) {
        super(context);
    }

    public ScrollViewCustom(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public float getZoom() {
        return zoom;
    }

    public float getMaxZoom() {
        return maxZoom;
    }

    public void setMaxZoom(final float maxZoom) {
        if (maxZoom < 1.0f) {
            return;
        }

        this.maxZoom = maxZoom;
    }

    public void setMiniMapEnabled(final boolean showMiniMap) {
        this.showMinimap = showMiniMap;
    }

    public boolean isMiniMapEnabled() {
        return showMinimap;
    }

    public void setMiniMapHeight(final int miniMapHeight) {
        if (miniMapHeight < 0) {
            return;
        }
        this.miniMapHeight = miniMapHeight;
    }

    public int getMiniMapHeight() {
        return miniMapHeight;
    }

    public void setMiniMapColor(final int color) {
        miniMapColor = color;
    }

    public int getMiniMapColor() {
        return miniMapColor;
    }

    public String getMiniMapCaption() {
        return miniMapCaption;
    }

    public void setMiniMapCaption(final String miniMapCaption) {
        this.miniMapCaption = miniMapCaption;
    }

    public float getMiniMapCaptionSize() {
        return miniMapCaptionSize;
    }

    public void setMiniMapCaptionSize(final float size) {
        miniMapCaptionSize = size;
    }

    public int getMiniMapCaptionColor() {
        return miniMapCaptionColor;
    }

    public void setMiniMapCaptionColor(final int color) {
        miniMapCaptionColor = color;
    }

    public void zoomTo(final float zoom, final float x, final float y) {
        this.zoom = Math.min(zoom, maxZoom);
        zoomX = x;
        zoomY = y;
        smoothZoomTo(this.zoom, x, y);
    }

    public void smoothZoomTo(final float zoom, final float x, final float y) {
        smoothZoom = clamp(1.0f, zoom, maxZoom);
        smoothZoomX = x;
        smoothZoomY = y;
        if (listener != null) {
            listener.onZoomStarted(smoothZoom, x, y);
        }
    }

    public ZoomViewListener getListener() {
        return listener;
    }

    public void setListner(final ZoomViewListener listener) {
        this.listener = listener;
    }

    public float getZoomFocusX() {
        return zoomX * zoom;
    }

    public float getZoomFocusY() {
        return zoomY * zoom;
    }

    @Override
    public boolean dispatchTouchEvent(final MotionEvent ev) {
        // single touch
        if (ev.getPointerCount() == 1) {
            processSingleTouchEvent(ev);
        }

        // // double touch
        if (ev.getPointerCount() == 2) {
            processDoubleTouchEvent(ev);
        }

        // redraw
        getRootView().invalidate();
        invalidate();

        return true;
    }

    private void processSingleTouchEvent(final MotionEvent ev) {

        final float x = ev.getX();
        final float y = ev.getY();

        final float w = miniMapHeight * (float) getWidth() / getHeight();
        final float h = miniMapHeight;
        final boolean touchingMiniMap = x >= 10.0f && x <= 10.0f + w && y >= 10.0f && y <= 10.0f + h;

        if (showMinimap && smoothZoom > 1.0f && touchingMiniMap) {
            processSingleTouchOnMinimap(ev);
        } else {
            processSingleTouchOutsideMinimap(ev);
        }
    }

    private void processSingleTouchOnMinimap(final MotionEvent ev) {
        final float x = ev.getX();
        final float y = ev.getY();

        final float w = miniMapHeight * (float) getWidth() / getHeight();
        final float h = miniMapHeight;
        final float zx = (x - 10.0f) / w * getWidth();
        final float zy = (y - 10.0f) / h * getHeight();
        smoothZoomTo(smoothZoom, zx, zy);
    }

    private void processSingleTouchOutsideMinimap(final MotionEvent ev) {
        final float x = ev.getX();
        final float y = ev.getY();
        float lx = x - touchStartX;
        float ly = y - touchStartY;
        final float l = (float) Math.hypot(lx, ly);
        float dx = x - touchLastX;
        float dy = y - touchLastY;
        touchLastX = x;
        touchLastY = y;

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touchStartX = x;
                touchStartY = y;
                touchLastX = x;
                touchLastY = y;
                dx = 0;
                dy = 0;
                lx = 0;
                ly = 0;
                scrolling = false;
                break;

            case MotionEvent.ACTION_MOVE:
                if (scrolling || (smoothZoom > 1.0f && l > 30.0f)) {
                    if (!scrolling) {
                        scrolling = true;
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                        super.dispatchTouchEvent(ev);
                    }
                    smoothZoomX -= dx / zoom;
                    smoothZoomY -= dy / zoom;
                    return;
                }
                break;

            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_UP:

                // tap
                if (l < 30.0f) {
                    // check double tap
                    if (System.currentTimeMillis() - lastTapTime < 500) {
                        if (smoothZoom == 1.0f) {
                            smoothZoomTo(maxZoom, x, y);
                        } else {
                            smoothZoomTo(1.0f, getWidth() / 2.0f, getHeight() / 2.0f);
                        }
                        lastTapTime = 0;
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                        super.dispatchTouchEvent(ev);
                        return;
                    }

                    lastTapTime = System.currentTimeMillis();

                    performClick();
                }
                break;

            default:
                break;
        }

        ev.setLocation(zoomX + (x - 0.5f * getWidth()) / zoom, zoomY + (y - 0.5f * getHeight()) / zoom);

        ev.getX();
        ev.getY();

        super.dispatchTouchEvent(ev);
    }

    private void processDoubleTouchEvent(final MotionEvent ev) {
        final float x1 = ev.getX(0);
        final float dx1 = x1 - lastdx1;
        lastdx1 = x1;
        final float y1 = ev.getY(0);
        final float dy1 = y1 - lastdy1;
        lastdy1 = y1;
        final float x2 = ev.getX(1);
        final float dx2 = x2 - lastdx2;
        lastdx2 = x2;
        final float y2 = ev.getY(1);
        final float dy2 = y2 - lastdy2;
        lastdy2 = y2;

        // pointers distance
        final float d = (float) Math.hypot(x2 - x1, y2 - y1);
        final float dd = d - lastd;
        lastd = d;
        final float ld = Math.abs(d - startd);

        Math.atan2(y2 - y1, x2 - x1);
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startd = d;
                pinching = false;
                break;

            case MotionEvent.ACTION_MOVE:
                if (pinching || ld > 30.0f) {
                    pinching = true;
                    final float dxk = 0.5f * (dx1 + dx2);
                    final float dyk = 0.5f * (dy1 + dy2);
                    smoothZoomTo(Math.max(1.0f, zoom * d / (d - dd)), zoomX - dxk / zoom, zoomY - dyk / zoom);
                }

                break;

            case MotionEvent.ACTION_UP:
            default:
                pinching = false;
                break;
        }

        ev.setAction(MotionEvent.ACTION_CANCEL);
        super.dispatchTouchEvent(ev);
    }

    private float clamp(final float min, final float value, final float max) {
        return Math.max(min, Math.min(value, max));
    }

    private float lerp(final float a, final float b, final float k) {
        return a + (b - a) * k;
    }

    private float bias(final float a, final float b, final float k) {
        return Math.abs(b - a) >= k ? a + k * Math.signum(b - a) : b;
    }

    @Override
    protected void dispatchDraw(final Canvas canvas) {
        // do zoom
        zoom = lerp(bias(zoom, smoothZoom, 0.05f), smoothZoom, 0.2f);
        smoothZoomX = clamp(0.5f * getWidth() / smoothZoom, smoothZoomX, getWidth() - 0.5f * getWidth() / smoothZoom);
        smoothZoomY = clamp(0.5f * getHeight() / smoothZoom, smoothZoomY, getHeight() - 0.5f * getHeight() / smoothZoom);

        zoomX = lerp(bias(zoomX, smoothZoomX, 0.1f), smoothZoomX, 0.35f);
        zoomY = lerp(bias(zoomY, smoothZoomY, 0.1f), smoothZoomY, 0.35f);
        if (zoom != smoothZoom && listener != null) {
            listener.onZooming(zoom, zoomX, zoomY);
        }

        final boolean animating = Math.abs(zoom - smoothZoom) > 0.0000001f
                || Math.abs(zoomX - smoothZoomX) > 0.0000001f || Math.abs(zoomY - smoothZoomY) > 0.0000001f;

        // nothing to draw
        if (getChildCount() == 0) {
            return;
        }

        // prepare matrix
        m.setTranslate(0.5f * getWidth(), 0.5f * getHeight());
        m.preScale(zoom, zoom);
        m.preTranslate(-clamp(0.5f * getWidth() / zoom, zoomX, getWidth() - 0.5f * getWidth() / zoom),
                -clamp(0.5f * getHeight() / zoom, zoomY, getHeight() - 0.5f * getHeight() / zoom));

        // get view
        final View v = getChildAt(0);
        m.preTranslate(v.getLeft(), v.getTop());

        // get drawing cache if available
        if (animating && ch == null && isAnimationCacheEnabled()) {
            v.setDrawingCacheEnabled(true);
            ch = v.getDrawingCache();
        }

        // draw using cache while animating
        if (animating && isAnimationCacheEnabled() && ch != null) {
            p.setColor(0xffffffff);
            canvas.drawBitmap(ch, m, p);
        } else { // zoomed or cache unavailable
            ch = null;
            canvas.save();
            canvas.concat(m);
            v.draw(canvas);
            canvas.restore();
        }

        // draw minimap
        if (showMinimap) {
            if (miniMapHeight < 0) {
                miniMapHeight = getHeight() / 4;
            }

            canvas.translate(10.0f, 10.0f);

            p.setColor(0x80000000 | 0x00ffffff & miniMapColor);
            final float w = miniMapHeight * (float) getWidth() / getHeight();
            final float h = miniMapHeight;
            canvas.drawRect(0.0f, 0.0f, w, h, p);

            if (miniMapCaption != null && miniMapCaption.length() > 0) {
                p.setTextSize(miniMapCaptionSize);
                p.setColor(miniMapCaptionColor);
                p.setAntiAlias(true);
                canvas.drawText(miniMapCaption, 10.0f, 10.0f + miniMapCaptionSize, p);
                p.setAntiAlias(false);
            }

            p.setColor(0x80000000 | 0x00ffffff & miniMapColor);
            final float dx = w * zoomX / getWidth();
            final float dy = h * zoomY / getHeight();
            canvas.drawRect(dx - 0.5f * w / zoom, dy - 0.5f * h / zoom, dx + 0.5f * w / zoom, dy + 0.5f * h / zoom, p);

            canvas.translate(-10.0f, -10.0f);
        }

        // redraw
        // if (animating) {
        getRootView().invalidate();
        invalidate();
        // }
    }
}

public class BookView extends ScrollViewCustom {

...

}