Procedural Blobs

In this example below you will see how to do a Procedural Blobs with some HTML / CSS and Javascript

Generate random blobs in Three.js

Thumbnail
This awesome code was written by mattdv, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mattdv ©
  • HTML
  • CSS
  • JavaScript
    

/*Downloaded from https://www.codeseek.co/mattdv/procedural-blobs-vOmzJB */
    html, body {
  background: #2b2b2b;
  margin: 0;
  overflow: hidden; 
}


/*Downloaded from https://www.codeseek.co/mattdv/procedural-blobs-vOmzJB */
    OPTIONS = {
  smoothing: 2
  detail: 4
  radius: 0.7
  
  noiseOptions: {
    amplitude: 1.0
    frequency: 0.4
    octaves: 1
    persistence: 0.5
  }
}

renderOptions = {
  wireframe: true
}

# Include FPS and Render stats 
stats = new Stats()
stats.domElement.style.position = 'absolute'
stats.domElement.style.left = '0px'
stats.domElement.style.top = '0px'

rendererStats = new THREEx.RendererStats()
rendererStats.domElement.style.position = 'absolute'
rendererStats.domElement.style.left = '0px'
rendererStats.domElement.style.bottom   = '0px'

# Generate a WebGLrenderer instance
renderer = new THREE.WebGLRenderer()

generate = ->
  # Test implementation

  # Remove other meshes from scene
  for i in demo.scene.children
    demo.scene.remove(i) if i.type == "Mesh"

  @geometry = Coral.Blob( OPTIONS )

  if renderOptions.wireframe
    material = new THREE.MeshBasicMaterial { color: 0xffffff, wireframe: true }
  else
    material = new THREE.MeshPhongMaterial { color: 0xffffff, shading: THREE.FlatShading }

  @mesh = new THREE.Mesh( @geometry, material )
  @mesh.castShadow = true
  @mesh.receiveShadow = true

  demo.scene.add(@mesh)

  
# Render setup and loop
demo = Sketch.create({

  type: Sketch.WEBGL
  element: renderer.domElement
  context:renderer.context

  setup: ->

    @camera = new THREE.PerspectiveCamera(90, @.width / @.height, 0.01, 400 )
    @camera.setLens(15, 25)
    @camera.position.set(0, 0, 3)
   
    @light = new THREE.HemisphereLight( 0xffeed1, 0x404040, 0.8 )
   

    @scene = new THREE.Scene()

    @scene.add(@light)

  resize: ->
    @camera.aspect = @.width / @.height
    @camera.updateProjectionMatrix()

    renderer.setSize( @.width, @.height )

  draw: ->

    ## Start of stats.js monitored code.
    stats.begin()

    if @scene.children? && @scene.children.length > 0
      for mesh in @scene.children
        mesh.rotation.x += 0.002
        mesh.rotation.y += 0.002
      
    renderer.render( @scene, @camera )

    ## End of stats.js monitored code.
    stats.end()

    # pass renderer to update renderer stats
    rendererStats.update(renderer)
  })


window.onload = ->

  # Append stats indicators to the dom
  document.body.appendChild( stats.domElement )
  document.body.appendChild( rendererStats.domElement )

  gui = new dat.GUI()

  # Create the initial mesh
  generate()

  # Set the noise field's options as tunable variables 
 
  gui.add(OPTIONS, "detail", { low: 1, medium: 3, high: 5 }).onChange( ->
    generate()
    )
  
  gui.add( OPTIONS.noiseOptions, "frequency", 0, 1).onChange( ->
    generate()
    )

  gui.add( OPTIONS.noiseOptions, "octaves", 1, 10).onChange( ->
    generate()
    )

  gui.add(OPTIONS, "smoothing", { none: 1, medium: 3, high: 15,}).onChange( ->
    generate()
    )

  gui.add(renderOptions, "wireframe").onChange( ->
    generate()
    )

  


Comments