Javascript-SDK help

For developers using the Construct 2 Javascript SDK

Post » Mon Dec 02, 2013 6:42 pm

Javascript-SDK help

Hello everybody hope you are alright
I want to ask for a clean simple explanation
how can i implement this simple java-script example into C2
example link :
http://burakkanber.com/blog/physics-in-javascript-car-suspension-part-1-spring-mass-damper/
[code]
/* Spring stiffness, in kg / s^2 */
var k = -20;
var spring_length = 180;

/* Damping constant, in kg / s */
var b = -0.5;

/* Block position and velocity. */
var block = {x: 100, v: 0, mass: 0.5};
var wall = {x: 30, lx: 30, v: 0, t: 0, frequency: 0};

var frameRate = 1/30;
var frameDelay = frameRate * 1000;

var canvas;
var ctx;
var width = 400;
var height = 200;


var loop = function() {

    /* Move the wall. */
    wall.t += frameRate;
    wall.lx = wall.x;
    wall.x = 30 + 70 * Math.sin(2 * Math.PI * wall.frequency * wall.t);
    wall.v = (wall.x - wall.lx) / frameRate;


    /* Move the block. */

    if ( ! mouse.isDown )
    {
        var F_spring = k * ( (block.x - wall.x) - spring_length );
        var F_damper = b * ( block.v - wall.v );

        var a = ( F_spring + F_damper ) / block.mass;
        block.v += a * frameRate;
        block.x += block.v * frameRate;
    }


    /* Drawing */
    ctx.clearRect(0, 0, width, height);

    ctx.save();

    for (x = wall.x; x < block.x; x += 20)
    {
        ctx.strokeStyle = 'blue';
        ctx.beginPath();
        ctx.moveTo(x, height / 2 - 10);
        ctx.lineTo(x + 10, height / 2);
        ctx.lineTo(x + 20, height / 2 - 10);
        ctx.stroke();
        ctx.closePath();

    }
    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(0, height / 2 + 10);
    ctx.lineTo(block.x, height / 2 + 10);
    ctx.stroke();
    ctx.closePath();

    ctx.fillStyle = '#CCCCCC';
    ctx.fillRect(0, 0, wall.x, height);
    
    ctx.fillStyle = 'black';
    ctx.fillRect(block.x, height - (height / 2 + 25), 50, 50);

    ctx.restore();


};

var setup = function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.onmousemove = getMousePosition;

    canvas.onmousedown = function(e) {
        if (e.which == 1) {
            getMousePosition(e);
            mouse.isDown = true;
            block.x = mouse.x - 25;
        }
    };

    canvas.onmouseup = function(e) {
        if (e.which == 1) {
            mouse.isDown = false;
        }
    };

    document.getElementById('k_slider').onchange = function() {
        this.innerHTML = this.value;
        k = -1 * parseInt(this.value);
        document.getElementById('k_slider_label').innerHTML = k;
    };

    document.getElementById('b_slider').onchange = function() {
        this.innerHTML = this.value;
        b = -1 * parseFloat(this.value);
        document.getElementById('b_slider_label').innerHTML = b;
    };

    document.getElementById('f_slider').onchange = function() {
        this.innerHTML = this.value;
        wall.frequency = parseFloat(this.value);
        document.getElementById('f_slider_label').innerHTML = wall.frequency;
    };

    document.getElementById('m_slider').onchange = function() {
        this.innerHTML = this.value;
        block.mass = parseFloat(this.value);
        document.getElementById('m_slider_label').innerHTML = block.mass;
    };

    


    setInterval(loop, frameDelay);
};

var mouse = {x: 0, y: 0, isDown: false};

var getMousePosition = function(e) {
    mouse.x = e.pageX - canvas.offsetLeft;
    if (mouse.isDown)
    {
        block.x = mouse.x - 25;
    }
};


setup();
[/code]

My goal is to make a physics Box2D spring behaviourstnindie2013-12-02 18:50:41
B
7
S
2
Posts: 44
Reputation: 668

Post » Wed Dec 04, 2013 9:49 pm

watch part 1 and part 2

scirra.com/tutorials/352/plugins-roll-your-own-with-the-javascript-sdk
B
5
Posts: 4
Reputation: 253


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 1 guest