var white = 205;
var black = 0;

var baseBall = function (p) {
    var x = 50;
    var y = 50;
    p.setup = function () {
        p.createCanvas(500, 100);
    };
    p.draw = function () {
        p.background(white)
        p.fill(black)
        p.ellipse(x, y, 20, 20);
        x += 1
        if (x > 500) {x = 0};
    }
};

var myp5 = new p5(baseBall, 'cbase');

var pacmanBall = function (p) {
    var x = 50;
    var y = 50;
    var speed = 2;
    var Xspeed = p.random()*speed;
    var Yspeed = p.random()*speed;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white)
        p.fill(black)
        p.ellipse(x, y, 20, 20);
        x = (x + Xspeed) % 100
        y = (y + Yspeed) % 100
    }
};

var myp5 = new p5(pacmanBall, 'c1');
var myp5 = new p5(pacmanBall, 'c1bis');

var randomBall = function (p) {
    var x = 50;
    var y = 50;
    var factor = 5;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white);
        p.fill(black);
        x += (p.random() - 0.5)*factor;
        y += (p.random() - 0.5)*factor;
        p.ellipse(x, y, 20, 20);
        if (x<0 || x>100 || y<0 || y>100) {
            x = 50;
            y = 50;
        }
    }
};

var myp5 = new p5(randomBall, 'c2');
var myp5 = new p5(randomBall, 'c2bis');

var boundcingBall = function (p) {
    var x = 25;
    var y = 25;
    var radius = 20
    var speed = 5;
    var Xspeed = (p.random()-0.5)*speed;
    var Yspeed = (p.random()-0.5)*speed;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white);
        p.fill(black);
        x += Xspeed
        y += Yspeed
        p.ellipse(x, y, radius, radius);
        if ((x-radius < 0) || (x+radius > 100)) {
            Xspeed = - Xspeed
        };
        if ((y-radius < 0) || (y+radius > 100)) {
            Yspeed = - Yspeed
        };
    }
};

var myp5 = new p5(boundcingBall, 'c3');
var myp5 = new p5(boundcingBall, 'c3bis');

var circleBall = function (p) {
    var x = 25;
    var y = 25;
    var ballRadius = 5;
    var t = 0;
    var speed = 0.1;
    var pathRadius = 20;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white);
        p.fill(black);
        t += speed;
        x = p.cos(t) * pathRadius + 50;
        y = p.sin(t) * pathRadius + 50;
        p.ellipse(x, y, ballRadius, ballRadius);
    }
};

var myp5 = new p5(circleBall, 'c4');
var myp5 = new p5(circleBall, 'c4bis');

var waveBall = function (p) {
    var x = 50;
    var y = 25;
    var ballRadius = 20;
    var t = 0;
    var speed = 0.1;
    var pathRadius = 20;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white);
        p.fill(black);
        t += speed;
        y = p.cos(t) * pathRadius + 50;
        p.ellipse(x, y, ballRadius, ballRadius);
    }
};

var myp5 = new p5(waveBall, 'c5');
var myp5 = new p5(waveBall, 'c5bis');

var gravityBall = function (p) {
    var ballRadius = 20;
    var x = 25;
    var y = 80;
    var Xspeed = 1;
    var Yspeed = -3;
    var Xgrav = 0;
    var Ygrav = 0.1;
    p.setup = function () {
        p.createCanvas(100, 100);
    };
    p.draw = function () {
        p.background(white);
        p.fill(black);
        Yspeed += Ygrav;
        x += Xspeed;
        y += Yspeed;
        p.ellipse(x, y, ballRadius, ballRadius);
        if (y > 100) {
            x = 25;
            y = 80;
            Xspeed = 1;
            Yspeed = -3;
            Xgrav = 0;
            Ygrav = 0.1;
        }
    }
};

var myp5 = new p5(gravityBall, 'c6');
var myp5 = new p5(gravityBall, 'c6bis');