January 13, 2020
Making a Rhyming JavaScript Shakespearean Sonnet Mixer
My JavaScript iambic pentameter generator is among the most popular programming posts on Home for Fiction. It’s a really “alpha” piece of code which I haven’t worked on since I made that first version. But here’s a little something to compensate: let’s make a rhyming JavaScript Shakespearean sonnet mixer!
Unlike the iambic pentameter generator, this JavaScript Shakespearean sonnet mixer returns much more coherent results. After all, the code doesn’t need to generate any random text. It simply shuffles the Bard’s own production.
For a relevant project, also take a look at my poem shuffler.
To keep things simple, I decided to have it generate only two rhyming lines. The more the lines, the slower it would get – and the more likely it would not find any rhyming pairs.
A Rhyming JavaScript Shakespearean Sonnet Mixer: the Program
Running in an iframe, here’s the program. It should work trouble-free, with two footnotes:
- Sometimes, instead of a rhyming line, it returns one with the same word.
- And sometimes, it returns a line that doesn’t rhyme.
I decided to allow both instances in the code, favoring speed. Keep in mind that there’s still a chance the program might be slow, depending on factors such as the repository servers, your system’s computational power, etc.
Click to run the program
I’m not sure if this piece of code would raise the Bard from his grave or make him roll over in it, but hey, I bet he’d use it if he could 😉
A Rhyming JavaScript Shakespearean Sonnet Mixer: The Code
Here’s the code for this little program. It uses my favorite RiTa library, which I’ve used for many of my projects.
Word of warning: For convenience, I’ve put the complete list of sonnets in a separate file, which I uploaded to GitHub then linked to through rawdcn.githack.com (line 11). Since this is a free service, there’s no uptime guarantee. In other words, if you plan to copy the code below and use it for your own project, I strongly recommend you download the file (i.e. using the link on line 11) and work with it directly.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Nunito" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Indie Flower" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rita/1.3.11/rita-full.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.js"></script>
<script src="https://rawcdn.githack.com/LifeIsADeflatingVest/sshonets/1c8a770402c6d852781f286fbcff5d7e4c96180a/scrSon.js"></script>
</head>
<body>
<style>
.topDiv {
width:100%;
background-color:black;
color:white;
margin:auto;
padding: 20px;
font-family: Indie Flower, Verdana, Arial;
text-align:center;
}
.theP {
font-size:1.8em;
}
.button {
background-color: #008CBA;
margin-top:10px;
opacity: 0;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-family: Nunito;
display: inline-block;
font-size: 1.2em;
border-radius: 5px;
}
.button:hover {
background-color: #015875;
font-weight:700;
}
.button1 {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
animation-name: example;
animation-fill-mode: forwards;
animation-duration: 3s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
100% {opacity:1}
}
/* Standard syntax */
@keyframes example {
100% {opacity:1}
}
</style>
<div class="topDiv">
<p class="theP">
<span class="demo1" data-in-effect="fadeIn" data-out-effect="fadeOut" id ="theText1"></span>
<br>
<span class="demo2" data-in-effect="fadeIn" data-out-effect="fadeOut" id ="theText2"><br></span>
</p>
<button id="button" class="button" onclick="window.location.reload();">Generate New</button>
</div>
<script>
var elem = document.getElementById("button");
var line1;
var line2;
rhymer1();
function rhymer1() {
line1 = generatorS();
rhymer2();
}
function rhymer2() {
const end = Date.now() + 1500; //1.5 sec checking time
line2 = generatorS();
if (RiTa.isRhyme(line1, line2)){
line2 = line2.replace(/,\s*$/, "");
$('#theText1').text(line1);
$('.demo1').textillate().on('inAnimationEnd.tlt', function () {
$('#theText2').text(line2);
$('.demo2').textillate().on('inAnimationEnd.tlt', function () {
elem.classList.add('button1');
});
});
}
else {
if(Date.now() > end){
rhymer1();
}
else {
rhymer2();
}
}
}
</script>
</body>
</html>Why not Taking a Look at the Original?
If you’re interested in Shakespeare, why not taking a look at the original work? I might have slaughtered his verse with this sonnet generator (or rather mixer), but that doesn’t mean I don’t have the greatest respect for the Bard. I do have a PhD in English, after all 😛
Read the entire collection of Shakespearean sonnets, pick your favorite, and impress someone. So long as men can breathe or eyes can see,/ So long lives this, and this gives life to thee.
Note: Also feel free to check BardBot, another funny programming concept of mine, also relate to Shakespeare.