Revisions to How to calculate corner positions/marks of a rotated/tilted rectangle?

deleted 933 characters in body

Source Link

edited Feb 6, 2017 at 11:57

91
7

function setup() {
    createCanvas(400, 400);
}

var count = 0;

function draw() {
  // Fundo
  background(250);
  rectMode(CENTER);
  stroke(0,0,255);
  fill(0,0,255);
  count += 1;

  var box1X = 100;
  var box1Y = 100;
  var box2X = 160;
  var box2Y = 100;
  var box1R = 0+count;count;
  var box2R = 60;-60-count;
  var box1W = 50;
  var box1H = 50;
  var box2W = 50;
  var box2H = 50;

    //if (mouseIsPressed){
        
        //new Retangulo(createVector(mouseX, mouseY), createVector(10, 10), rectagles, true, createVector(ceil(random(255)), ceil(random(255)), ceil(random(255))));
        translate(box1X, box1Y);
        rotate(radians(box1R));
        rect(0, 0, box1W, box1H);
        rotate(radians(-box1R));
        translate(-box1X, -box1Y);

        //translate(0, 0);
        translate(box2X, box2Y);
        rotate(radians(-box2R-count));
        rect(0, 0, box2W, box2H);
        rotate(radians(box2R+count-box2R));
        translate(-box2X, -box2Y);
        
        var box1Dots = [];
        var box1Dots = [];
        
        //box1Dots.push(createVector(100, 100)
        
  stroke(255,0,0);
  fill(255,0,0);

  var pointRotated = [];
  pointRotated.push(createVector(box1X, box1Y)); // Dot5
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, box1H/2));  // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, box1H/2));   // Dot2
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, -box1H/2)); // Dot1Dot3
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, -box1H/2));  // Dot2Dot4
  pointRotated.push(createVector(box1X, box1Y)); // Dot5

  for (var i=0;i<pointRotated.length;i++){
    ellipse(pointRotated[i].x,pointRotated[i].y,3,3); // dot 1
  }
}
 

function GetPointRotated(X, Y, W, H, R, Xos, Yos){
    // CxXos, CyYos // the coordinates of your center point in world coordinates
    // W      // the width of your rectangle
    // H      // the height of your rectanglerect
    // θR      // the angle you wish to rotate

    //The offset of a corner in local coordinates (i.e. relative to the pivot point)
    //(which corner will depend on the coordinate reference system used in your environment)

    //The rotated position of this corner in world coordinates    
    var rotatedX = X + (Xos  * cos(radians(R))) - (Yos * sin(radians(R)))
    var rotatedY = Y + (Xos  * sin(radians(R))) + (Yos * cos(radians(R)))

    return createVector(rotatedX, rotatedY)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

function setup() {
    createCanvas(400, 400);
}

var count = 0;

function draw() {
  // Fundo
  background(250);
  rectMode(CENTER);
  stroke(0,0,255);
  fill(0,0,255);
  count += 1;

  var box1X = 100;
  var box1Y = 100;
  var box2X = 160;
  var box2Y = 100;
  var box1R = 0+count;
  var box2R = 60;
  var box1W = 50;
  var box1H = 50;
  var box2W = 50;
  var box2H = 50;

    //if (mouseIsPressed){
        
        //new Retangulo(createVector(mouseX, mouseY), createVector(10, 10), rectagles, true, createVector(ceil(random(255)), ceil(random(255)), ceil(random(255))));
        translate(box1X, box1Y);
        rotate(radians(box1R));
        rect(0, 0, box1W, box1H);
        rotate(radians(-box1R));
        translate(-box1X, -box1Y);

        //translate(0, 0);
        translate(box2X, box2Y);
        rotate(radians(-box2R-count));
        rect(0, 0, box2W, box2H);
        rotate(radians(box2R+count));
        translate(-box2X, -box2Y);
        
        var box1Dots = [];
        var box1Dots = [];
        
        //box1Dots.push(createVector(100, 100)
        
  stroke(255,0,0);
  fill(255,0,0);

  var pointRotated = [];
  pointRotated.push(createVector(box1X, box1Y)); // Dot5
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, box1H/2)); // Dot2
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, -box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, -box1H/2)); // Dot2

  for (var i=0;i<pointRotated.length;i++){
    ellipse(pointRotated[i].x,pointRotated[i].y,3,3); // dot 1
  }
}
 

