Changing triangle into center mode

Questions
1

– I’m trying to get triangles in center mode
so they can be spun in separate directions using the rotate CMD…

Does anyone have any ideas ???

Right now it seems to be spinning in corner mode……

displayMode(FULLSCREEN)
rectMode(CENTER)

function setup()
    t1= MakeTriangle(vec2(250,150),vec2(480,150),vec2(360,250),color(0, 0, ,255))
    t2= MakeTriangle(vec2(150,150),vec2(380,150),vec2(260,250),color(0, 255, ,0))
end   

function MakeTriangle(v1,v2,v3,c)
    m=mesh()
    m.vertices={v1,v2,v3}
    m:setColors(c)
    return m
end

function draw()
    background(0)
   -- pushMatrix()
    t1:draw()
    rotate(5)
    t2:draw()
   -- popMatrix()
end
2

@kendog400 - I think you’ll have to calculate the centre point yourself, then calculate the corner points as offsets of that. You can then rotate the points mathematically.

There is a demo in Examples using a mesh which may give you some hints.

3

if you translate to the triangle center, then rotate, then draw, you should get what you need. you’ll need a few push and pop matrix calls to get back for the next draw.

4 
displayMode(FULLSCREEN)

function setup()  
    stroke(255)
    strokeWidth(2) 
    ang=0 
    size=300
    -- create triangle points
    x1=math.cos(math.rad(0))*size
    y1=math.sin(math.rad(0))*size
    x2=math.cos(math.rad(120))*size
    y2=math.sin(math.rad(120))*size
    x3=math.cos(math.rad(240))*size
    y3=math.sin(math.rad(240))*size
end

function draw()
    background(0)
    translate(WIDTH/2,HEIGHT/2)
    rotate(ang)
    line(x1,y1,x2,y2)
    line(x2,y2,x3,y3)
    line(x1,y1,x3,y3)
    translate()
    ang=ang+1
end
5

Thanks everyone !

6

Everything works but I still havent figured where the triangle center point is, it seems like I’m adjusting the background or screen mode with translate, I will soon need that to when I circle a bunch of triangles and spin them all at once…

