LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  

  
    
CSS
html, body {
  width: 100%;
  text-align: center;
}

.dragon {
  width: 280px;
  position: relative;
  margin: auto;
}

.dragon * {
  transition: all easy 1s;
}
JS
// CREATE A NEW DRAGON
const makeDragon = (parents) => {

  // GENERATE A (UNIQUE?) DNA STRAND
  let dna = generateDNA(parents)


  // SET PRIMARY COLORS
  let colors = {
    base: colorPicker(dna.science['primary-color'].value),
    eyes: colorPicker(dna.science['eye-color'].value),
    horns: colorPicker(dna.science['horn-color'].value),
    wings: colorPicker(dna.science['wing-color'].value)
  }

  // SVG BASE LAYERS
  let BaseFill = document.getElementById('BaseFill');
  let Tail1Fill = document.getElementById('Tail1Fill');
  let Eyes = document.getElementById('EyeColor');
  let Wings = document.getElementById('Wings_1_');

  // BASE COLORS
  let base = [
    document.getElementById('BaseFill'),
  ]

  // HORN COLORS
  let horns = [
    document.getElementById('Horn1Fill'),
  ]

  let mouth = setMouth(dna)
  let tail = setTail(dna);

  base.push(tail.base)
  horns.push(tail.horns)

  // COLOR GROUPS
  base.forEach((element) => {
    element.style.fill = colors.base
  })

  horns.forEach((element) => {
    element.style.fill = colors.horns
  })

  Eyes.style.fill = colors.eyes // EYES
  Wings.style.fill = colors.wings // WINGS
}

// CREATE A RANDOM 16 CHAR STRING
const randomID = () => {

  let num = '';

  for (let i = 0; i < 9; i++) {
    num += (Math.floor(Math.random() * (99 - 0) + 0)).toString().padStart(2, '0');
  }

  return num;
}

// GENARATE NEW BASELINE DNA INHERITED FROM 2 PARENTS
const generateDNA = (parents) => {

  let parts = [
    parents.mum.match(/.{1,2}/g),
    parents.dad.match(/.{1,2}/g),
    randomID().match(/.{1,2}/g)
  ];

  // THIS WILL BE THE DNA IDENTIFIER STRING
  let dna = '';

  // THIS WILL MAP EACH PART TO AN ATTRIBUTE
  // AND REMEMBER WHO IT WAS INHERITED FRM
  let science = {};

  // MAP DNA PARTS TO PHYSICAL ATTRIBUTES
  let options = [
    'primary-color',
    'secondary-color',
    'eye-color',
    'horn-color',
    'wing-color',
    'markings',
    'head-shape',
    'tail-shape',
    'mouth-style'
  ]

  // PICK A RANDOM TRAIT FROM ATTRIBUTES TO INHERIT
  // CAN COME FROM MUM, DAD, OR BE BRAND NEW
  const pickTrait = (num) => {

    let from = Math.floor(Math.random() * 3)
    let opt = parts[from][Math.floor(num)]

    if (from === 0) from = 'dad'
    if (from === 1) from = 'mum'
    if (from === 2) from = 'random'

    return {
      from: from,
      value: opt
    }
  }

  // CREATE 8 UNIQE PAIRS TO CREATE A 16 CHAR DNA STRING
  for (let i = 0; i < 9; i++) {
    let result = pickTrait(i)
    dna += result.value
    science[options[i]] = result
  }

  // RETURN THE VALUES
  return {
    sequence: dna,
    science: science
  }

}

// DETERMINE MOUTH STYLE
const setMouth = (dna) => {

  let mouth = 1;

  let mouths = [
    document.getElementById('Mouth1'),
    document.getElementById('Mouth2')
  ]

  mouths.forEach((element) => {
    element.style.display = 'none'
  })

  // DETERMINE MOUTH
  if (dna.science['mouth-style'].value > 49) mouth = 2;

  mouths[mouth - 1].style.display = 'block'

}

// DETERMINE TAIL STYLE
const setTail = (dna) => {

  let base, horns;
  let tail = 1;

  let tails = [
    document.getElementById('Tail1'),
    document.getElementById('Tail_2')
  ]

  tails.forEach((element) => {
    element.style.display = 'none'
  })

  // DETERMINE TAIL
  if (dna.science['tail-shape'].value > 49) tail = 2;

  tails[tail - 1].style.display = 'block'

  if (tail === 1) {
    base = document.getElementById('Tail1Fill')
    horns = document.getElementById('Tail1_Horn')
  }
  if (tail === 2) {
    horns = document.getElementById('Tail2Horns')
    base = document.getElementById('Tail2Fill')
  }

  return {
    base: base,
    horns: horns
  }

}

// GENERATE A RANDOM COLOR BASED ON A NUMBER
const colorPicker = (num) => {

  let color = '#CEDBDD'; // DEFAULT

  if (num <= 10) color = '#4AA6E5'
  else if (num <= 20) color = '#B372ED'
  else if (num <= 30) color = '#F15A22'
  else if (num <= 40) color = '#C8EF25'
  else if (num <= 50) color = '#CC9966'
  else if (num <= 60) color = '#50BC66'
  else if (num <= 70) color = '#E969F4'
  else if (num <= 80) color = '#AF2B41'
  else if (num <= 90) color = '#60747F'

  return color

}

// GENERATE A NEW DRAGON EVERY 3 SECONDS
setTimeout(() => {
  makeDragon({
    dad: randomID(),
    mum: randomID()
  })
});
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv