Abstractart

abstractart.markdown

Abstractart

A Pen by BLVKOBLSK on CodePen.

License.

index.html

<div class="title">
    <h3>PLASM.it - 2017</h3>
    <h1>ABSTRACTART</h1>
    <h3>A N O T H E R <strong>C O D E P E N</strong></h3>
  </div>
  <div class="more-pens">
    <a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
    <a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
  </div>

script.babel

let particles = [];
let frequency = 200
// Popolate particles
setInterval(
  function(){
    popolate()
  }.bind(this),
  frequency
)


let tela = document.createElement('canvas');
    tela.width = $(window).width();
    tela.height = $(window).height();
    $("body").append(tela);

let canvas = tela.getContext('2d');

class Particle{
  constructor(canvas, options){
    let random = Math.random()
    this.canvas = canvas;

    this.x = options.x
    this.y = options.y
    this.s = (0.5 + Math.random());
    this.a = 0
    this.w = $(window).width()
    this.h = $(window).height()
    this.radius = options.radius || 0.5 + Math.random()*10
    this.color  = options.color  || "#E5483F"

    setTimeout(function(){
      if( this.radius > 0.5 ){
        particles.push(
          new Particle(canvas,{
            x: this.x,
            y: this.y,
            color: this.radius/2 > 1 ? "#d6433b":"#FFFFFF",
            radius: this.radius/2.2
          })
        )
      }
    }.bind(this), 3000)
  }

  render(){
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    this.canvas.lineWidth = 2;
    this.canvas.fillStyle = this.color;
    this.canvas.fill();
    this.canvas.closePath();
  }

  swapColor(){
    if(this.color != "#FFFFFF"){
      if(this.x < this.w/2){
        this.color ="#36fcfa"
      }else{
        this.color = "#E5483F"
      }
    }
  }

  move(){
    this.swapColor()
    this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;
    this.a += Math.random() * 0.8 - 0.4;

    if(this.x < 0 || this.x > this.w - this.radius){
      return false
    }

    if(this.y < 0 || this.y > this.h - this.radius){
      return false
    }
    this.render()
    return true
  }
}

/*
 * Function to clear layer canvas
 * @num:number number of particles
 */
function popolate(){
  particles.push(
    new Particle(canvas,{
      x: ($(window).width()/2),
      y: ($(window).height()/2)
    })
  )
  return particles.length
}

function clear(){
  canvas.globalAlpha=0.04;
  canvas.fillStyle='#000042';
  canvas.fillRect(0, 0, tela.width, tela.height);
  canvas.globalAlpha=1;
}

function update(){
  particles = particles.filter(function(p) {
    return p.move()
  })
  clear();
  requestAnimationFrame(update.bind(this))
}
update()

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600')
.more-pens
  position: fixed
  left: 20px
  bottom: 20px
  z-index: 10
  font-family: "Montserrat"
  font-size: 12px

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active
  font-family: "Montserrat"
  font-size: 12px
  text-decoration: none
  background: #212121
  padding: 4px 8px
  color: #f7f7f7
  &:hover
    background: #edf3f8
    color: #212121

body
  margin: 0
  padding: 0
  overflow: hidden
  width: 100%
  height: 100%
  background: #000000


.title
  z-index: 10
  position: absolute
  left: 50%
  top: 50%
  transform: translateX(-50%) translateY(-50%)
  font-family: "Montserrat"
  text-align: center
  width: 100%
  h1
    position: relative
    color: #EEEEEE
    font-weight: 600
    font-size: 60px
    padding: 0
    margin: 0
    line-height: 1
    text-shadow: 0 0 30px #000155

    span
      font-weight: 600
      padding: 0
      margin: 0
      color: #BBB

  h3
    font-weight: 200
    font-size: 20px
    padding: 0
    margin: 0
    line-height: 1
    color: #EEEEEE
    letter-spacing: 2px
    text-shadow: 0 0 30px #000155