› ›

How to keep a moving obj in the center of the screen

ziphead2ziphead2
edited February 2017 in p5.js Programming Questions

Hello. I've got two objects here : Red prototype "square" and its child green "zz". What I want is to click on the object and focus the screen on it. Make it stuck to it even when it moves. I can manage the clicking function but need a hint for the centering concept here.

    var angle;


    var Polygon= function(x, y, hi, wei) {
        this.x = x;
        this.y = y;
        this.height = hi;
        this.width = wei;
    }
      Polygon.prototype.display = function() {
          push();
          translate(this.x, this.y);

          rect(0, 0,this.height, this.width);
          pop();
      }

      Polygon.prototype.area = function () {
        return this.calcArea();
      }

      Polygon.prototype.calcArea = function () {
        return this.height * this.width;
      }

    function Protogon(x, y, hi, wei, word) {
      Polygon.call(this, x, y, hi, wei);
      this.word = word;

    };

    Protogon.prototype= Object.create(Polygon.prototype); 
    Protogon.prototype.constructor = Protogon;
    Protogon.prototype.display = function() {
          push();
          translate(this.x, this.y);
          rotate(angle);
          rect(50, 0,this.height, this.width);
          text(this.word, 50, -10);
          pop();
    }

    function setup() {
      createCanvas(720, 400);
      angle = 1.0;
      square = new Polygon(width/2, height/2, 20, 40);
      zz = new Protogon(square.x+20, square.y+20, 60, 40, "Hello");
    }

    function draw() {
      background(50, 89, 100);
      stroke(1);
      fill('red'); 
      square.display();
      fill('green');
      zz.display();
      angle+=0.01 ;
    }
Tagged:

Answers

Sign In or Register to comment.