function GetPointRotated(X, Y, W, H, R, Xos, Yos){
    // Cx, Cy // the coordinates of your center point in world coordinates
    // W      // the width of your rectangle
    // H      // the height of your rectangle
    // θ      // the angle you wish to rotate

    //The offset of a corner in local coordinates (i.e. relative to the pivot point)
    //(which corner will depend on the coordinate reference system used in your environment)

    //The rotated position of this corner in world coordinates    
    var rotatedX = X + (Xos  * cos(radians(R))) - (Yos * sin(radians(R)))
    var rotatedY = Y + (Xos  * sin(radians(R))) + (Yos * cos(radians(R)))

    return createVector(rotatedX, rotatedY)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

function setup() {
createCanvas(400, 400);
}

var count = 0;

function draw() {
  background(250);
  rectMode(CENTER);
  stroke(0,0,255);
  fill(0,0,255);
  count += 1;

  var box1X = 100;
  var box1Y = 100;
  var box2X = 160;
  var box2Y = 100;
  var box1R = count;
  var box2R = -60-count;
  var box1W = 50;
  var box1H = 50;
  var box2W = 50;
  var box2H = 50;

  translate(box1X, box1Y);
  rotate(radians(box1R));
  rect(0, 0, box1W, box1H);
  rotate(radians(-box1R));
  translate(-box1X, -box1Y);

  translate(box2X, box2Y);
  rotate(radians(box2R));
  rect(0, 0, box2W, box2H);
  rotate(radians(-box2R));
  translate(-box2X, -box2Y);

  stroke(255,0,0);
  fill(255,0,0);

  var pointRotated = [];
  pointRotated.push(GetPointRotated(box1X, box1Y, box1R, -box1W/2, box1H/2));  // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1R, box1W/2, box1H/2));   // Dot2
  pointRotated.push(GetPointRotated(box1X, box1Y, box1R, -box1W/2, -box1H/2)); // Dot3
  pointRotated.push(GetPointRotated(box1X, box1Y, box1R, box1W/2, -box1H/2));  // Dot4
  pointRotated.push(createVector(box1X, box1Y)); // Dot5

  for (var i=0;i<pointRotated.length;i++){
ellipse(pointRotated[i].x,pointRotated[i].y,3,3);
  }
}

function GetPointRotated(X, Y, R, Xos, Yos){
// Xos, Yos // the coordinates of your center point of rect
// R      // the angle you wish to rotate

//The rotated position of this corner in world coordinates    
var rotatedX = X + (Xos  * cos(radians(R))) - (Yos * sin(radians(R)))
var rotatedY = Y + (Xos  * sin(radians(R))) + (Yos * cos(radians(R)))

return createVector(rotatedX, rotatedY)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

Integrated the content in the post, re-formulated.

Source Link

edited Feb 4, 2017 at 22:07

Vaillancourt ♦

16.4k
17
56
61

Thank you guys for this.Based on the other answers, and to complement them, I managemanaged to create uman example with P5 here. Here

Here is the linkcode, in case you want to access it directly:

https://jsfiddle.net/Danfus/zu8y0ebo/

function setup() {
    createCanvas(400, 400);
}

var count = 0;

function draw() {
  // Fundo
  background(250);
  rectMode(CENTER);
  stroke(0,0,255);
  fill(0,0,255);
  count += 1;

  var box1X = 100;
  var box1Y = 100;
  var box2X = 160;
  var box2Y = 100;
  var box1R = 0+count;
  var box2R = 60;
  var box1W = 50;
  var box1H = 50;
  var box2W = 50;
  var box2H = 50;

    //if (mouseIsPressed){
        
        //new Retangulo(createVector(mouseX, mouseY), createVector(10, 10), rectagles, true, createVector(ceil(random(255)), ceil(random(255)), ceil(random(255))));
        translate(box1X, box1Y);
        rotate(radians(box1R));
        rect(0, 0, box1W, box1H);
        rotate(radians(-box1R));
        translate(-box1X, -box1Y);

        //translate(0, 0);
        translate(box2X, box2Y);
        rotate(radians(-box2R-count));
        rect(0, 0, box2W, box2H);
        rotate(radians(box2R+count));
        translate(-box2X, -box2Y);
        
        var box1Dots = [];
        var box1Dots = [];
        
        //box1Dots.push(createVector(100, 100)
        
  stroke(255,0,0);
  fill(255,0,0);

  var pointRotated = [];
  pointRotated.push(createVector(box1X, box1Y)); // Dot5
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, box1H/2)); // Dot2
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, -box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, -box1H/2)); // Dot2

  for (var i=0;i<pointRotated.length;i++){
    ellipse(pointRotated[i].x,pointRotated[i].y,3,3); // dot 1
  }
}


