p5.js is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today's web.
So you have made your p5.js code at your local server or with processing ide, and now you are trying to publish it over internet. Publishing over internet is quite a long process and might cost you a little. Here I have came with a solution to put your processing code over internet using bloggers. Its free and fast, easy to use.
Make your code using p5.js either using local server of using processing ide. After verifying that code, put that inside the given area below. Don,t modify the other codes, you might end-up in errors.
Open bloggers -> themes ->Edit Html ->Paste the code below
Code below:
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]></b:skin>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js'/>
<script>
<!--Paste in between-->
const barWidth = 20;
let lastBar = -1;
function setup() {
createCanvas(720, 400);
colorMode(HSB, width, height, 100);
noStroke();
}
function draw() {
let whichBar = mouseX / barWidth;
if (whichBar !== lastBar) {
let barX = whichBar * barWidth;
fill(barX, mouseY, 66);
rect(barX, 0, barWidth, height);
lastBar = whichBar;
}
}
<!--Paste in between-->
</script>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
</body>
</html>
