Code Playgrounds

HTML

CSS

JavaScript

/*--------------------
Vars
--------------------*/
const deg = (a) => Math.PI / 180 * a
const rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1))
const opt = {
  particles: window.width / 500 ? 1000 : 500,
  noiseScale: 0.009,
  angle: Math.PI / 180 * -90,
  h1: rand(0, 360),
  h2: rand(0, 360),
  s1: rand(20, 90),
  s2: rand(20, 90),
  l1: rand(30, 80),
  l2: rand(30, 80),
  strokeWeight: 1.2,
  tail: 82,
}
const Particles = []
let time = 0
document.body.addEventListener('click', () => {
  opt.h1 = rand(0, 360)
  opt.h2 = rand(0, 360)
  opt.s1 = rand(20, 90)
  opt.s2 = rand(20, 90)
  opt.l1 = rand(30, 80)
  opt.l2 = rand(30, 80)
  opt.angle += deg(random(60, 60)) * (Math.random() > .5 ? 1 : -1)
  
  for (let p of Particles) {
    p.randomize()
  }
})

/*--------------------
Particle
--------------------*/
class Particle {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.lx = x
    this.ly = y
    this.vx = 0
    this.vy = 0
    this.ax = 0
    this.ay = 0
    this.hueSemen = Math.random()
    this.hue = this.hueSemen > .5 ? 20 + opt.h1 : 20 + opt.h2
    this.sat = this.hueSemen > .5 ? opt.s1 : opt.s2
    this.light = this.hueSemen > .5 ? opt.l1 : opt.l2
    this.maxSpeed = this.hueSemen > .5 ? 3 : 2
  }
  
  randomize() {
    this.hueSemen = Math.random()
    this.hue = this.hueSemen > .5 ? 20 + opt.h1 : 20 + opt.h2
    this.sat = this.hueSemen > .5 ? opt.s1 : opt.s2
    this.light = this.hueSemen > .5 ? opt.l1 : opt.l2
    this.maxSpeed = this.hueSemen > .5 ? 3 : 2
  }
  
  update() {
    this.follow()
    
    this.vx += this.ax
    this.vy += this.ay
    
    var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy)
    var a = Math.atan2(this.vy, this.vx)
    var m = Math.min(this.maxSpeed, p)
    this.vx = Math.cos(a) * m
    this.vy = Math.sin(a) * m
    
    this.x += this.vx
    this.y += this.vy
    this.ax = 0
    this.ay = 0
    
    this.edges()
  }
  
  follow() {
    let angle = (noise(this.x * opt.noiseScale, this.y * opt.noiseScale, time * opt.noiseScale)) * Math.PI * 0.5 + opt.angle
    
    this.ax += Math.cos(angle)
    this.ay += Math.sin(angle)
    
  }
  
  updatePrev() {
    this.lx = this.x
    this.ly = this.y
  }
  
  edges() {
    if (this.x < 0) {
      this.x = width
      this.updatePrev()
    }
    if (this.x > width) {
      this.x = 0
      this.updatePrev()
    }
    if (this.y < 0) {
      this.y = height
      this.updatePrev()
    }
    if (this.y > height) {
      this.y = 0
      this.updatePrev()
    }
  }
  
  render () {
    stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`)
    line(this.x, this.y, this.lx, this.ly)
    this.updatePrev()
  }
}

/*--------------------
Setup
--------------------*/
function setup() {
  createCanvas(windowWidth, windowHeight)
  for (let i = 0; i < opt.particles; i++) {
    Particles.push(new Particle(Math.random() * width, Math.random() * height))
  }
  strokeWeight(opt.strokeWeight)
}

/*--------------------
Draw
--------------------*/
function draw() {
  time++
  background(0, 100 - opt.tail)
  
  for (let p of Particles) {
    p.update()
    p.render()
  }
}

/*--------------------
Resize
--------------------*/
function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
}

HTML

CSS

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bgg = document.getElementById("bg_glow");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;

window.onresize = function() {
  w = ctx.canvas.width = window.innerWidth;
  h = ctx.canvas.height = window.innerHeight;
  maxHeight = h*.9
  minHeight = h*.5;
  dots = [];
  pushDots();
  ctx.globalCompositeOperation = "lighter";
};

document.getElementById("overlay").onclick = function(){
  hue = Math.random()*360;
  bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
  dots = [];
  pushDots();
}

dots=[{}];
mx = 0; my = 0;
md = 100;
maxWidth = 15;
minWidth = 2;
maxHeight = h*.9
minHeight = h*.5;
maxSpeed = 35;
minSpeed = 6;
hue = 230;
hueDif = 50; // Hue +/-
glow = 10; // Set to 0 for better performance
ctx.globalCompositeOperation = "lighter";

bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
render();

HTML

CSS

JavaScript

/*
* File Name / glitteringSea.js
* Created Date / Aug 14, 2020
* Aurhor / Toshiya Marukubo
* Twitter / https://twitter.com/toshiyamarukubo
*/

(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
      return false;
    }

/********************
      Random Number
    ********************/

function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    
    /********************
      Var
    ********************/

var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var shapeNum = 300;
    var shapes = [];
    var style = {
      black: 'black',
      white: 'white',
      lineWidth: 4,
    };

/********************
      Animation
    ********************/

window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

/********************
      Shape
    ********************/
     
    function Shape(ctx, x, y) {
      this.ctx = ctx;
      this.init(x, y);
    }
    
    Shape.prototype.init = function(x, y) {
      this.x = x;
      this.y = y;
      this.r = rand(10, 25);
      this.ga = Math.random() * Math.random() * Math.random() * Math.random();
      this.v = {
        x: Math.random(),
        y: -1
      };
      this.l = rand(0, 20);
      this.sl = this.l;
    };

Shape.prototype.updateParams = function() {
      var ratio = this.l / this.sl;
      //this.r *= ratio;
      this.l -= 1;
      if (this.l < 0) {
        this.init(X * (Math.random() + Math.random()) / 2, rand(0, Y));
      }
    };

Shape.prototype.updatePosition = function() {
      this.x += Math.random();
      this.y += -Math.random();
    };
    
    Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.globalCompositeOperation = 'lighter';
      ctx.globalAlpha = this.ga;
      //ctx.fillStyle = 'rgb(123, 252, 100)';
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

Shape.prototype.render = function(i) {
      this.updatePosition();
      this.updateParams();
      this.draw();
    };

for (var i = 0; i < shapeNum; i++) {
      var s = new Shape(ctx, X * (Math.random() + Math.random()) / 2, rand(0, Y));
      shapes.push(s);
    }

/********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      requestAnimationFrame(render);
    }

render();

/********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
    }

window.addEventListener('resize', function() {
      onResize();
    });

window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

});
})();

HTML

CSS

JavaScript

(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
      return false;
    }

/********************
      Random Number
    ********************/

function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

/********************
      Var
    ********************/

var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var dist = 80;
    var lessThan = Math.sqrt(dist * dist + dist * dist);
    var mouseDist = 150;
    var shapeNum;
    var shapes = [];
    var ease = 0.3;
    var friction = 0.9;
    var lineWidth = 5;
    X > Y ? shapeNum = X / dist : shapeNum = Y / dist;

if (X < 768) {
      lineWidth = 2;
      dist = 40;
      lessThan = Math.sqrt(dist * dist + dist * dist);
      mouseDist = 50;
      X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
    }

/********************
      Animation
    ********************/

/********************
      Shape
    ********************/
    
    function Shape(ctx, x, y, i) {
      this.ctx = ctx;
      this.init(x, y, i);
    }
    
    Shape.prototype.init = function(x, y, i) {
      this.x = x;
      this.y = y;
      this.xi = x;
      this.yi = y;
      this.i = i;
      this.r = 1;
      this.v = {
        x: 0,
        y: 0
      };
      this.c = rand(0, 360);
    };

Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.fillStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

Shape.prototype.mouseDist = function() {
      var x = mouseX - this.x;
      var y = mouseY - this.y;
      var d = x * x + y * y;
      var dist = Math.sqrt(d);
      if (dist < mouseDist) {
        this.v.x = +this.v.x;
        this.v.y = +this.v.y;
        var colAngle = Math.atan2(mouseY - this.y, mouseX - this.x);
        this.v.x = -Math.cos(colAngle) * 5;
        this.v.y = -Math.sin(colAngle) * 5;
        this.x += this.v.x;
        this.y += this.v.y;
      } else if (dist > mouseDist && dist < mouseDist + 10) {
        this.v.x = 0;
        this.v.y = 0;
      } else {
        this.v.x += (this.xi - this.x) * ease;
        this.v.y += (this.yi - this.y) * ease;
        this.v.x *= friction;
        this.v.y *= friction;
        this.x += this.v.x;
        this.y += this.v.y;
      }
    };

Shape.prototype.drawLine = function(i) {
      var j = i;
      for (var i = 0; i < shapes.length; i++) {
        if (j !== i) {
          var x = this.x - shapes[i].x;
          var y = this.y - shapes[i].y;
          var d = x * x + y * y;
          var dist = Math.floor(Math.sqrt(d));
          if (dist <= lessThan) {
            ctx.save();
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(shapes[i].x, shapes[i].y);
            ctx.stroke();
            ctx.restore();
          }
        }
      }
    };

Shape.prototype.render = function(i) {
      this.drawLine(i);
      if (mouseX !== null) this.mouseDist();
      this.draw();
    };
    
    for (var i = 0; i < shapeNum + 1; i++) {
      for (var j = 0; j < shapeNum + 1; j++) {
        if (j * dist - dist > Y) break;
        var s = new Shape(ctx, i * dist, j * dist, i, j);
        shapes.push(s);
      }
    }
   
    /********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      requestAnimationFrame(render);
    }

render();

/********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      shapes = [];
      if (X < 768) {
        lineWidth = 2;
        dist = 40;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 50;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      } else {
        lineWidth = 5;
        dist = 80;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 150;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      }
      for (var i = 0; i < shapeNum + 1; i++) {
        for (var j = 0; j < shapeNum + 1; j++) {
          if (j * dist - dist > Y) break;
          var s = new Shape(ctx, i * dist, j * dist, i, j);
          shapes.push(s);
        }
      }
    }

window.addEventListener('resize', function() {
      onResize();
    });

window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

canvas.addEventListener('touchmove', function(e) {
      var touch = e.targetTouches[0];
      mouseX = touch.pageX;
      mouseY = touch.pageY;
    });

});
  // Author
  console.log('File Name / net.js\nCreated Date / July 11, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();

=== WP Code Playground ===
Tags: code editor, playground, HTML, CSS, JavaScript
Requires at least: 5.0
Tested up to: 6.3
Requires PHP: 7.2
Stable tag: 1.5
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Create and manage multiple HTML/CSS/JavaScript playgrounds, and render them on any page or post using a shortcode.

== Description ==

WP Code Playground is a WordPress plugin that allows you to create, edit, and display interactive code playgrounds for HTML, CSS, and JavaScript. These playgrounds can be easily rendered on any page or post using a shortcode.

**Features:**
* Create and manage multiple code playgrounds from the admin dashboard.
* Display a playground on any page or post with a shortcode like `code_playground id=”1″`.
* Real-time code execution for HTML, CSS, and JavaScript.
* User-friendly interface with separate areas for HTML, CSS, and JavaScript.
* Responsive and clean design, optimized for all devices.

Use WP Code Playground to showcase live code examples, interactive tutorials, or just as a handy tool to experiment with web development.

== Installation ==

1. Upload the `wp-code-playground` folder to the `/wp-content/plugins/` directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Go to “Code Playgrounds” in the WordPress admin menu to start creating your playgrounds.
4. Use the shortcode `code_playground id=”1″` (replace `1` with the playground ID) to display a playground on any page or post.

== Frequently Asked Questions ==

= How do I add a playground to my page? =
Use the shortcode `code_playground id=”1″`, replacing `1` with the ID of the playground you’d like to display.

= Why is my playground preview not showing? =
Ensure that JavaScript is enabled in your browser and there are no syntax errors in your JavaScript code. Check the browser console for error messages.

= Can I edit or delete playgrounds? =
Yes, you can edit or delete playgrounds from the “Code Playgrounds” admin page.

= Does this plugin support responsive design? =
Yes, WP Code Playground is fully responsive and works on all devices.

== Screenshots ==

1. Admin dashboard for managing code playgrounds.
2. Edit code playground form.
3. Playground displayed on the frontend with live preview functionality.

== Changelog ==

= 1.5 =
* Fixed iframe viewport issues.
* Enhanced layout and styling for the code editor.
* Added better error handling for JavaScript execution.

= 1.4 =
* Added support for responsive design.
* Improved UI/UX for the admin dashboard.

= 1.3 =
* Added real-time preview for code execution.
* Enhanced shortcode functionality.

= 1.2 =
* Improved database structure for storing playgrounds.
* Added category support for playgrounds.

= 1.0 =
* Initial release of the plugin.

== Upgrade Notice ==

= 1.5 =
This update fixes viewport issues and enhances the code execution preview. Upgrade for a better user experience.

== License ==

This plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or any later version.

This plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this plugin. If not, see https://www.gnu.org/licenses/gpl-2.0.html.

Code Playgrounds

Quick Links

Useful Info

Subscribe Our Newsletter

Code Playgrounds

Related products

Prayer Plugin Transcript with Audio

WordPress 3D Viewer Pro: OBJ & FBX

Positive Message of the Day

Nasa WordPress Plugin

Quick Links

Useful Info

Subscribe Our Newsletter

AZ Managed IT Services llc

AZ Managed
IT Services llc