Old school D3 from simpler times

All examples By author By category About

Yannael

Full window Github gist

TestOpenProcessing

Built with blockbuilder.org

forked from Yannael's block: fresh block

forked from Yannael's block: fresh block

forked from Yannael's block: fresh block

forked from Yannael's block: fresh block

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

forked from Yannael's block: TestOpenProcessing

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
</head>

<body>
  <script>

// Position Variables
var x = 0;
var y = 0;
 
// Speed - Velocity
var vx = 0;
var vy = 0;
 
// Acceleration
var ax = 0;
var ay = 0;
 
var vMultiplier = 0.007;
var bMultiplier = 0.6;

function setup() {
    createCanvas(100, 100);
    fill(0);
}

function draw() {
    background(255);
    ballMove();
    ellipse(x, y, 30, 30);
}

function ballMove() {

ax = accelerationX;
	ay = accelerationY;

vx = vx + ay;
	vy = vy + ax;
	y = y + vy * vMultiplier; 
	x = x + vx * vMultiplier;

// Bounce when touch the edge of the canvas
	if (x < 0) { 
		x = 0; 
		vx = -vx * bMultiplier; 
	}
 	if (y < 0) { 
 		y = 0; 
 		vy = -vy * bMultiplier; 
 	}
 	if (x > width - 20) { 
 		x = width - 20; 
 		vx = -vx * bMultiplier; 
 	}
 	if (y > height - 20) { 
 		y = height - 20; 
 		vy = -vy * bMultiplier; 
 	}
  text(width,10,10)
	
}

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
</head>
​
<body>
  <script>
    
​
// Position Variables
var x = 0;
var y = 0;
 
// Speed - Velocity
var vx = 0;
var vy = 0;
 
// Acceleration
var ax = 0;
var ay = 0;
 
var vMultiplier = 0.007;
var bMultiplier = 0.6;
​
function setup() {
    createCanvas(100, 100);
    fill(0);
}
​
function draw() {
    background(255);
    ballMove();
    ellipse(x, y, 30, 30);
}
​
function ballMove() {
​
    ax = accelerationX;
    ay = accelerationY;
​
    vx = vx + ay;
    vy = vy + ax;
    y = y + vy * vMultiplier; 
    x = x + vx * vMultiplier;
​
    // Bounce when touch the edge of the canvas
    if (x < 0) { 
        x = 0; 
        vx = -vx * bMultiplier; 
    }
    if (y < 0) { 
        y = 0; 
        vy = -vy * bMultiplier; 
    }
    if (x > width - 20) { 
        x = width - 20; 
        vx = -vx * bMultiplier; 
    }
    if (y > height - 20) { 
        y = height - 20; 
        vy = -vy * bMultiplier; 
    }
  text(width,10,10)
    
}
​
  </script>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js