My Sketch Extruding Perspective

/******************

Code by Vamoss

Original code link:

https://www.openprocessing.org/sketch/734757

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

let geometries = []

let renderer, shading

const size = 30

const length = 900

const duration = 6000

​

function setup() {

  renderer = createCanvas(windowWidth, windowHeight, WEBGL)

  noStroke()

  const vert = `attribute vec3 aPosition;

              attribute vec3 aNormal;

              attribute vec2 aTexCoord;

​

              uniform mat4 uModelViewMatrix;

              uniform mat4 uProjectionMatrix;

              uniform mat3 uNormalMatrix;

​

              varying vec3 vVertexNormal;

              varying highp vec2 vVertTexCoord;

​

              void main(void) {

                vec4 positionVec4 = vec4(aPosition, 1.0);

                gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

                vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));

                vVertTexCoord = aTexCoord;

              }`

  const frag = `precision mediump float;

              varying vec3 vVertexNormal;

              void main(void) {

                vec3 col1 = vec3(1., .56, .69);

                vec3 col2 = vec3(.2, .9, .9);

                vec3 col3 = vec3(0., 0., 0.);

                vec3 col = mix(col1, col2, vVertexNormal.x);

                col = mix(col, col3, vVertexNormal.y);

                gl_FragColor = vec4(col, 1.0);

              }`

  shading =  new p5.Shader(renderer, vert, frag)

}

​

function generate(){

  //choose 3 types of shapes

  let shape = floor(random(3))

  let points = []

  if(shape == 0){

    //square

    points = [[-1, -1], [1, -1], [1, 1], [-1, 1]]

  }else if(shape == 1){

    //circle

    for(let i=0; i<20; i++){

      let x = cos(i/20*TWO_PI)

      let y = sin(i/20*TWO_PI)

      points.push([x, y])

    }

  }else if(shape == 2){

    //star

    let total = floor(random(5, 20))

    total = total%2==0?total:total+1

    for(let i=0; i<total; i++){

      let radius = i%2==0 ? 1 : 0.5

      let x = cos(i/total*TWO_PI)*radius

      let y = sin(i/total*TWO_PI)*radius

      points.push([x, y])

    }

  }

  //create a geometry

  geometries.push(new p5.Geometry(0, 0, function() {

    //extrude the points described earlier

    let top = 0

    let bottom = -1

    points.forEach(p => this.vertices.push(new p5.Vector(p[0], p[1], top)))

    points.forEach(p => this.vertices.push(new p5.Vector(p[0], p[1], bottom)))

​

    //create normals and uvs, only work with dimensions 1 at the points array

    this.vertices.forEach(vertex => {

      this.vertexNormals.push(vertex.copy())

      this.uvs.push([vertex.x, vertex.y])

    })

​

    //create the faces based on the extrude logic

    let n = points.length;

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

      if (i === (n - 1)) {

        this.faces.push([i + n, n, i])

        this.faces.push([0, i, n])

      } else {

        this.faces.push([i + n, i + n + 1, i])

        this.faces.push([i + 1, i, i + n + 1])

      }

    }

  }))

  let geometry = geometries[geometries.length - 1]

  geometry._makeTriangleEdges()

  geometry._edgesToVertices()

  geometry.time = millis()

  geometry.id = frameCount

  geometry.x = floor(random(width/(size*2))) * (width/floor(width/(size*2)));

  geometry.y = floor(random(height/(size*2))) * (height/floor(height/(size*2)));

  renderer.createBuffers(geometry.id, geometry)

}

​

function draw() {

  generate()

  background(0)

  orbitControl()

  shader(shading)

  let time = millis()

  geometries = geometries.filter(geometry => (time-geometry.time)/duration < 1)

  push()

    translate(-width/2, -height/2)

    geometries.forEach((geometry, index) => {

      let percent = (time-geometry.time)/duration

      let easy = easeInOutQuint(percent)

      let s = (1-pow(easy*2-1, 2))*length/2

      let z = easy*length

      push()

        translate(geometry.x, geometry.y, -z)

        renderer.drawBuffersScaled(geometry.id, size, size, s)

      pop()

    })

  pop()

}

​

function easeInOutQuint(t) {

  return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t

}