7 
-- Plain triangle

 --[[ if you translate to the triangle center, then rotate, then draw, you should get what you need. you'll need a few push and pop matrix calls to get back for the next draw. ]]-- 

displayMode(FULLSCREEN) 

function setup() 
a=0    -- a is the angle 
-- ( right, bottom, top ) 
t1 = MakeTriangle (vec2(250,150), vec2(480,150), vec2(360,250), color(0, 0, 255)) 
end 

function MakeTriangle (v1, v2, v3, c) m=mesh()     
m.vertices={v1, v2, v3} m:setColors(c)
 return m 
end 

function draw() 
background(0) 
a=a+1  
translate(WIDTH/2-200,HEIGHT/2-100) 
rotate(a) 
t1:draw() 
translate() 
end
8

Is there some mathmaticle formula to calculate the center point of a triangle ???
My triangle seems to be going off the screen…

9

Thanks to anyone and everyone !

10

Here’s an example using triangle centroid, one of the ways to compute a triangle’s center. Questions welcome.

-- Counter-rotating triangles
-- RJ 20200913

function setup()
    t1 = Triangle(vec2(500,500), 1)
    t2 = Triangle(vec2(700,700), -1)
end

function draw()
    background(0)
    stroke(255)
    strokeWidth(2)
    t1:draw()
    t2:draw()
end

Triangle = class()

function Triangle:init(pos, dir)
    self.pos = pos
    self.dir = dir
    self.points = {vec2(250,150), vec2(480,150), vec2(360,250),vec2(250,150)}
    self:adjustToCentroid()
    self.angle = 0
end

function Triangle:draw()
    pushStyle()
    pushMatrix()
    translate(self.pos.x, self.pos.y)
    rotate(self.angle)
    for i = 1,3 do
        local p1 = self.points[i]
        local p2 = self.points[i+1]
        line(p1.x,p1.y, p2.x, p2.y)
    end
    popMatrix()
    popStyle()
    self.angle = self.angle + self.dir
end

function Triangle:adjustToCentroid()
    local c = self:centroid()
    for i = 1,4 do
        self.points[i] = self.points[i]-c
    end
end

function Triangle:centroid()
    p1 = self.points[1]
    p2 = self.points[2]
    p3 = self.points[3]
    centroidx = (p1.x+p2.x+p3.x)/3
    centroidy = (p1.y+p2.y+p3.y)/3
    return vec2(centroidx, centroidy)
end
11

The basic trick here is to draw the triangle centered around its “center”, the centroid in this case. I do that by subtracting the centroid from each of the triangle’s coordinates, so that it is now “local” to the centroid. Then the translate command positions us at that centroid - center, and we can then rotate and draw.

The centroid is just the average of the corners. Could be calculated in vector mode but I didn’t.

c = (p1+p2+p3)/3

should work just fine. Not tested. :slight_smile:

p.s. tested, works, :slight_smile:

function Triangle:centroid()
    p1 = self.points[1]
    p2 = self.points[2]
    p3 = self.points[3]
    return (p1+p2+p3)/3
end
12

Here’s something I had from long ago.

displayMode(FULLSCREEN)

function setup()
    size=50
    count=0
    tab={}
end

function draw()
    background(132, 224, 217, 255)
    fill(255)
    for a,b in pairs(tab) do
        b:draw()
    end
    count=count+1
    if count>30 then
        count=0
        table.insert(tab,m(math.random(size,WIDTH-size),math.random(size,HEIGHT-size),math.random(360)))
    end
end

m=class()

function m:init(x,y,r)
    self.x=x
    self.y=y
    self.rot=r
    self.ms=mesh()
    self.col=color(math.random(255),math.random(255),math.random(255))
    self.count=math.random(-4,4)
    self.sz=math.random(size)
end

function m:draw()
    pushMatrix()
    translate(self.x,self.y)
    rotate(self.rot)
    self.ms.vertices={vec2(-self.sz,-self.sz),vec2(self.sz,-self.sz),vec2(0,self.sz*1.414)}
    self.ms:setColors(self.col)
    self.rot=self.rot+self.count
    self.ms:draw()
    popMatrix()
end
13

Added 1 line in setup
Replaced two lines…
Added fill in the draw fx

Got error msg :
Main : 58 : bad argument

-2 to ‘_ _ add’ (vec2)

stack traceback : [c] in meta method ‘_ _ add’
Main : 58 : in method ‘draw’
Main : 31 : in function ‘draw’

14 
— Centeroid 
displayMode(FULLSCREEN) 
function setup() 
angle=0    
-- replaced two lines 
t1 = Triangle (vec2(250,150), vec2(480,150), vec2(360,250), 1)
 t2 = Triangle (vec2(350,150), vec2(580,150), vec2(560,350), -1) 
end 

function draw() 
background(0) 
stroke(255) 
strokeWidth(2) 
fill(0, 0, 255)          — added t
1:draw() 
t2:draw() 
end 

Triangle = class() 
function Triangle:init(pos, dir) 
self.pos = pos 
self.dir = dir 
self.points = {vec2(250,150), vec2(480,150), vec2(360,250),vec2(250,150)} self:adjustToCentroid() 
self.angle = 0 end 

function Triangle:draw() 
pushStyle() 
pushMatrix() 
translate(self.pos.x, self.pos.y) rotate(self.angle) 
for i = 1,3 do local p1 = self.points[i] local p2 = self.points[i+1] line(p1.x,p1.y, p2.x, p2.y) 
end 
popMatrix() 
popStyle() 
self.angle = self.angle + self.dir 
end 

function Triangle:adjustToCentroid() 
local c = self:centroid() 
for i = 1,4 do self.points[i] = self.points[i]-c 
end 
end 

function Triangle:centroid() 
p1 = self.points[1] 
p2 = self.points[2] 
p3 = self.points[3]
centroidx = (p1.x+p2.x+p3.x)/3
    centroidy = (p1.y+p2.y+p3.y)/3
    return vec2(centroidx, centroidy)
end
15

Triangle:init only has 1 pos and 1 dir, but your calling it with 3 vec2 values and 1 dir value

16

I got pgm from RonJefferies, l never complain, I appreciate any and all the help I get…

17

I’m looking over pgm, I just havent figured out where to make adjustments…

18

@kendog400 A suggestion. When you make changes to a program that originally worked, make a small change. If you get an error, fix that error or remove it before you make more changes. Constantly making changes to someone’s program and then asking why it doesn’t work isn’t going to help you learn. In my comment above, I gave you what you need to do to fix it.

19

Ok, I went back to the drawing board, I still haven’t seen any rotation as of yet

-- Rotating Triangle

displayMode(FULLSCREEN)
--====================
function setup()  
    ang=0
-- the vec points
    a=-120  -- right side x position
    b=-60   -- right side y position
    c= 100  -- left side x position
    d=-60   -- left side y position
    e=-10  -- tips x position
    f= 60  -- tips y position
--..............................................................   
             -- ( left, right, tip )
t1 = MakeTriangle (vec2(a,b), vec2(c,d), vec2(e,f), color(0, 0, 255))
--............................................................... 
end
--==============================
function draw()
    background(0)
 --...............................................................   
-- Draw a blue rect with light opacity to highlite the controls at the bottom
    fill(0, 0, 255, 50)              -- this fills the rect with blue
    strokeWidth(1.5)
    rect(6,3,265,35)                 -- this is the wht highliteer   
 --............................................................... 
    translate(WIDTH/2,HEIGHT/2)
    t1:draw()
    rotate(ang)
    ang=ang+1   
end
--===========================
 function MakeTriangle (v1, v2, v3, c)
   m=mesh()
   m.vertices={v1, v2, v3}
   m:setColors(c) 
  return m
 end
20

I think I’m getting close…