<!-- <script src = "https://unpkg.com/tippy.js@2.0.8/dist/"> -->
  <script src="https://unpkg.com/tippy.js@2.0.8/dist/tippy.all.min.js"></script>
<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js"></script>

  
 <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.ui.touch-punch.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js" type="text/javascript"></script>

    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Exo:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">

<!-- <div id = "controlCenter"> -->
<h2 id = "controls">BG Color</h2>
<div id = "title"> </div>
<!-- </div> -->
<div id = "theGrid">
<div id = "lorde">
<div id = "lordeText">
  </div>
  </div>
  <div id = "canvasHolder"></div>
    <div id = bpp10>
           <h1 style = "width: 80%;"> The Black Panther Party 10 Point Plan</h1>
    <p>

 WE WANT FREEDOM. WE WANT POWER TO DETERMINE THE DESTINY OF OUR BLACK AND OPPRESSED COMMUNITIES. 
<br><br>
WE WANT FULL EMPLOYMENT FOR OUR PEOPLE. 
<br><br>
 WE WANT AN END TO THE ROBBERY BY THE CAPITALISTS OF OUR BLACK AND OPPRESSED COMMUNITIES. 
<br><br>
WE WANT DECENT HOUSING, FIT FOR THE SHELTER OF HUMAN BEINGS. 
<br><br>
WE WANT DECENT EDUCATION FOR OUR PEOPLE THAT EXPOSES THE TRUE NATURE OF THIS DECADENT AMERICAN SOCIETY. WE WANT EDUCATION THAT TEACHES US OUR TRUE HISTORY AND OUR ROLE IN THE PRESENT-DAY SOCIETY. 
<br><br>
WE WANT COMPLETELY FREE HEALTH CARE FOR All BLACK AND OPPRESSED PEOPLE. 
<br><br>WE WANT AN IMMEDIATE END TO POLICE BRUTALITY AND MURDER OF BLACK PEOPLE, OTHER PEOPLE OF COLOR, All OPPRESSED PEOPLE INSIDE THE UNITED STATES. 
<br><br>
WE WANT AN IMMEDIATE END TO ALL WARS OF AGGRESSION. 
<br><br>
WE WANT FREEDOM FOR ALL BLACK AND OPPRESSED PEOPLE NOW HELD IN U. S. FEDERAL, STATE, COUNTY, CITY AND MILITARY PRISONS AND JAILS. WE WANT TRIALS BY A JURY OF PEERS FOR All PERSONS CHARGED WITH SO-CALLED CRIMES UNDER THE LAWS OF THIS COUNTRY. 
<br><br>WE WANT LAND, BREAD, HOUSING, EDUCATION, CLOTHING, JUSTICE, PEACE AND PEOPLE'S COMMUNITY CONTROL OF MODERN TECHNOLOGY. 
    </p>  
</div>
</div>
    
<!--          <script>
    $('#bpp10').blast({
  delimiter: 'word',
  customClass: "draggable"
});
</script> -->
   
     
body {
  font-family: 'Exo', sans-serif;
  background-color: rgba(68, 68, 68, .1);
  color: #111;
  height: 100vh;
  width: 95vw;
/*   overflow: scroll; */
  font-size: 13px;
}

#theGrid{
/*   position: relative; */
  display: grid;
  grid-template-columns: 30vw 38vw 30vw;
  grid-gap: .2em;
  
}

.blast{
  
}
canvas{
/*   width: 100%; */
}

#canvasHolder{
  z-index: -1;
 height: 100vh;
  overflow:hidden;
  
/*   border: 2px solid red; */
}
.draggable {
  z-index: 1;
  display: inline;
  font-family: 'Exo', sans-serif;
  font-size: 80%;
  background-color: #FFFFFF;
  border: 1px solid #444;
  padding: .2em;
/*   text-transform: uppercase; */
}



#lordeText{
  
    display: block;
/*   overflow:scroll; */
    height: 80vh;
  width:30vw;
  

}
#lorde{
  text-transform: lowercase;

}

#bpp10 {
/*       overflow: scroll; */
  height: 100vh;
  text-transform: lowercase;
  
/*   position: absolute; */
  
/*   z-index: 1; */
}

input[type=text]{
  margin: none;
  width: 15%;
/*   background: #444; */
}
input[type=range] {
/*   width: 100%;  */
  margin: 1em;
/*   float: right; */
  display: block;
/* /*   background: transparent; /* Otherwise white in Chrome */ */ */
}

#controlCenter{
  position: relative;
}

#title{
    position: absolute;
  width: 50%;
  height: 15vh;
  left: 33vw;;
  font-size: 150%;
