Troubles with inserting pens

  • 1
  • Question
  • Updated 1 year ago
  • Answered
Hello, I am having trouble inserting a pen. https://codepen.io/Amaj/pen/QwJqBL

That is the link to the pen what happens is after i export it onto my computer and I'm able to open the html file I can't seem to get it to work when i inspect element and take the code and insert it into the html widget. I tried to remove background as all i want is the bubbles and I can successfully do that but I cannot get the bubbles for some reason.
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
What do you want for background; what is the look you are going for? I mean you are not going to have white bubbles on white background, right? Apparently there is some certain plan.
(Edited)
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>

<body style="width:1920px;height:1080px; margin: 0; overflow: hidden;" >
<div  id="ph0" placeholder="true" style="width:1933px;height:1094px;left:-4px;top:-3px;z-index:0;position:absolute;"></div>
</body>

<!-- Warning - Editing the Presentation Data Object incorrectly may result in the Presentation not functioning correctly -->
<script language="javascript">
<!--
var presentationData = {
"presentationData": {
"id": "",
"hidePointer": true,
"donePlaceholder": "",
"placeholders": [
{
"id": "ph0",
"type": "playlist",
"timeDefined": false,
"visibility": true,
"transition": "none",
"items": [
{
"name": "HTML Widget",
"duration": 10,
"type": "widget",
"objectReference": "c187c76a-c85b-4bd9-91fa-6f2748c8189c",
"objectData": "http://s3.amazonaws.com/widget-html/0.1.0/dist/widget.html";,
"additionalParams": "{\"html\":\"<!DOCTYPE html>\\r\\n<html>\\r\\n<head>\\r\\n<style>\\r\\nbody {\\r\\n  margin: 0;\\r\\n  overflow: hidden;\\r\\n}\\r\\n</style>\\r\\n<meta charset=\\\"UTF-8\\\">\\r\\n<title>Bubbles</title>\\r\\n<link rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css\\\">>\\r\\n</head... fun with particles. \\r\\nAgain everything made in TypeScript (and translated to pure JavaScript). \\r\\nCodePen - we need TypeScript support!\\r\\n\\r\\n@Amay 2015\\r\\n*/\\r\\nvar Bubbles = (function () {\\r\\n    function Bubbles() {\\r\\n        this.canvas = document.createElement('canvas');\\r\\n        this.ctx = this.canvas.getContext('2d');\\r\\n        this.particles = [];\\r\\n      \\tthis.counter = 0;\\r\\n    } \\r\\n    Bubbles.prototype.init = function () {\\r\\n        this.createElement();\\r\\n        this.loop();\\r\\n    };\\r\\n    Bubbles.prototype.createElement = function () {\\r\\n        var scale = 1;\\r\\n        this.canvas.width = window.innerWidth;\\r\\n        this.canvas.height = window.innerHeight;\\r\\n        this.canvas.style.background = 'rgb(56, 115, 152)';\\r\\n        this.canvas.style.width = '100%';\\r\\n        this.ctx.transform(scale, 0, 0, -scale, this.canvas.width / 2, this.canvas.height / 2);\\r\\n        document.body.appendChild(this.canvas);\\r\\n      \\tfor(var i = 0; i < 400; i++) {\\r\\n          \\tthis.createParticle();\\r\\n        }\\r\\n    };\\r\\n    Bubbles.prototype.createParticle = function () {\\r\\n        this.particles.push({\\r\\n            color: Math.random() > 0.5 ? \\\"rgba(255, 255, 255, 0.9)\\\" : \\\"rgba(255, 255, 255, 0.4)\\\",\\r\\n            radius: Math.random() * 16,\\r\\n            x: (Math.random() - 0.5) * 25,\\r\\n            y: - this.canvas.height / 2,\\r\\n            xVel: (Math.random() - 0.5) * 2,\\r\\n            yVel: (Math.random() + 0.5)\\r\\n        });\\r\\n    };\\r\\n    Bubbles.prototype.disappearParticle = function (p) {\\r\\n        if (p.radius < 0.5) {\\r\\n            this.resetParticle(p);\\r\\n        }\\r\\n        p.radius *= 0.994;\\r\\n    };\\r\\n    Bubbles.prototype.resetParticle = function (p) {\\r\\n        p.radius = Math.random() * 16;\\r\\n        p.x = (Math.random() - 0.5) * 25;\\r\\n        p.y = - this.canvas.height / 2;\\r\\n    };\\r\\n    Bubbles.prototype.moveParticle = function (p) {\\r\\n        p.x += p.xVel;\\r\\n        p.y += p.yVel;\\r\\n    };\\r\\n    Bubbles.prototype.draw = function (p) {\\r\\n        this.ctx.beginPath();\\r\\n        this.ctx.fillStyle = p.color;\\r\\n        this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\\r\\n      \\tthis.ctx.fill();\\r\\n    };\\r\\n    Bubbles.prototype.loop = function () {\\r\\n        var _this = this;\\r\\n      \\tif (this.counter < this.particles.length) {\\r\\n      \\t\\t\\tthis.counter ++;\\r\\n        }\\r\\n        this.ctx.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);\\r\\n        for (var i = 0; i < this.counter; i++) {\\r\\n            this.moveParticle(this.particles[i]);\\r\\n            this.disappearParticle(this.particles[i]);\\r\\n            this.draw(this.particles[i]);\\r\\n        }\\r\\n        requestAnimationFrame(function () { return _this.loop(); });\\r\\n    };\\r\\n    return Bubbles;\\r\\n})();\\r\\nwindow.onload = function () {\\r\\n\\t\\tvar particles = new Bubbles();\\r\\n\\t\\tparticles.init();\\r\\n};</script>\\r\\n<canvas width=\\\"1600\\\" height=\\\"1067\\\" style=\\\"background: rgb(56, 115, 152) none repeat scroll 0% 0%; width: 100%;\\\"></canvas></body></html>\\r\\n\"}",
"timeDefined": false
}
],
"distributeToAll": true
}
]
}
};
//-->
</script>
<!-- No scripts after this point -->
</html>
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb
that is what I just did but all i have is a blue background and i tried your instructions twice any idea on what i messed up on?
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb
If you enter that into your html for the whole presentation you should be able to view it
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
What's your email Robert?