Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <textarea id="userInput" placeholder="Paste here..." oninput="wordCount()"></textarea>
<button class="btn1" title="Save as .png" id="save" onclick="save('wordcloud.png')">💾</button>
<button class="btn2" title="Hide Controls" id="hide" onclick="hideControls()">✖️</button>

<!--Use it on parts of the Bible: https://www.gutenberg.org/files/10/10-h/10-h.htm-->

<div id="sl1" class="center">
  <input id="slider1" type="range" data-orientation="vertical" min="0" max="846" step="1">
  <div class="center3" id="sliderAmount"></div>
</div>

<!--Right slider-->
<div id="sl2" class="Rcenter">
  <input id="slider2" type="range" data-orientation="vertical" min="0" max="7" step="1">
  <div class="Rcenter3" id="sliderAmount2">blue</div>
</div>
              
            
!

CSS

              
                body{
	overflow:hidden;
	margin:0 auto;
	font-family: 'Oxygen', sans-serif;
}
textarea{
	position:absolute;
	bottom:0%;
	left:50%;
	transform:translate(-50%);
	margin-bottom:10px;
	width:90%;
	opacity:0.6;
	font-family: 'Oxygen', sans-serif;
}
.btn1, .btn2{
	position:absolute;
	cursor:pointer;
	opacity:0.7;
	padding:5px;
	font-family: 'Oxygen', sans-serif;
	font-size:1.4em;
	border-radius:100vw;
	border:0 solid #000;
}
.btn2{
	right:0;
}

.center{
  position:absolute;
  top:50%;
  left:25%;
  transform:translate(-50%,-50%);
  width:40vw;
  height:100px;
}
.center3{
  font-size: 1.1em;
  text-align:center;
  position:absolute;
  left:-8%;
  top:50%;
  transform:translate(-50%,50%) rotate(-90deg);
}
.Rcenter{
  position:absolute;
  top:50%;
  right:-48%;
  transform:translate(-50%,-50%);
  width:40vw;
  height:100px;
}
.Rcenter3{
  font-size: 1.1em;
  text-align:center;
  position:absolute;
  left:18%;
  top:50%;
  transform:translate(-50%,50%) rotate(-90deg);
}
#sl1, #sl2{
	opacity:0.7;
}
#sl1:hover, #sl2:hover, #userInput:hover, button:hover{
	opacity:1;
}
              
            
!

JS

              
                var canvas;