/*   border: 3px solid #444; */
}
#controls{
  z-index: 1;
  position: absolute;
/*   width: 50%; */
  height: 15vh;
  left: 55vw;
  color: #FFFFF8;
/*   top: 15vh; */
/*   border: 3px solid #444; */
}


h1 {
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-size: 14px;
  width: 33%;
  
}

h2 {
/*   text-align: center; */
  color: #FEF5E9;
  font-family: 'Arvo', serif;
  font-weight: 300;
  font-size: 70%;
  line-height: .5em;
}
.fixed{
/*   position:fixed; */
}

// $('.draggable').on('click', function(){})

var rSlider, gSlider, bSlider;
var input, button, greeting;
var c;
var myP;
function reSize(){
  window_height = windowHeight;
  window_width = windowWidth;
  //create canvas
  c = createCanvas(window_width/2.7, window_height);
    grid = select("#canvasHolder")
   c.parent(grid)
}
function preload(){
theText = loadJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/transformation_local_for_codepen_copy_copy.json', takeControl)
}

function takeControl(data){
var sets = []

data.forEach(function(thing, index){
sets[index]= {
"line": thing.stanza,
// "media": thing.content
}

})
addElement(sets)
}

function addElement (sets) {
sets.forEach(function(thing, index){

var everythingSelector= select('#lordeText')
var textContainer = createDiv('div', ' ')
textContainer.html('')
textContainer.addClass('textContainer')
var newDiv = createP(thing.line)
newDiv.id('thing'+index)
newDiv.parent(textContainer)
textContainer.parent(everythingSelector)
})
blast()
}

function blast (){
  $('#theGrid').blast({
  delimiter: 'word',
     tag: "div",
  customClass: "draggable"
    
    
});
	$(function() {
    $( ".draggable" ).draggable();
  });
  
  $('.draggable').attr( "title", "drag words on to canvas" );
  
  
  tippy('.draggable')

}



function setup() {
  let selector = $('.draggable')
console.log(selector)
  selector.on('mousedown', makeActive)
    function makeActive (){
    console.log(this)
    // $(this).addClass("fixed")
  $(this).css( "border", "2px solid red" );
   
  }
  selector.on('mouseup', deActivate)
    function deActivate (){
    console.log(this)
    // $(this).addClass("fixed")
  $(this).css( "border", "0px solid red" );
   
  }

  reSize()
  noStroke();

  // create sliders
  var controls = select('#controls')
  var title = select('#title')
  greeting = createElement('h2', 'Title of your poem?');
  greeting.parent(title)

  input = createInput();
  input.parent(title)

  button = createButton('submit');
  button.parent(title)
  button.mousePressed(greet);

 rSlider = createSlider(0, 255, 100);
  rSlider.parent(controls)
  rSlider.style('width', '70px');
  gSlider = createSlider(0, 255, 124);
  gSlider.parent(controls)
  gSlider.style('width', '70px');
  bSlider = createSlider(0, 255, 255);
  bSlider.parent(controls)
  bSlider.style('width', '70px');
  
  //   var saveButton = createButton("SAVE");
  // saveButton.id('saveButton')
  // saveButton.mousePressed(saveMe);
  // saveButton.addClass('controls')
  // saveButton.parent(controls)
  // function saveMe() {
  //   saveCanvas(c, "myCanvas", "jpg");
  // }
  fill(0);

  // Add an event for when a file is dropped onto the canvas
  c.drop(gotFile);
}

function draw() {
	  var r = rSlider.value();
  var g = gSlider.value();
  var b = bSlider.value();
  background(r, g, b);

  fill(255);
  // noStroke();
  textSize(24);
    // text("red", 0, (windowHeight-windowHeight/3);
  // text("green", 25, windowHeight);
  // text("blue", 325, 690);
  textAlign(CENTER);
// myP = text('Drag an image file onto the canvas.', width/2, height/2);
  // noLoop();
}
function greet() {
  var name = input.value();
  greeting.html(name);
  input.value('');
	 //  var r = rSlider.value();
  // var g = gSlider.value();
  // var b = bSlider.value();
  // c.background(254, 254, 145);
// myP.hide();
  input.hide();
  // button.hide():
button.position (-50,-50);
}

function windowResized() {
reSize()
}
function gotFile(file) {
  // If it's an image file
  if (file.type === 'image') {
    // Create an image DOM element but don't show it
    var img = createImg(file.data).hide();
    // Draw the image onto the canvas
    image(img, 0, 0, width, height);
  } else {
    println('Not an image file!');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.