2D Translations Rotating Polygons
in
Programming Questions
•
5 months ago
Hi,
I'm trying to do some basic 2.D transformations. I was hoping to create an animation sketch translating 2D shapes in three-dimensional perspective. I figure making use of
z axis translations is the best method for this, but I'm not so sure how to approach this; I'm intentionally avoiding the use of 3D shapes.
Looking at some references and tool tips, I've managed to get as far as translating 3 sided shapes to create a "spin animation" (e.g. triangle) by translating points, but it's pretty messy and uses a lot
if statements and line objects. Ideally I'd like to include z axis rotating.
I thought a good starting point would be getting a handle on basic shape transformations. So I've been looking at creating and translating drawn shapes. I believe using SVG graphics is another possible option I can attempt for this[?] but at the moment this is what I'm working with.
The following sketch is my attempt at emulating a triangle rotation on a 0axis. I was wondering if anyone would be able to suggest how to do this without the cumbersome use of loops I'm attempting? I'm sure there's a cleaner, clearer way to do this.
N.B. I'm not focusing on including a z axis roation on 'this' sketch, as I can't even seem to get a simple 2D rotation.
- void setup() {
- size(400, 400);
- }
- //Line x and y coordinates
- //top points of triangle
- int t1 = 100;
- int t2 = 50;
- //left points of triangle
- int l1 = 50;
- int l2 = 150;
- //right points of triangle
- int r1 = 150;
- int r2 = 150;
- //Second set of top points
- //x and y coordinates of rightline
- //from bottom right corner to 'top'
- int p1 = 100;
- int p2 = 50;
- void draw() {
- background(150);
- //Draw shape with lines
- stroke(255);
- strokeWeight(8);
- translate(100, 100);
- line(t1, t2, l1, l2); //top angle to left
- line(l1, l2, r1, r2); //left angle to right
- line(r1, r2, p1, p2); //right angle to top
- //Move top x axis left
- if(t1 > 50) {
- t1 = t1 - 1;
- }
- //Move top y axis down
- if(t2 < 110){
- t2 = t2 + 1;
- }
- //Move *second top x axis left
- if(p1 > 50) {
- p1 = p1 - 1;
- }
- //Move *second top y axis down
- if(p2 < 100){
- p2 = p2 + 1;
- }
- //Move right y axis up
- if(r2 > 70){
- r2 = r2 - 1;
- }
- //Move left x axis right
- if(l1 < 150){
- l1 = l1 + 1;
- }
- //Draw guide lines
- stroke(255, 0, 0);
- strokeWeight(2);
- line(0, 110, 200, 110);
- line(100, 0, 100, 200);
- stroke(0, 0, 255);
- line(0, 30, 200, 190);
- line(0, 190, 200, 30);
- }
1