var counts = {};
var keys = [];
var baseText = 18;
var nums = [];
var huuues = ["blue", "green", "purple", "pink", "red", "orange", "yellow", "monochrome"];
var theHue = huuues[0];
var fonts = ["ABeeZee",
"Abel",
"Abhaya Libre",
"Abril Fatface",
"Aclonica",
"Acme",
"Actor",
"Adamina",
"Advent Pro",
"Aguafina Script",
"Akronim",
"Aladin",
"Aldrich",
"Alef",
"Alegreya",
"Alegreya Sans",
"Alegreya Sans SC",
"Alegreya SC",
"Alex Brush",
"Alfa Slab One",
"Alice",
"Alike",
"Alike Angular",
"Allan",
"Allerta",
"Allerta Stencil",
"Allura",
"Almendra",
"Almendra Display",
"Almendra SC",
"Amarante",
"Amaranth",
"Amatic SC",
"Amatica SC",
"Amethysta",
"Amiko",
"Amiri",
"Amita",
"Anaheim",
"Andada",
"Andika",
"Angkor",
"Annie Use Your Telescope",
"Anonymous Pro",
"Antic",
"Antic Didone",
"Antic Slab",
"Anton",
"Arapey",
"Arbutus",
"Arbutus Slab",
"Architects Daughter",
"Archivo",
"Archivo Black",
"Archivo Narrow",
"Aref Ruqaa",
"Arima Madurai",
"Arimo",
"Arizonia",
"Armata",
"Arsenal",
"Artifika",
"Arvo",
"Arya",
"Asap",
"Asap Condensed",
"Asar",
"Asset",
"Assistant",
"Astloch",
"Asul",
"Athiti",
"Atma",
"Atomic Age",
"Aubrey",
"Audiowide",
"Autour One",
"Average",
"Average Sans",
"Averia Gruesa Libre",
"Averia Libre",
"Averia Sans Libre",
"Averia Serif Libre",
"Bad Script",
"Bahiana",
"Baloo",
"Baloo Bhai",
"Baloo Bhaijaan",
"Baloo Bhaina",
"Baloo Chettan",
"Baloo Da",
"Baloo Paaji",
"Baloo Tamma",
"Baloo Tammudu",
"Baloo Thambi",
"Balthazar",
"Bangers",
"Barrio",
"Basic",
"Battambang",
"Baumans",
"Bayon",
"Belgrano",
"Bellefair",
"Belleza",
"BenchNine",
"Bentham",
"Berkshire Swash",
"Bevan",
"Bigelow Rules",
"Bigshot One",
"Bilbo",
"Bilbo Swash Caps",
"BioRhyme",
"BioRhyme Expanded",
"Biryani",
"Bitter",
"Black Ops One",
"Bokor",
"Bonbon",
"Boogaloo",
"Bowlby One",
"Bowlby One SC",
"Brawler",
"Bree Serif",
"Bubblegum Sans",
"Bubbler One",
"Buda",
"Buenard",
"Bungee",
"Bungee Hairline",
"Bungee Inline",
"Bungee Outline",
"Bungee Shade",
"Butcherman",
"Butterfly Kids",
"Cabin",
"Cabin Condensed",
"Cabin Sketch",
"Caesar Dressing",
"Cagliostro",
"Cairo",
"Calligraffitti",
"Cambay",
"Cambo",
"Candal",
"Cantarell",
"Cantata One",
"Cantora One",
"Capriola",
"Cardo",
"Carme",
"Carrois Gothic",
"Carrois Gothic SC",
"Carter One",
"Catamaran",
"Caudex",
"Caveat",
"Caveat Brush",
"Cedarville Cursive",
"Ceviche One",
"Changa",
"Changa One",
"Chango",
"Chathura",
"Chau Philomene One",
"Chela One",
"Chelsea Market",
"Chenla",
"Cherry Cream Soda",
"Cherry Swash",
"Chewy",
"Chicle",
"Chivo",
"Chonburi",
"Cinzel",
"Cinzel Decorative",
"Clicker Script",
"Coda",
"Coda Caption",
"Codystar",
"Coiny",
"Combo",
"Comfortaa",
"Coming Soon",
"Concert One",
"Condiment",
"Content",
"Contrail One",
"Convergence",
"Cookie",
"Copse",
"Corben",
"Cormorant",
"Cormorant Garamond",
"Cormorant Infant",
"Cormorant SC",
"Cormorant Unicase",
"Cormorant Upright",
"Courgette",
"Cousine",
"Coustard",
"Covered By Your Grace",
"Crafty Girls",
"Creepster",
"Crete Round",
"Crimson Text",
"Croissant One",
"Crushed",
"Cuprum",
"Cutive",
"Cutive Mono",
"Damion",
"Dancing Script",
"Dangrek",
"David Libre",
"Dawning of a New Day",
"Days One",
"Dekko",
"Delius",
"Delius Swash Caps",
"Delius Unicase",
"Della Respira",
"Denk One",
"Devonshire",
"Dhurjati",
"Didact Gothic",
"Diplomata",
"Diplomata SC",
"Domine",
"Donegal One",
"Doppio One",
"Dorsa",
"Dosis",
"Dr Sugiyama",
"Droid Sans",
"Droid Sans Mono",
"Droid Serif",
"Duru Sans",
"Dynalight",
"Eagle Lake",
"Eater",
"EB Garamond",
"Economica",
"Eczar",
"El Messiri",
"Electrolize",
"Elsie",
"Elsie Swash Caps",
"Emblema One",
"Emilys Candy",
"Encode Sans",
"Encode Sans Condensed",
"Encode Sans Expanded",
"Encode Sans Semi Condensed",
"Encode Sans Semi Expanded",
"Engagement",
"Englebert",
"Enriqueta",
"Erica One",
"Esteban",
"Euphoria Script",
"Ewert",
"Exo",
"Exo 2",
"Expletus Sans",
"Fanwood Text",
"Farsan",
"Fascinate",
"Fascinate Inline",
"Faster One",
"Fasthand",
"Fauna One",
"Faustina",
"Federant",
"Federo",
"Felipa",
"Fenix",
"Finger Paint",
"Fira Mono",
"Fira Sans",
"Fira Sans Condensed",
"Fira Sans Extra Condensed",
"Fjalla One",
"Fjord One",
"Flamenco",
"Flavors",
"Fondamento",
"Fontdiner Swanky",
"Forum",
"Francois One",
"Frank Ruhl Libre",
"Freckle Face",
"Fredericka the Great",
"Fredoka One",
"Freehand",
"Fresca",
"Frijole",
"Fruktur",
"Fugaz One",
"Gabriela",
"Gafata",
"Galada",
"Galdeano",
"Galindo",
"Gentium Basic",
"Gentium Book Basic",
"Geo",
"Geostar",
"Geostar Fill",
"Germania One",
"GFS Didot",
"GFS Neohellenic",
"Gidugu",
"Gilda Display",
"Give You Glory",
"Glass Antiqua",
"Glegoo",
"Gloria Hallelujah",
"Goblin One",
"Gochi Hand",
"Gorditas",
"Goudy Bookletter 1911",
"Graduate",
"Grand Hotel",
"Gravitas One",
"Great Vibes",
"Griffy",
"Gruppo",
"Gudea",
"Gurajada",
"Habibi",
"Halant",
"Hammersmith One",
"Hanalei",
"Hanalei Fill",
"Handlee",
"Hanuman",
"Happy Monkey",
"Harmattan",
"Headland One",
"Heebo",
"Henny Penny",
"Herr Von Muellerhoff",
"Hind",
"Hind Guntur",
"Hind Madurai",
"Hind Siliguri",
"Hind Vadodara",
"Holtwood One SC",
"Homemade Apple",
"Homenaje",
"Iceberg",
"Iceland",
"IM Fell Double Pica",
"IM Fell Double Pica SC",
"IM Fell DW Pica",
"IM Fell DW Pica SC",
"IM Fell English",
"IM Fell English SC",
"IM Fell French Canon",
"IM Fell French Canon SC",
"IM Fell Great Primer",
"IM Fell Great Primer SC",
"Imprima",
"Inconsolata",
"Inder",
"Indie Flower",
"Inika",
"Inknut Antiqua",
"Irish Grover",
"Istok Web",
"Italiana",
"Italianno",
"Itim",
"Jacques Francois",
"Jacques Francois Shadow",
"Jaldi",
"Jim Nightshade",
"Jockey One",
"Jolly Lodger",
"Jomhuria",
"Josefin Sans",
"Josefin Slab",
"Joti One",
"Judson",
"Julee",
"Julius Sans One",
"Junge",
"Jura",
"Just Another Hand",
"Just Me Again Down Here",
"Kadwa",
"Kalam",
"Kameron",
"Kanit",
"Kantumruy",
"Karla",
"Karma",
"Katibeh",
"Kaushan Script",
"Kavivanar",
"Kavoon",
"Kdam Thmor",
"Keania One",
"Kelly Slab",
"Kenia",
"Khand",
"Khmer",
"Khula",
"Kite One",
"Knewave",
"Kotta One",
"Koulen",
"Kranky",
"Kreon",
"Kristi",
"Krona One",
"Kumar One",
"Kumar One Outline",
"Kurale",
"La Belle Aurore",
"Laila",
"Lakki Reddy",
"Lalezar",
"Lancelot",
"Lateef",
"Lato",
"League Script",
"Leckerli One",
"Ledger",
"Lekton",
"Lemon",
"Lemonada",
"Libre Barcode 128",
"Libre Barcode 128 Text",
"Libre Barcode 39",
"Libre Barcode 39 Extended",
"Libre Barcode 39 Extended Text",
"Libre Barcode 39 Text",
"Libre Baskerville",
"Libre Franklin",
"Life Savers",
"Lilita One",
"Lily Script One",
"Limelight",
"Linden Hill",
"Lobster",
"Lobster Two",
"Londrina Outline",
"Londrina Shadow",
"Londrina Sketch",
"Londrina Solid",
"Lora",
"Love Ya Like A Sister",
"Loved by the King",
"Lovers Quarrel",
"Luckiest Guy",
"Lusitana",
"Lustria",
"Macondo",
"Macondo Swash Caps",
"Mada",
"Magra",
"Maiden Orange",
"Maitree",
"Mako",
"Mallanna",
"Mandali",
"Manuale",
"Marcellus",
"Marcellus SC",
"Marck Script",
"Margarine",
"Marko One",
"Marmelad",
"Martel",
"Martel Sans",
"Marvel",
"Mate",
"Mate SC",
"Maven Pro",
"McLaren",
"Meddon",
"MedievalSharp",
"Medula One",
"Meera Inimai",
"Megrim",
"Meie Script",
"Merienda",
"Merienda One",
"Merriweather",
"Merriweather Sans",
"Metal",
"Metal Mania",
"Metamorphous",
"Metrophobic",
"Michroma",
"Milonga",
"Miltonian",
"Miltonian Tattoo",
"Miniver",
"Miriam Libre",
"Mirza",
"Miss Fajardose",
"Mitr",
"Modak",
"Modern Antiqua",
"Mogra",
"Molengo",
"Molle",
"Monda",
"Monofett",
"Monoton",
"Monsieur La Doulaise",
"Montaga",
"Montez",
"Montserrat",
"Montserrat Alternates",
"Montserrat Subrayada",
"Moul",
"Moulpali",
"Mountains of Christmas",
"Mouse Memoirs",
"Mr Bedfort",
"Mr Dafoe",
"Mr De Haviland",
"Mrs Saint Delafield",
"Mrs Sheppards",
"Mukta",
"Mukta Mahee",
"Mukta Malar",
"Mukta Vaani",
"Muli",
"Mystery Quest",
"Neucha",
"Neuton",
"New Rocker",
"News Cycle",
"Niconne",
"Nixie One",
"Nobile",
"Nokora",
"Norican",
"Nosifer",
"Nothing You Could Do",
"Noticia Text",
"Noto Sans",
"Noto Serif",
"Nova Cut",
"Nova Flat",
"Nova Mono",
"Nova Oval",
"Nova Round",
"Nova Script",
"Nova Slim",
"Nova Square",
"NTR",
"Numans",
"Nunito",
"Nunito Sans",
"Odor Mean Chey",
"Offside",
"Old Standard TT",
"Oldenburg",
"Oleo Script",
"Oleo Script Swash Caps",
"Open Sans",
"Open Sans Condensed",
"Oranienbaum",
"Orbitron",
"Oregano",
"Orienta",
"Original Surfer",
"Oswald",
"Over the Rainbow",
"Overlock",
"Overlock SC",
"Overpass",
"Overpass Mono",
"Ovo",
"Oxygen",
"Oxygen Mono",
"Pacifico",
"Padauk",
"Palanquin",
"Palanquin Dark",
"Pangolin",
"Paprika",
"Parisienne",
"Passero One",
"Passion One",
"Pathway Gothic One",
"Patrick Hand",
"Patrick Hand SC",
"Pattaya",
"Patua One",
"Pavanam",
"Paytone One",
"Peddana",
"Peralta",
"Permanent Marker",
"Petit Formal Script",
"Petrona",
"Philosopher",
"Piedra",
"Pinyon Script",
"Pirata One",
"Plaster",
"Play",
"Playball",
"Playfair Display",
"Playfair Display SC",
"Podkova",
"Poiret One",
"Poller One",
"Poly",
"Pompiere",
"Pontano Sans",
"Poppins",
"Port Lligat Sans",
"Port Lligat Slab",
"Pragati Narrow",
"Prata",
"Preahvihear",
"Press Start 2P",
"Pridi",
"Princess Sofia",
"Prociono",
"Prompt",
"Prosto One",
"Proza Libre",
"PT Mono",
"PT Sans",
"PT Sans Caption",
"PT Sans Narrow",
"PT Serif",
"PT Serif Caption",
"Puritan",
"Purple Purse",
"Quando",
"Quantico",
"Quattrocento",
"Quattrocento Sans",
"Questrial",
"Quicksand",
"Quintessential",
"Qwigley",
"Racing Sans One",
"Radley",
"Rajdhani",
"Rakkas",
"Raleway",
"Raleway Dots",
"Ramabhadra",
"Ramaraja",
"Rambla",
"Rammetto One",
"Ranchers",
"Rancho",
"Ranga",
"Rasa",
"Rationale",
"Ravi Prakash",
"Redressed",
"Reem Kufi",
"Reenie Beanie",
"Revalia",
"Rhodium Libre",
"Ribeye",
"Ribeye Marrow",
"Righteous",
"Risque",
"Roboto",
"Roboto Condensed",
"Roboto Mono",
"Roboto Slab",
"Rochester",
"Rock Salt",
"Rokkitt",
"Romanesco",
"Ropa Sans",
"Rosario",
"Rosarivo",
"Rouge Script",
"Rozha One",
"Rubik",
"Rubik Mono One",
"Ruda",
"Rufina",
"Ruge Boogie",
"Ruluko",
"Rum Raisin",
"Ruslan Display",
"Russo One",
"Ruthie",
"Rye",
"Sacramento",
"Sahitya",
"Sail",
"Saira",
"Saira Condensed",
"Saira Extra Condensed",
"Saira Semi Condensed",
"Salsa",
"Sanchez",
"Sancreek",
"Sansita",
"Sarala",
"Sarina",
"Sarpanch",
"Satisfy",
"Scada",
"Scheherazade",
"Schoolbell",
"Scope One",
"Seaweed Script",
"Secular One",
"Sedgwick Ave",
"Sedgwick Ave Display",
"Sevillana",
"Seymour One",
"Shadows Into Light",
"Shadows Into Light Two",
"Shanti",
"Share",
"Share Tech",
"Share Tech Mono",
"Shojumaru",
"Short Stack",
"Shrikhand",
"Siemreap",
"Sigmar One",
"Signika",
"Signika Negative",
"Simonetta",
"Sintony",
"Sirin Stencil",
"Six Caps",
"Skranji",
"Slabo 13px",
"Slabo 27px",
"Slackey",
"Smokum",
"Smythe",
"Sniglet",
"Snippet",
"Snowburst One",
"Sofadi One",
"Sofia",
"Sonsie One",
"Sorts Mill Goudy",
"Source Code Pro",
"Source Sans Pro",
"Source Serif Pro",
"Space Mono",
"Special Elite",
"Spectral",
"Spicy Rice",
"Spinnaker",
"Spirax",
"Squada One",
"Sree Krushnadevaraya",
"Sriracha",
"Stalemate",
"Stalinist One",
"Stardos Stencil",
"Stint Ultra Condensed",
"Stint Ultra Expanded",
"Stoke",
"Strait",
"Sue Ellen Francisco",
"Suez One",
"Sumana",
"Sunshiney",
"Supermercado One",
"Sura",
"Suranna",
"Suravaram",
"Suwannaphum",
"Swanky and Moo Moo",
"Syncopate",
"Tangerine",
"Taprom",
"Tauri",
"Taviraj",
"Teko",
"Telex",
"Tenali Ramakrishna",
"Tenor Sans",
"Text Me One",
"The Girl Next Door",
"Tienne",
"Tillana",
"Timmana",
"Tinos",
"Titan One",
"Titillium Web",
"Trade Winds",
"Trirong",
"Trocchi",
"Trochut",
"Trykker",
"Tulpen One",
"Ubuntu",
"Ubuntu Condensed",
"Ubuntu Mono",
"Ultra",
"Uncial Antiqua",
"Underdog",
"Unica One",
"UnifrakturCook",
"UnifrakturMaguntia",
"Unkempt",
"Unlock",
"Unna",
"Vampiro One",
"Varela",
"Varela Round",
"Vast Shadow",
"Vesper Libre",
"Vibur",
"Vidaloka",
"Viga",
"Voces",
"Volkhov",
"Vollkorn",
"Voltaire",
"VT323",
"Waiting for the Sunrise",
"Wallpoet",
"Walter Turncoat",
"Warnes",
"Wellfleet",
"Wendy One",
"Wire One",
"Work Sans",
"Yanone Kaffeesatz",
"Yantramanav",
"Yatra One",
"Yellowtail",
"Yeseva One",
"Yesteryear",
"Yrsa",
"Zeyada",
"Zilla Slab",
"Zilla Slab Highlight"
];
var theFont = fonts[0];
var stopwords = ["a","s", "about", "above", "after", "again", "against", "all", "am", "an", "and", "any","are","aren't","as","at","be","because","been","before","being","below","between","both","but","by","can't","cannot","could","couldn't","did","didn't","do","does","doesn't","doing","don't","down","during","each","few","for","from","further","had","hadn't","has","hasn't","have","haven't","having","he","he'd","he'll","he's","her","here","here's","hers","herself","him","himself","his","how","how's","i","i'd","i'll","i'm","i've","if","in","into","is","isn't","it","it's","its","itself","let's","me","more","most","mustn't","my","myself","no","nor","not","of","off","on","once","only","or","other","ought","our","ours","ourselves","out","over","own","same","shan't","she","she'd","she'll","she's","should","shouldn't","so","some","such","than","that","that's","the","their","theirs","them","themselves","then","there","there's","these","they","they'd","they'll","they're","they've","this","those","through","to","too","under","until","up","very","was","wasn't","we","we'd","we'll","we're","we've","were","weren't","what","what's","when","when's","where","where's","which","while","who","who's","whom","why","why's","with","won't","would","wouldn't","you","you'd","you'll","you're","you've","your","yours","yourself","yourselves"];

