Animating a square rotating

How do you animate a square rotating everytime you tap the screen?

turn 90 degrees

Thank you Ignatz and Dave

Sorry, for some reason I was thinking of physics objects. Here it is without physics.


displayMode(FULLSCREEN)

function setup() 
    sp=0
    rectMode(CENTER)
end

function draw()
    background(30, 30, 30, 25)
    fill(255)
    pushMatrix()
    translate(300,300)
    rotate(sp)
    rect(0,0,100,100)
    popMatrix() 
end

function touched(t)
    if t.state==BEGAN then
        sp=sp+5
    end
end

Or one without physics. Touch left or right side of screen to start turning rectangle. Each touch changes the “target angle”, and the rectangle turns smoothly until it reaches that angle, so it’s not jerky.

function setup()
    angle=0
    targetAngle=0
    turn=3
    turnSpeed=0.5
    rectMode(CENTER)
end

function draw()
    background(220)
    fill(255,255,0)
    if angle~=targetAngle then
        if angle<targetAngle then 
            angle=angle+turnSpeed else angle=angle-turnSpeed 
        end
    end
    pushMatrix()
    translate(WIDTH/2,HEIGHT/2)
    rotate(angle)
    rect(0,0,200,300)
    popMatrix()
end

function touched(t)
    if t.state~=ENDED then
        if t.x<WIDTH/2 then 
            targetAngle=targetAngle-turn 
        else 
            targetAngle=targetAngle+turn 
        end
    end
end

Not sure exactly what you want to do, but here’s another version. Once the square hits the line, start tapping the screen. I’m giving it a velocity to the right. I set the friction value high so the square has to rotate instead of sliding.


displayMode(FULLSCREEN)

function setup() 
    e=physics.body(EDGE,vec2(0,100),vec2(WIDTH,100))
    c1 = physics.body(POLYGON,vec2(0,0),vec2(50,0),vec2(50,50),vec2(0,50))
    c1.x=200
    c1.y=900
    c1.gravityScale=1  
    c1.friction=10
    sp=0
end

function draw()
    background(30, 30, 30, 25)
    stroke(255)
    strokeWidth(2)
    line(0,100,WIDTH,100)
    pushMatrix()
    translate(c1.x,c1.y)
    rotate(c1.angle)
    j=c1.points[#c1.points]
    for z=1,#c1.points do
        p1=c1.points[z]
        line(j.x,j.y,p1.x,p1.y)
        j=p1
    end
    popMatrix() 

end

function touched(t)
    if t.state==BEGAN then
        sp=sp+10
        c1.linearVelocity=vec2(sp,0)
    end
end

I have this for a rotating square.


displayMode(FULLSCREEN)

function setup() 
    c1 = physics.body(POLYGON,vec2(0,0),vec2(50,0),vec2(50,50),vec2(0,50))
    c1.x=WIDTH/2-22.5
    c1.y=900
    c1.gravityScale=1  
    c2 = physics.body(CIRCLE,30)
    c2.x=WIDTH/2+14
    c2.y=1000
    c2.gravityScale=.2
    c3=physics.body(CHAIN,false,vec2(500,500),vec2(400,500),vec2(400,400),
        vec2(300,400),vec2(300,300),vec2(200,300),vec2(200,200),
        vec2(100,200),vec2(100,100),vec2(0,100),vec2(0,0))
    c3.x=0
    c3.y=0
    c3.type=STATIC
end

function draw()
    background(30, 30, 30, 25)
    stroke(255)
    strokeWidth(2)
    pushMatrix()
    translate(c1.x,c1.y)
    rotate(c1.angle)
    j=c1.points[#c1.points]
    for z=1,#c1.points do
        p1=c1.points[z]
        line(j.x,j.y,p1.x,p1.y)
        j=p1
    end
    popMatrix() 
    stroke(255) 
    strokeWidth(2)
    translate(c3.x,c3.y)
    for z=1,#c3.points-1 do
        line(c3.points[z].x,c3.points[z].y,c3.points[z+1].x,c3.points[z+1].y)
    end
    fill(255)
    ellipse(c2.x,c2.y,60)
end

Hiw do i make it do a full quarter turn

Okay

If you want to rotate a square continuously, you can use a tween:

-- Rotate Square

function setup()
    rectMode(CENTER)
    sq={rotDeg=0, sizeX=100, sizeY=100} -- To hold details about the square
    tween(10.0, sq, {rotDeg=360}, {loop=tween.loop.forever}) -- Makes rotDeg go from 0-360 in 10 seconds
end

function draw()
    background(0, 0, 0, 255)
    fill(255, 255, 255, 255)
    pushMatrix()
    translate(WIDTH/2, HEIGHT/2)
    rotate(sq.rotDeg)
    rect(0, 0, sq.sizeX, sq.sizeY)
    popMatrix()
end