Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Changing triangle into center mode

-- 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
~~~

Comments

  • edited September 11 Posts: 1,867
    @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.
  • 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.

  • dave1707dave1707 Mod
    Posts: 8,674
    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
    
  • Posts: 253
    Thanks everyone !
  • Posts: 253
    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..
  • Posts: 253
    ~~~
    -- 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
    ~~~
  • edited September 13 Posts: 253
    Is there some mathmaticle formula to calculate the center point of a triangle ???
    My triangle seems to be going off the screen...
  • Posts: 253
    Thanks to anyone and everyone !
  • 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
    
  • edited September 13 Posts: 762

    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. :)

    p.s. tested, works, :)

    function Triangle:centroid()
        p1 = self.points[1]
        p2 = self.points[2]
        p3 = self.points[3]
        return (p1+p2+p3)/3
    end
    
  • dave1707dave1707 Mod
    Posts: 8,674

    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
    
  • Posts: 253
    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'
  • Posts: 253
    ~~~
    — 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
    ~~~
  • dave1707dave1707 Mod
    Posts: 8,674

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

  • Posts: 253
    I got pgm from RonJefferies, l never complain, I appreciate any and all the help I get....
  • Posts: 253
    I'm looking over pgm, I just havent figured out where to make adjustments....
  • dave1707dave1707 Mod
    Posts: 8,674

    @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.

  • edited September 15 Posts: 253
    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
    ~~~
  • Posts: 253
    I think I’m getting close.....
  • dave1707dave1707 Mod
    Posts: 8,674

    You were close. The rotate goes before the draw. Add 1 to ang, not a.

        translate(WIDTH/2,HEIGHT/2)
        rotate(ang)
        t1:draw()
        ang=ang+1
    
  • Posts: 253
    Somehow I did it ! I had a ‘a’ instead of ang.... but I have 1 more question : how can I make this spin in reverse ??
  • Posts: 253
    I have another question, I put 4 ellipses in a table, I don’t know if this should be in a table or class, and I’m trying to make the table rotate from the center...
  • Posts: 253
    ~~~
    -- Ellipses
    --=========================
    function setup()
    ellipseMode(CORNER)
    a=0
    c { ellipse(350,200,50,100), ellipse(350,100,50,100),
    ellipse(385,175,100,50), ellipse(265,175,100,50) }
    end
    --========================
    function draw()
    background(0)
    translate (WIDTH/2,HEIGHT/2)
    fill(132, 217, 215)
    a=a+1
    rotate(a)
    c:draw()
    end
    --========================
    ~~~

    Does this look right ?? Or was I supposed to approach this from another angle ??? Maneuver these ellipse should be in a class...
  • dave1707dave1707 Mod
    Posts: 8,674

    @kendog400 You can’t take a working program and make wild changes to it and expect it to work. Your above code is so wrong I don’t think anything can be done to it to get it to work, other than deleting it and writing something else. Sorry for being so blunt, but ...

  • Posts: 253
    It's ok, I'm not good as you when it comes to programming...I would like to get that gud ..
  • Posts: 253
    This wasn't a working pgm, I made this up myself...I had an idea I just didn't know how to implement it...I was thinking I could put objects in a table and rotate the whole table, or mabey it would be better off in a class.....Cud u give me an idea on how to approach this ??? If I cud get by this one hurdle I cud get my roll going on...
  • dave1707dave1707 Mod
    Posts: 8,674

    Here’s your code, fixed somewhat. Don’t know what you were trying to do. I didn’t know anything about Codea/Lua when I started, but I just kept writing small programs until I understood what I was doing. Then I started writing larger ones, trying different things until I understood what they were doing. There’s still a lot that I don’t know, and I’m still learning. So just hang in there and write small code that you understand and try modifying it a little so you see what that’s doing. If you know a lot of small things, you can combine them into larger things.

    displayMode(FULLSCREEN)
    
    function setup()
        a=0
        c ={vec4(350,200,50,100),vec4(450,200,50,100),
            vec4(400,150,100,50),vec4(400,250,100,50) }
    end
    function draw()
        background(0)
        for z=1,#c do
            pushMatrix()
            translate (c[z].x,c[z].y)
            rotate(a)
            fill(132, 217, 215)
            ellipse(0,0,c[z].z,c[z].w)
            translate()
            popMatrix()
        end
        a=a+1
    end
    
  • Posts: 253
    Thanks ! ...
  • Posts: 253
    I have a quick question : does codea have other shapes like stars using vec2 commands ? Can a programmer make other shapes by adding vec2 points ? I checked the graphics help and only seen rect, ellipse, and that's all...
  • Posts: 1,867
    @kendog400 - you can build your own classes for different shapes, you may find code in the previous threads.
  • Posts: 253
    Can you Sen me a link to one so I cud take a peek and see how it's done ??
  • Posts: 253
    I have here 4 ellipses...I want to know if I should put them in a table or a class to spin them from the center...
    ~~~
    -- still ellipses

    displayMode(FULLSCREEN)

    function setup()
    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

    for i=1,4 do -- just show the 4 ellipses in a still position
    fill(255)
    e1 = ellipse (175,200, 50)
    e2 = ellipse (480,200, 50)
    e3 = ellipse (325,300, 50)
    e4 = ellipse (325,100, 50)
    end
    end
    ~~~
  • Posts: 253
    Here they are spinning but not from center mode, as you can see they move off the screen, I’m trying to keep them on the screen :
    ~~~
    displayMode(FULLSCREEN)
    function setup()
    -- ellipesMode(CORNER)
    ang=0
    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
    for i=1,4 do
    ang=ang+0.1
    fill(255)
    translate(50,0)
    e1 = ellipse (175,200, 50)
    e2 = ellipse (480,200, 50)
    e3 = ellipse (325,300, 50)
    e4 = ellipse (325,100, 50)
    rotate(ang)
    end

    end
    ~~~
  • Posts: 253
    Can anyone tell me how to go about this, I cud use different shapes with the same approach, in Cinema 4D it’s easy, I haven’t figured how to do this Codea...Thanks to anyone & everyone...
  • Posts: 253
    I can get 1 ellipses to stay on the screen but not 4...

    ~~~
    -- orbiting ellipse

    displayMode(FULLSCREEN)
    --======================
    function setup()
    ang=0

    --........................................................
    -- ( left, right, tip )
    e1 = ellipse (100,100, 50)
    --........................................................
    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)
    rotate(ang)
    e1 = ellipse (100,100, 50)
    ang=ang+1
    end
    --====================
    ~~~
  • dave1707dave1707 Mod
    Posts: 8,674
    -- orbiting ellipse
    
    displayMode(FULLSCREEN)
    --======================
    function setup()
        ang=0
    end
    --========================
    function draw()
        background(0)
        translate(WIDTH/2,HEIGHT/2)
        rotate(ang)
        ellipse (100,100, 50)
        ellipse (-100,100, 50)
        ellipse (100,-100, 50)
        ellipse (-100,-100, 50)
        ang=ang+1
    end
    
  • Posts: 253
    Cud anyone tell me why I’m not getting these triangles to spin in opposite directions ???
    ~~~

    -- Rotating Triangles

    displayMode(FULLSCREEN)
    blendMode(OVERLAY)
    -- blendMode(ADDITIVE)
    --========================================
    function setup()
    ang=0
    -- the vec points
    a1=-120 -- right side x position
    b1=-60 -- right side y position
    c1= 100 -- left side x position
    d1=-60 -- left side y position
    e1=-10 -- tips x position
    f1= 60 -- tips y position

    a2=-120 -- right side x position
    b2= 60 -- right side y position
    c2= 100 -- left side x position
    d2= 60 -- left side y position
    e2= -10 -- tips x position
    f2= -60 -- tips y position
    --..............................................................
    -- ( left, right, tip )
    t1 = MakeTriangle (vec2(a1,b1), vec2(c1,d1), vec2(e1,f1), color(0, 0, 255))
    t2 = MakeTriangle (vec2(a2,b2), vec2(c2,d2), vec2(e2,f2), color(0, 255, 0))
    --...............................................................
    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)

    pushMatrix()
    rotate(ang)
    t1:draw()
    ang=ang+0.5
    popMatrix()

    pushMatrix()
    rotate(ang)
    t2:draw()
    ang=ang-1
    popMatrix()

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

    ~~~
  • Posts: 253
    Thanks in advanced....
  • dave1707dave1707 Mod
    Posts: 8,674

    Give them different rotation angles.

    -- Rotating Triangles
    
    displayMode(FULLSCREEN)
    blendMode(OVERLAY)
    -- blendMode(ADDITIVE)
    --========================================
    function setup()
        ang1=0
        ang2=0
        -- the vec points
        a1=-120 -- right side x position
        b1=-60 -- right side y position
        c1= 100 -- left side x position
        d1=-60 -- left side y position
        e1=-10 -- tips x position
        f1= 60 -- tips y position
    
        a2=-120 -- right side x position
        b2= 60 -- right side y position
        c2= 100 -- left side x position
        d2= 60 -- left side y position
        e2= -10 -- tips x position
        f2= -60 -- tips y position
        --..............................................................
        -- ( left, right, tip )
        t1 = MakeTriangle (vec2(a1,b1), vec2(c1,d1), vec2(e1,f1), color(0, 0, 255))
        t2 = MakeTriangle (vec2(a2,b2), vec2(c2,d2), vec2(e2,f2), color(0, 255, 0))
        --...............................................................
    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)
    
        pushMatrix()
        ang1=ang1+0.5
        rotate(ang1)
        t1:draw()
        popMatrix()
    
        pushMatrix()
        ang2=ang2-1
        rotate(ang2)
        t2:draw()
        popMatrix()
    
    end
    --========================================
    function MakeTriangle (v1, v2, v3, c)
        m=mesh()
        m.vertices={v1, v2, v3}
        m:setColors(c)
        return m
    end
    
  • Posts: 253
    Thanks !...
Sign In or Register to comment.