function GetPointRotated(X, Y, W, H, R, Xos, Yos){
    // Cx, Cy // the coordinates of your center point in world coordinates
    // W      // the width of your rectangle
    // H      // the height of your rectangle
    // θ      // the angle you wish to rotate

    //The offset of a corner in local coordinates (i.e. relative to the pivot point)
    //(which corner will depend on the coordinate reference system used in your environment)

    //The rotated position of this corner in world coordinates    
    var rotatedX = X + (Xos  * cos(radians(R))) - (Yos * sin(radians(R)))
    var rotatedY = Y + (Xos  * sin(radians(R))) + (Yos * cos(radians(R)))

    return createVector(rotatedX, rotatedY)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

Thank you guys for this. I manage to create um example with P5. Here is the link:

https://jsfiddle.net/Danfus/zu8y0ebo/

Based on the other answers, and to complement them, I managed to create an example with P5 here.

Here is the code, in case you want to access it directly:

function setup() {
    createCanvas(400, 400);
}

var count = 0;

function draw() {
  // Fundo
  background(250);
  rectMode(CENTER);
  stroke(0,0,255);
  fill(0,0,255);
  count += 1;

  var box1X = 100;
  var box1Y = 100;
  var box2X = 160;
  var box2Y = 100;
  var box1R = 0+count;
  var box2R = 60;
  var box1W = 50;
  var box1H = 50;
  var box2W = 50;
  var box2H = 50;

    //if (mouseIsPressed){
        
        //new Retangulo(createVector(mouseX, mouseY), createVector(10, 10), rectagles, true, createVector(ceil(random(255)), ceil(random(255)), ceil(random(255))));
        translate(box1X, box1Y);
        rotate(radians(box1R));
        rect(0, 0, box1W, box1H);
        rotate(radians(-box1R));
        translate(-box1X, -box1Y);

        //translate(0, 0);
        translate(box2X, box2Y);
        rotate(radians(-box2R-count));
        rect(0, 0, box2W, box2H);
        rotate(radians(box2R+count));
        translate(-box2X, -box2Y);
        
        var box1Dots = [];
        var box1Dots = [];
        
        //box1Dots.push(createVector(100, 100)
        
  stroke(255,0,0);
  fill(255,0,0);

  var pointRotated = [];
  pointRotated.push(createVector(box1X, box1Y)); // Dot5
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, box1H/2)); // Dot2
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, -box1W/2, -box1H/2)); // Dot1
  pointRotated.push(GetPointRotated(box1X, box1Y, box1W, box1H, box1R, box1W/2, -box1H/2)); // Dot2

  for (var i=0;i<pointRotated.length;i++){
    ellipse(pointRotated[i].x,pointRotated[i].y,3,3); // dot 1
  }
}


function GetPointRotated(X, Y, W, H, R, Xos, Yos){
    // Cx, Cy // the coordinates of your center point in world coordinates
    // W      // the width of your rectangle
    // H      // the height of your rectangle
    // θ      // the angle you wish to rotate

    //The offset of a corner in local coordinates (i.e. relative to the pivot point)
    //(which corner will depend on the coordinate reference system used in your environment)

    //The rotated position of this corner in world coordinates    
    var rotatedX = X + (Xos  * cos(radians(R))) - (Yos * sin(radians(R)))
    var rotatedY = Y + (Xos  * sin(radians(R))) + (Yos * cos(radians(R)))

    return createVector(rotatedX, rotatedY)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

Source Link

answered Feb 4, 2017 at 20:55

Danfus

91
7

Thank you guys for this. I manage to create um example with P5. Here is the link:

https://jsfiddle.net/Danfus/zu8y0ebo/

Stack Exchange Network

Return to Answer