<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>
<!--     <script src="libraries/p5.sound.js" type="text/javascript"></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">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


<script>
	
	$(function() {
    $( ".draggable" ).draggable();
  });
  </script>

<div id = "one">
    <h1 style = "width: 32%;">Audre Lorde "The Transformation of Silence Into Language and Action"</h1>
<div id = quell> <p>I  have come to believe over and over again that what is most important to me must be spoken, made verbal and shared, even at the risk of having it bruised or misunderstood. Your silence will not protect you. I am not only a casualty, I am also a warrior. What are the words you do not have yet? What do you need to say? What are the tyrannies you swallow day by day and attempt to make your own, until you will sicken and die of them, still in silence? Perhaps for some of you here today, I am the face of one of your fears. Because I am a woman, because I am black, because I am myself, a black woman warrior poet doing my work, come to ask you, are you doing yours?<br> And, of course, I am afraid– you can hear it in my voice– because the transformation of silence into language and action is an act of self-revelation and that always seems fraught with danger. For to survive in the mouth of this dragon we call america, we have had to learn this first and most vital lesson– that we were never meant to survive.
Not as human beings.
Because the machine will try to grind us into dust anyway, whether or not we speak. Each of us is here now because in one way or another we share a commitment to language and to the power of language, and to the reclaiming of that language which has been made to work against us.
     </p>
  </div>
 <script>
  $('#quell').blast({
  delimiter: 'word',
  customClass: "draggable"
});


  </script>


   <div id= "two">
    

    <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>
    
         <script>
    $('#bpp10').blast({
  delimiter: 'word',
  customClass: "draggable"
});
</script>
   
     
body {
  font-family: 'Exo', sans-serif;
  background-color: #fffff8;
  color: #111;
/*   padding: 0; */
}

p {
  font-family: 'Exo', sans-serif;
  padding-left: 0;
}


/* #one{
   width: 33%;
/*   bottom: 32%; */
/*   left: 5px;
  position: absolute; */
/* }  */

/* #two{
  width:33%;
  padding-left:99%;
  padding-top: 40px;
  width: 90%;
  left: 66%;
    bottom: 1%;
  position: absolute;
} */

.blast-root {
  font-family: 'Bitter', serif;
  font-size: 11px;
}

#quell {
  font-family: 'Bitter', serif;
  font-size: 12px;
  width: 33%;
/*   bottom: 32%; */
  left: 5px;
  position: absolute;
 
}

#bpp10 {
 font-family: 'Bitter', serif;
  font-size: 4px;
  text-decoration:lowercase;
    width: 33%;
top:0%;
  left: 66%;
  position: absolute;
  padding-left: 15px;
}

input {
  width: 130px;
}

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

h2 {
/*   text-align: center; */
  color: #FEF5E9;
  padding-left: 60px;
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-size: 18px;
}

.draggable {
  left: 0;
  top: 0;
  z-index: 1;
  font-family: 'Bitter', serif;
  font-size: 13px;
}

var rSlider, gSlider, bSlider;
var input, button, greeting;
var c;
var myP;
function setup() {
 c = createCanvas(windowWidth/3, windowHeight+200);
  c.position (windowWidth/3,0);

    textSize(15)
  noStroke();

  // create sliders
  rSlider = createSlider(0, 255, 100);
  rSlider.position(windowWidth/2, (windowHeight-windowHeight/2));;
  rSlider.style('width', '100px');
  gSlider = createSlider(0, 255, 0);
  gSlider.position(windowWidth/2, (windowHeight-windowHeight/2+30));;
gSlider.style('width', '100px');
  bSlider = createSlider(0, 255, 255);
  bSlider.position(windowWidth/2, (windowHeight-windowHeight/2+60));;
  bSlider.style('width', '100px');

  input = createInput();
  input.position(windowWidth/2-90, (windowHeight-windowHeight+50));

  button = createButton('submit');
  button.position(windowWidth/2+50, (windowHeight-windowHeight+50));
  button.mousePressed(greet);

    textAlign(CENTER)
  textSize(20);
  greeting = createElement('h2', 'Title of your poem?');
  greeting.position(windowWidth/2-155, (windowHeight-windowHeight));

  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 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.