// var common = false;

// var FizzyText = function() {
//   this.speed = 0.8;
//   this.RemoveCommon = common;
//   //this.explode = function() { /**/ };
//   // Define render logic ...
// };

function setup(){
	var randy = randomColor({
   luminosity: 'bright',
   hue: theHue
});
	canvas = createCanvas(window.innerWidth, window.innerHeight);
	background(randy);
	// var text = new FizzyText();
	// var gui = new dat.GUI();
	// gui.add(text, 'speed', -5, 5);
	// gui.add(text, 'RemoveCommon');
	// //gui.add(text, 'explode');
}

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
	wordCount();
}

//helper functions
//*********************
function countInArray(array, what) {
    var count = 0;
    for (var i = 0; i < array.length; i++) {
        if (array[i] === what) {
            count++;
        }
    }
    return count;
}

//Random Number generator
function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

//for filtering stopwords
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}

//*********************

//cloud creator
function wordCount(){
	//reset word counts
	counts = {};
	keys = [];
	nums = [];
	
	//clear canvas
	clear();
	//create the random colors
	var bgCol = randomColor({
   luminosity: 'bright',
   hue: theHue
});
	//change the canvas background
	canvas.background(bgCol);
	var userText = document.getElementById("userInput").value;
	var tokens = userText.split(/\W+/);
	
	//Count em
	for (var i = 0; i < tokens.length; i++){
		var word = tokens[i].toLowerCase();
		//No numbers or stopwords
		if (!/\d+/.test(word) && isInArray(word,stopwords) == false){
			if (counts[word] === undefined){
				counts[word] = 1;
				keys.push(word);
			} else {
				counts[word] = counts[word] + 1;
			}
		}
	}
	
	//loop through keys array
	for (var i=0; i<keys.length; i++){
		//new num array
		
		//loop through keys array
		var key = keys[i];
		var num = counts[key];
		
		//push all numbers into nums array
		nums.push(num);

	}
	//set random colors
	var randCo = randomColor({
		luminosity: 'bright',
		count: keys.length,
		hue: theHue
});
	
	//var randFont = fonts[randomNumber(0,(fonts.length-1))];
	
	//most used word
	var mostUsed = Math.max.apply(null, nums);
	
	//most used word
	var leastUsed = Math.min.apply(null, nums);
	
	//create number loop
	for(var i=0; i<nums.length; i++){
			
		//if it's the most used word and it only appears once
		if(nums[i] == mostUsed && (countInArray(nums,mostUsed) == 1)){
			textAlign(CENTER);
			textSize(baseText + (nums[i]*2));
			textFont(theFont);
			//put it in the center
			text(keys[i], (window.innerWidth/2), (window.innerHeight/2));
			fill(randCo[i]);
			
			//if it's the least-used word
		} else if (nums[i] == leastUsed){
			
			//random number 0,1
		var topBtm = randomNumber(0,1);
			
			if (topBtm == 0){
				//bottom third
				textAlign(CENTER);
				textSize(baseText + (nums[i]*2));
				textFont(theFont);
				text(keys[i], randomNumber(baseText,window.innerWidth), randomNumber((window.innerHeight/1.5),window.innerHeight));
				fill(randCo[i]);
			} else {
				//top third
				var textPx = baseText + (nums[i]*2);
				textAlign(CENTER);
				textSize(textPx);
				textFont(theFont);
				text(keys[i], randomNumber((baseText + textPx),window.innerWidth), randomNumber(baseText,(window.innerHeight/4)));
				fill(randCo[i]);
			}
		} else {
			//not most or least used
			textAlign(CENTER);
			textSize(baseText + (nums[i]*2));
			textFont(theFont);
			text(keys[i], randomNumber(baseText,(window.innerWidth-baseText)), randomNumber(baseText,(window.innerHeight-baseText)));
			fill(randCo[i]);
		}
	}
}

