how to move a vertex design

tim50

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();
}

kfrajer

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

tim50

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?

tim50

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.

kfrajer

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

GoToLoop

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. :-\"

kfrajer

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

Kf

tim50

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;
     }*/