var particles = []
var marks = []

function setup() {
    createCanvas(400, 400, WEBGL)
    angleMode(DEGREES)

    noiseDetail(8)
    frameRate(60)


    for (var i = 0; i < 3; i++) {

        var r = random(150, 255)
        var g = random(150, 255)
        var b = random(150, 255)

        p = new Particle(r, g, b)
        particles.push(p)
    }
}

function draw() {

    if (frameCount === 1) {
        // capturer.start()
    }

    background(20, 50, 80)

    randomSeed(1)

    fill(255)
    
    translate(0, 0, 170)

    rotateZ(frameCount / 2)
    
    push()
    directionalLight([255], createVector(0, 0, -1))
    directionalLight([255], createVector(0, 2, -1))
    
    for (var i = 0; i < particles.length; i++) {

        var x = map(sin(frameCount / 2), -1, 1, -0.02, 0.02)
        var y = map(cos(frameCount / 2), -1, 1, -0.02, 0.02)

        var gravity = createVector(x, y, 0).mult(particles[i].m)

        particles[i].applyForce(gravity)

        particles[i].update()

        particles[i].edges()

        particles[i].show()
    }
    pop()

    for (var i = marks.length - 1; i >= 0; i--) {
        push()
        if (marks[i].w > 0) {
            marks[i].update()
            marks[i].show()
        } else {
            marks.splice(i, 1)
        }
        
        pop()
    }

    noFill()
    strokeWeight(0.5)
    stroke(255)
    box(100, 100, 100)

    // if (frameCount < 60 * 30) {
    //     capturer.capture(canvas)
    // } else if (frameCount === 60 * 30) {
    //     capturer.save()
    //     capturer.stop()
    // }
}
class Particle {
    constructor(r, g, b) {

        this.m = random(3, 5)
        this.w = this.m * 2

        this.pos = createVector(random(-50 + this.w, 50 - this.w), 0, random(-50 + this.w, 50 - this.w))
        this.vel = createVector(0, 0, random(-1, 1))

        this.colors = [r, g, b]
        
    }
    applyForce(force) {

        if (this.pos.x < 50 - this.w && this.pos.x > - 50 + this.w) {
            this.vel.x += force.x
        }
        if (this.pos.y < 50 - this.w && this.pos.y > - 50 + this.w) {
            this.vel.y += force.y
        }
        if (this.pos.z < 50 - this.w && this.pos.z > - 50 + this.w) {
            this.vel.z += force.z
        }
    }

    update() {
        this.pos.add(this.vel)
    }

    edges() {
        
        if (this.pos.x > 50 - this.w && this.vel.x / abs(this.vel.x) === 1) {
            this.vel.x *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 0, this.colors)
            marks.push(m)

        } 
        if (this.pos.x < -50 + this.w && this.vel.x / abs(this.vel.x) === -1) {
            this.vel.x *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 1, this.colors)
            marks.push(m)
        }

        if (this.pos.y > 50 - this.w && this.vel.y / abs(this.vel.y) === 1) {
            this.vel.y *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 2, this.colors)
            marks.push(m)
        }
        
        if (this.pos.y < -50 + this.w && this.vel.y / abs(this.vel.y) === -1) {
            this.vel.y *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 3, this.colors)
            marks.push(m)
        }

        if (this.pos.z > 50 - this.w && this.vel.z / abs(this.vel.z) === 1) {
            this.vel.z *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 4, this.colors)
            marks.push(m)
        } 
        if (this.pos.z < -50 + this.w && this.vel.z / abs(this.vel.z) === -1) {
            this.vel.z *= -1
            var m = new Mark(this.pos.x, this.pos.y, this.pos.z, this.w, 5, this.colors)
            marks.push(m)
        }
    }

    show() {
        noStroke()
        fill(this.colors[0], this.colors[1], this.colors[2])
        push()
        translate(this.pos.x, this.pos.y, this.pos.z)
        sphere(this.w)
        pop()
    }
}
class Mark {
    constructor(x, y, z, w, a, colors) {
        this.pos = createVector(x, y, z)
        this.w = w
        this.d = w
        this.angle = a
        this.colors = colors

        this.noise = frameCount / 10

    }
    createMark() {
        beginShape()
        for(var i = 0; i < 360; i++) {
            var xoff = map(cos(i), -1, 1, 0, 3)
            var yoff = map(sin(i), -1, 1, 0, 3)
            var r = map(noise(xoff + this.noise, yoff + this.noise), 0, 1, this.w, this.w + 1)
            var x = r * cos(i)
            var y = r * sin(i)
            vertex(x, y)
        }
        endShape(CLOSE)
    }

    update() {
        this.w -= 0.05
    }

    show() {
        noStroke()
        fill(this.colors[0] + 20, this.colors[1] + 20, this.colors[2] + 20)
        push()

        if (this.angle === 0) {
            translate(this.pos.x + this.d, this.pos.y, this.pos.z)
            rotateY(90)

            this.createMark()
        }
        if (this.angle === 1) {
            translate(this.pos.x - this.d, this.pos.y, this.pos.z)
            rotateY(90)

            this.createMark()
        }
        if (this.angle === 2) {
            translate(this.pos.x, this.pos.y + this.d, this.pos.z)
            rotateX(90)
            
            this.createMark()
        }
        if (this.angle === 3) {
            translate(this.pos.x, this.pos.y - this.d, this.pos.z)
            rotateX(90)
            
            this.createMark()
        }
        if (this.angle === 4) {
            translate(this.pos.x, this.pos.y, this.pos.z + this.d)
            
            this.createMark()
        }
        if (this.angle === 5) {
            translate(this.pos.x, this.pos.y, this.pos.z - this.d)
            
            this.createMark()
        }
        
        pop()
    }
}