function saveTheCanvas(){
	save("cloud.jpg");
}


//start off on in the middle.
$('#slider1').val(423).change();
$('#slider2').val(0).change();

//function called when updated
function updateSlider(thisVal) {
	var sliderDiv = document.getElementById("sliderAmount");
	sliderDiv.innerHTML = fonts[thisVal];
	theFont = fonts[thisVal];
	sliderDiv.style.fontFamily = theFont;
}

//function called when right slider is updated
function updateSlider2(thisVal){
	var sliderDiv2 = document.getElementById("sliderAmount2");
	sliderDiv2.innerHTML = huuues[thisVal];
	theHue = huuues[thisVal];
}

//rangeslider.js mumbo jumbo
var $element1 = $('#slider1');
var $element2 = $('#slider2');
var $output = $('output');

$element1
  .rangeslider({
    polyfill: false,
    onInit: function() {
      updateSlider(this.value);
    }
  })
  .on('input', function() {
    updateSlider(this.value);
		wordCount();
  });

$element2
  .rangeslider({
    polyfill: false,
    onInit: function() {
      updateSlider2(this.value);
    }
  })
  .on('input', function() {
    updateSlider2(this.value);
		wordCount();
  });

function hideControls(){
	$("#save").slideToggle();
	$("#sl1").slideToggle();
	$("#sl2").slideToggle();
	$("#userInput").slideToggle();
	//change button icon
	var text = $('#hide').text();
  $('#hide').text(
		text == "✖️" ? "🛠️" : "✖️");
	var prop = $('#hide').prop("title");
	//change title
		text == "✖️" ? $('#hide').prop("title","Show Controls") : $('#hide').prop("title","Hide Controls");
}
              
            
!
999px

Console