0 Favourites

Javascript-SDK help

  • Javascript-SDK help

    Hello everybody hope you are alright <img src="smileys/smiley1.gif" border="0" align="middle" />

    I want to ask for a clean simple explanation

    how can i implement this simple java-script example into C2

    example link :

    <font color=orange>http://burakkanber.com/blog/physics-in-javascript-car-suspension-part-1-spring-mass-damper/</font>

    /* 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();
    

    <font size="2">My goal is to make a physics Box2D spring behaviours</font>

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • watch part 1 and part 2 <img src="smileys/smiley2.gif" border="0" align="middle" />

    scirra.com/tutorials/352/plugins-roll-your-own-with-the-javascript-sdk

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
157 12,694
megatronx's avatar
megatronx
Unread hot topic
0 Favourites
Kiira will help! :D
132 16,619
Kiira's avatar
Kiira
Unread hot topic
80 7,181
jobel's avatar
jobel