how to move a vertex design

Hi, I'm having trouble moving this design, not by animation but I want to move it to different places on the canvas with hard code. In this case, I'm trying to move it to coordinates (0,0) by using arguments and parameters. Thank you for your help.

function setup() {
    createCanvas(
        window.innerWidth,
        window.innerHeight
    );
}

function draw() {
    background(0);
    ship(0, 0);
 }

function ship(x, y) {
    noFill();
    stroke(0, 255, 0);
    beginShape();
    vertex(200, 10);
    vertex(195, 10);
    vertex(195, 25);
    vertex(180, 25);
    vertex(180, 50);
    vertex(130, 50);
    vertex(130, 60);
    vertex(120, 60);
    vertex(120, 90); 
    vertex(280, 90);
    vertex(280, 60);
    vertex(270, 60);
    vertex(270, 50);
    vertex(220, 50);
    vertex(220, 25);
    vertex(205, 25);
    vertex(205, 10);
    vertex(200, 10)
    endShape();
}

Answers

  • Answer ✓

    You can use translate. I believe you could also use a PGraphics object in p5.js.

    http://p5js.org/reference/#/p5/translate
    http://p5js.org/reference/#/p5/push

    Here is the example using translate:

    function setup() {
        createCanvas(
            window.innerWidth,
            window.innerHeight
        );
    }
    
    function draw() {
        background(0);    
        ship(mouseX,mouseY);
     }
    
    function ship(x, y) {
        push();
        translate(x-200,y-55);
        noFill();
        stroke(0, 255, 0);
        beginShape();
        vertex(200, 10);
        vertex(195, 10);
        vertex(195, 25);
        vertex(180, 25);
        vertex(180, 50);
        vertex(130, 50);
        vertex(130, 60);
        vertex(120, 60);
        vertex(120, 90); 
        vertex(280, 90);
        vertex(280, 60);
        vertex(270, 60);
        vertex(270, 50);
        vertex(220, 50);
        vertex(220, 25);
        vertex(205, 25);
        vertex(205, 10);
        vertex(200, 10)
        endShape();
        pop();
    }
    

    The value of 200 and 55 are calculated based on the geometrical center of your figure. The way you draw your ship, x values go from 120 to 280. So in this case, the geometrical center is x_center= min + (max-min)/2. You can applied the same reasoning along the other dimension, y.

    An alternative is to draw your ship's geometric center at the 0,0 position so you don't need to keep track of these values in your code. For example, if your ship was a square, instead of drawing rect(0,0,100,100) you could draw rect(-50,-50,50,50). This last example works only if you don't change the rectMode().

    Kf

  • edited March 2017

    Thanks, that helped a lot. I have to make some more designs. I'll have to learn what you did above... so in your math above, does it mean: 120 + (280-120)/2?

    I don't know what you did. Aren't pull and pop for an array? I don't know the translate method. I'll go to youtube.

    Thanks again. Right now I'm going to continue making the designs. It's fun. There must be some math that helps making them. Do you know what it might be?

  • by math, I didn't mean bezier curves and stuff. I'm making the space invader characters and it can be tricky getting them to be the right size.

  • Check the keywords that you don't know in the reference:
    http://p5js.org/reference/ because that is the reason we have it. I can't remember remember all the details out there. If something is not clear in the reference, or you need more info or questions, ask here and people will be really helpful in assisting.

    The reference provides short explanations and good examples. If you are going to be moving and rotating objects in your game, you need to learn push() and pop() as it will make your life simpler. I recommend this two tutorials:

    https://processing.org/tutorials/transform2d/
    https://processing.org/tutorials/objects/

    This last link talks about classes which I recommend using to contain the information of your ship.

    Kf

  • edited March 2017 Answer ✓

    Aren't push() and pop() for an Array?

    Sure, JS' standard built-in class Array got those 2 methods and many more:
    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Mutator_methods

    However, that doesn't mean other classes can't have methods w/ those very same names! L-)

    p5.js' class p5 also got methods push() & pop().
    Only then they do completely different things than Array's. :-\"

  • Thanks @GoToLoop... I can see now what the OP was asking.

    Kf

  • edited March 2017

    I hope this makes sense. I'm trying to get hit detection on the bunkers. I think there maybe a problem with my x and y coordinates?

    I'm using the commented out code at the bottom for the hit detection. I have more code elsewhere in my code than this but I think you can see at the bottom, I am trying to use the --- "bunker.r, bunker.x, and bunker.y" variables so the missiles in the other code detect the bunkers... It is not working but I get no errors in the console. If this is confusing, perhaps just write too confusing and don't bother answering it.

    Thank a lot... or maybe you can see the problem. Perhaps I need a Pvector?

    var bunkers = []; 
    
    function setup(){
        createCanvas(window.innerWidth, window.innerHeight);
    
        for (var i = 0; i < 4; i++) {
            bunkers[i] = new Bunker(i*294 + 247, height-140);          
       }   
     }
    
    function draw(){
        for (var i = 0; i < 4; i++) {
          bunkers[i].show();        
       }
    }
    
    function Bunker(x, y) { 
          this.x = x;
          this.y = y;
          this.r = 60;  
          this.show = function() {
              push();
              translate(this.x-257, this.y-68);
              noStroke();
              fill(0, 100, 0);
              beginShape();
              vertex(200, 50);
              vertex(208, 50);
              vertex(208, 42);
              vertex(216, 42);
              vertex(216, 34);
              vertex(224, 34);
              vertex(224, 26);
              vertex(290, 26);
              vertex(290, 34);
              vertex(298, 34);
              vertex(298, 42);
              vertex(306, 42);
              vertex(306, 50);
              vertex(314, 50);
              vertex(314, 110);
              vertex(290, 110);
              vertex(290, 102);
              vertex(282, 102);
              vertex(282, 94);
              vertex(274, 94);
              vertex(274, 86);
              vertex(240, 86);
              vertex(240, 94);
              vertex(232, 94);
              vertex(232, 102);
              vertex(224, 102);
              vertex(224, 110);
              vertex(200, 110);
              endShape(CLOSE);
              pop();
       }
    }
    
    
    
    /* this.hitbunker = function(bunker) {
               var d = dist(this.x, this.y, bunker.x, bunker.y);      
               if(d < this.r + bunker.r) {
                  return true;
              } else {
                  return false;
         }*/
    
Sign In or Register to comment.