# 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
``````