<div id="app-4">
<!-- <div id = "canvasPart"> 
    <p>{{ poem[0].userInput}}</p>
        <p>{{ poem[1].userInput}}</p>
        <p>{{ poem[2].userInput}}</p>
        <p>{{ poem[3].userInput}}</p>
</div> -->
<div  id = "userPart">
  <ol>
    <li  v-for="poem in poem">
      {{ poem.stage }}
      <textarea v-model="poem.userInput" placeholder="add multiple lines"></textarea>
        <!-- <input v-model="poem.userInput"> -->

        <!-- button for each. not active because going with one complete button for now -->
          <!-- <button v-on:click="hideInput">Submit</button> -->
    </li>
  </ol>




<div id="holder"></div>

</div>
<!-- <button v-on:click="hideShow">Submit</button> -->
<button v-on:click="fabricMake">Submit</button>
  <canvas id="canvasTwo" class = "theCanvas" width="1200" height="250" style="border:1px solid #000000"></canvas>
<h1> The Transformation of Silence into Language and Action</h1>

body {
background-color: #0F3B72;
color: #fffff8;
max-width: 800px;
}

h1{
  font-family: 'Archivo Black', sans-serif;
  font-size: 8em;
}

.topNode{
  width: 33%;
  margin: 50px;
  // padding:125px;
}

p{
    font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  // line-height: 24px;
}

.world {
  padding-top:250px;
  }



/*Vue*/

.thirdLevel{
  // max-width:250px;
  width: 55%;
  // background-color: #FFE47D;
}

// #vue {
//   margin: auto;
//   margin-top: 128px;
//   width: 300px;
//   height: 326px;
//   padding: 54px 36px 112px;
//   background-color: whitesmoke;
//   text-align: center;
//   border: 1px solid white;
//   border-radius: 16px;
//   box-shadow: 0 4px 64px white;
// }

// #vue h1 {
//   text-shadow: 0 1px 6px limegreen;
// }

// #vue p#green {
//   margin-top: 42px;
//   margin-bottom: 24px;
//   text-shadow: 0 0 60px limegreen;
// }

// #vue #bar {
//   margin-top: 38px;
//   margin-bottom: 40px;
//   height: 1px;
//   background-color: black
// }

// #vue label {
//   display: block;
//   margin-bottom: 32px;
//   font-weight: bold;
//   text-align: center
// }

// #vue input {
//   width: 200px;
//   padding: 4px;
//   border: 2px solid lime;
//   border-radius: 8px;
// }

// #vue button {
//   cursor: pointer;
// }

var testPoem;
var universalSeed;
var angle1=0;
var angle2=0;
var scalar = 70;
// var the_poem;
function preload(){
     the_poem = loadJSON('poem.json')
     console.log(the_poem)
}
function setup(){


// noCanvas();

createCanvas(800,600)

universalSeed =  TWO_PI*TWO_PI*TWO_PI + 100;
// startUp(the_poem);
  // end p5 setup



}


function  draw(){

}



var app4 = new Vue({
  el: '#app-4',
  data: {
    poem:[{
  "stage":"Why do we speak?",
  "userInput":" "
}, 

{

"stage": "Of what are we afraid?",
"userInput": " "
},
{

  "stage": "What have we survivied?",
  "userInput": " "
},

{
  "stage": "How have we/do we resist?",
  "userInput":" "
},

{
  "stage": "How are we healing?",
  "userInput": " "
}
    ],
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  },
  methods:{
    hideInput: function (){
      var divSelector = select('#userPart');
      divSelector.hide()
      // document.getElementById("userPart").seen = false;
    },


//make a vue method to have raphael  make elements to canvas
    fabricMake: function(){
  var divSelector = select('#userPart');
      divSelector.hide()
            var canvasTwo =new fabric.Canvas('canvasTwo')
var instructions = new fabric.Text("Click on any of the words to manipulate them ", {
fontFamily:  'Alfa Slab One',
fontSize:20,
fill: '#F5DD9D',
  left: 10,
  top: 300});

  // canvasTwo.add(instructions)
//create instrtuctions

// I want to make a canvas element out of each of them
//   - underscore 'for each'
//   - for loop through
 var yDown = 200;
//how to I update this so that each time a new thing is added to the array it redraws or draws the new One
//It would be the equivelant of update in D3
  for (i = 0; i < app4.poem.length; i++) {
var text = new fabric.Text(app4.poem[i].stage, {
fontFamily:  'Alfa Slab One',
fontSize:50,
fill: '#D22042',
  left: yDown*3.14,
  top: 50*i });

  canvasTwo.add(text)

console.log(yDown)
  }

canvasTwo.selectionColor = 'rgba(0,255,0,0.3)';
canvasTwo.selectionBorderColor = 'red';
canvasTwo.selectionLineWidth = 5;

  }



  }
                  

})


External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/fabric.js

External JavaScript

  1. https://unpkg.com/vue/dist/vue.js
  2. https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js
  5. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/fabric.js