What are tweens and shaders

General
1

I get that a tween is just a value that changes over time, (i think i may be wrong) but is it anything more than that?
And are shaders just clothes for meshes or are they something more. If possible i would like an example of both modules spinning a square
p.s. Just got back from holidays

2

Broadly yes.

Tweens are just a mechanism for automatically changing a value over time just specifying the start and end, and the type of curve the value change will follow (eg linear or accelerating or whatever). For your example of spinning a square, then drawing the square in the normal way with a tween on the rotation should work fine.

    pushMatrix()
    translate(squarecentrex, squarecentrey)
    rotate(squareangle)
    line(-10,-10,-10,10)
    line(-10,10,10,10)
    line(10,10,10,-10)
    line(10,-10,-10,-10)
    popMatrix()

and then tween the square angle.

Shaders are kinda clothes… while you can do some messing about in them to transform the mesh they aren’t really suited to the rotating a square kind of example. They are more about applying lighting or texturing to the mesh. The key thing with shaders is they are written in OpenGL ES Shader Language (GLSL ES) which has loads of examples on the net (it’s quite C like) and it executes in the GPU so is very fast compared to lua code. This means that there are lots of interesting uses/abuses of it to make things faster like fractals which the examples you will find here aren’t really traditional clothing on a mesh, more a way to calculate fast on the GPU.

3

Vertex shaders could spin a square. The only catch is that your vertex shader has to compute the position from scratch as it can’t save the previous position and update it. With spinning, though, this is simple. Here’s a program that does it. The shader was developed using the lab but converted to strings to make it easier to cut and paste.
Quaternions were very much on my mind, so I did the rotation using them.

The angular velocity vector is taken as the axis of rotation and its length is the angular speed.

function setup()
    m = mesh()
    m:addRect(0,0,1,1)
    m.texture = sprite("Space Art:Red Ship")
    local s = shader()
    s.vertexProgram = vp()
    s.fragmentProgram = fp()
    m.shader = s
    m.shader.centre = vec3(0,0,0)
    m.shader.angularVelocity = vec3(0,1,0)
end

function draw()
    background(57, 57, 57, 255)
    perspective()
    camera(0,0,5,0,0,0,0,1,0)
    m.shader.time = ElapsedTime
    m:draw()
end

function vp()
    return [[
//
// A rotation vertex shader
//

//This is the current model * view * projection matrix
// Codea sets it automatically
uniform mat4 modelViewProjection;

// Parameters set by user
uniform vec3 centre;
uniform float time;
uniform vec3 angularVelocity;
// Computed from parameters
mediump vec3 axis = normalize(angularVelocity);
mediump float speed = length(angularVelocity);
mediump vec4 rot = vec4(cos(time*speed/2.),sin(time*speed/2.)*axis);

//This is the current mesh vertex position, color and tex coord
// Set automatically
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

//This is an output variable that will be passed to the fragment shader
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

// Basic quaternion functions
mediump vec4 qmult (mediump vec4 p, mediump vec4 q)
{
    mediump float a = p.x * q.x - p.y * q.y - p.z * q.z - p.w * q.w;
    mediump float b = p.x * q.y + p.y * q.x + p.z * q.w - p.w * q.z;
    mediump float c = p.x * q.z - p.y * q.w + p.z * q.x + p.w * q.y;
    mediump float d = p.x * q.w + p.y * q.z - p.z * q.y + p.w * q.x;
    return vec4(a,b,c,d);
}

mediump vec4 qconj (mediump vec4 q)
{
    return vec4(q.x,-q.y,-q.z,-q.w);
}

mediump vec3 qvmult(mediump vec4 q, mediump vec3 v)
{
    mediump vec4 p = vec4(0,v);
    mediump vec4 pq = qmult(q,qmult(p,qconj(q)));
    return vec3(pq.yzw);
}


void main()
{
    //Pass the mesh color to the fragment shader
    vColor = color;
    vTexCoord = vec2(texCoord.x, 1.0 - texCoord.y);
    mediump vec3 pos = position.xyz/position.w - centre;
    pos = qvmult(rot,pos);
    pos += centre;
    //Multiply the vertex position by our combined transform
    gl_Position = modelViewProjection * vec4(pos,1);
}

]]
end

function fp()
    return [[
//
// A basic fragment shader
//

//Default precision qualifier
precision highp float;

//This represents the current texture on the mesh
uniform lowp sampler2D texture;

//The interpolated vertex color for this fragment
varying lowp vec4 vColor;

//The interpolated texture coordinate for this fragment
varying highp vec2 vTexCoord;

void main()
{
    //Sample the texture at the interpolated coordinate
    lowp vec4 col = texture2D( texture, vTexCoord );
    // colour by given colour
    col*=vColor;
    //Set the output color to the texture color
    gl_FragColor = col;
}

]]
end
4

Thanks guys