Black Octopus Cartoons

blackoctopuscartoons.com

WRITTEN FONT

𓂀

HTML Development Environment

y = sqrt(x)

y = x²

Typing

new windows

BlackOctopusOreo.glb

HTML Babylon JavaScript Box


<!DOCTYPE html>
<html>
<head>
  <title>.glb box</title>
  <style>
    #fullScreen {
      position: fixed;
      z-index: 100;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: black;
      color: lime;
      opacity: 1;
      text-align: left;
      width: 100%;
      height: 100%;
      border: 1px solid #00ff00;
    }
  </style>
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/serializers/babylon.glTF2Serializer.js"></script>
</head>

<body>
  <div id="fullScreen" style="background-color: black; border-color: rgba(0,0,0,0);">
    <br />
    <canvas id="renderCanvas" touch-action="true" style="width:availWidth; height:availHeight"></canvas>
  </div>
  <script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function() {
      var scene = new BABYLON.Scene(engine);
      var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
      camera.attachControl(canvas, true);

      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
      light.diffuse = new BABYLON.Color3(1, 1, 1);
      light.intensity = 0.66;

      var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(-1, -1, -1), scene);
      light1.diffuse = new BABYLON.Color3(1, 1, 1);
      light1.intensity = 0.33;

      var light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, -1, -1), scene);
      light2.diffuse = new BABYLON.Color3(1, 1, 1);
      light2.intensity = 0.1;

      var material = new BABYLON.StandardMaterial("material", scene);
      material.diffuseColor = new BABYLON.Color3(0, 1, 0);
      material.specularColor = new BABYLON.Color3(0, 1, 0);
      material.specularPower = 64;

      var box = BABYLON.MeshBuilder.CreateBox("box", {size: 5}, scene);
      box.material = material;

      return scene;
    };

    var scene = createScene();

    engine.runRenderLoop(function() {
      scene.render();
    });

    window.addEventListener("resize", function() {
      engine.resize();
    });
  </script>
</body>
</html>

COPY and PASTE HTML TRON


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      background: black;
      font-family: monospace;
      color: lime;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #game-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      border: ;
    }
    #scoreboard {
      position: absolute;
      top: 5px;
      left: 5px;
      font-size: 14px;
      z-index: 10;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <div id="game-wrapper">
    <div id="scoreboard">Blue: 0 | Red: 0</div>
    <canvas id="tron" style="width:100%; height:100%"></canvas>
  </div>
  <script>
    const canvas = document.getElementById("tron");
    const ctx = canvas.getContext("2d");

    const players = [
      { x: 50, y: 50, dir: 0, color: "blue", trail: [], score: 0 },
      { x: 400, y: 200, dir: 2, color: "red", trail: [], score: 0 }
    ];

    function drawTrail(p) {
      ctx.fillStyle = p.color;
      p.trail.forEach(([x, y]) => ctx.fillRect(x, y, 3, 3));
    }

    function movePlayer(p) {
      if (Math.random() < 0.05) p.dir = Math.floor(Math.random() * 4);
      const speed = 1;
      switch (p.dir) {
        case 0: p.y -= speed; break;
        case 1: p.x += speed; break;
        case 2: p.y += speed; break;
        case 3: p.x -= speed; break;
      }
      // Stay inside bounds
      p.x = Math.max(0, Math.min(canvas.width, p.x));
      p.y = Math.max(0, Math.min(canvas.height, p.y));
      p.trail.push([p.x, p.y]);
      if (p.trail.length > 500) p.trail.shift();
      p.score++;
    }

    function updateScoreboard() {
      document.getElementById("scoreboard").textContent =
        `Blue: ${players[0].score} | Red: ${players[1].score}`;
    }

    function gameLoop() {
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      players.forEach(p => {
        movePlayer(p);
        drawTrail(p);
      });
      updateScoreboard();
      requestAnimationFrame(gameLoop);
    }

    gameLoop();
  </script>
</body>
</html>

.glb button with bolt object



<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Phillip Macias">
<meta name="description" content="blackoctopuscartoons.com box.glb">
<title>.glb box</title>
<style>
 #fullScreen {
    position: fixed;
    z-index: 100;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    color: lime;
    opacity: 1;
    text-align: left;
    width: 100%;
    height: 100%;
    border: 1px solid #00ff00;
  }
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylon.glTF2Serializer.js"></script>
</head>
<body>
  <div style="background-color: black; border-color: rgba(0,0,0,0);" id="fullScreen" style="text-align: ;">
    <button onclick="downloadScene()">Download .glb box</button>
    <br />
    <canvas id="renderCanvas" touch-action="true" style="width:availWidth; height:availHeight"></canvas>
  </div>

  <script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function() {
      var scene = new BABYLON.Scene(engine);
      var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
      camera.attachControl(canvas, true);

      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
      light.diffuse = new BABYLON.Color3(1, 1, 1); 
      light.intensity = .66;

      var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(-1, -1, -1), scene);
      light1.diffuse = new BABYLON.Color3(1, 1, 1);
      light1.intensity = .33;

      var light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, -1, -1), scene);
      light2.diffuse = new BABYLON.Color3(1, 1, 1);
      light2.intensity = .1;

      var material = new BABYLON.StandardMaterial("material", scene);
      material.diffuseColor = new BABYLON.Color3(.8, .5, .2);
      material.specularColor = new BABYLON.Color3(.8, .5, .2);
      material.specularPower = 64;

      const shaft = BABYLON.MeshBuilder.CreateCylinder("shaft", {
      diameter: 0.4,
      height: 2,
      tessellation: 64
    }, scene);
    shaft.position.y = 1;
shaft.material = material;
var newTarget = new BABYLON.Vector3(1, 1, 0);
camera.setTarget(shaft.position);
    // Bolt head
    const head = BABYLON.MeshBuilder.CreateCylinder("head", {
      diameter: 0.7,
      height: 0.3,
      tessellation: 6 // hexagonal head
    }, scene);
    head.position.y = 2.15;
head.material = material;
    // Simulated thread using a helix
    const threadPoints = [];
    const turns = 20;
    const radius = 0.2;
    const height = 2;
    const segments = 200;

    for (let i = 0; i <= segments; i++) {
      const angle = i * (Math.PI * 2 * turns / segments);
      const y = i * (height / segments);
      const x = radius * Math.cos(angle);
      const z = radius * Math.sin(angle);
      threadPoints.push(new BABYLON.Vector3(x, y, z));
    }

    const thread = BABYLON.MeshBuilder.CreateTube("thread", {
      path: threadPoints,
      radius: 0.02,
      tessellation: 8,
      cap: BABYLON.Mesh.CAP_ROUND
    }, scene);
    thread.position.y = 0;
    thread.material = material;
      return scene;
    };

    var scene = createScene();
    engine.runRenderLoop(function() {
      scene.render();
    });

    window.addEventListener("resize", function() {
      engine.resize();
    });
  </script>

  <script>
    function downloadScene() {
      BABYLON.GLTF2Export.GLBAsync(scene, "blackoctopuscombox").then((glb) => {
        glb.downloadFiles();
      });
    }
  </script>
 
</body>
</html>

y = sin(x)

Hyperlink


<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com">
example.com
</a>
</body>
</html>

This Site Uses Cookies
Click the button and/or visit again to see how many times you have clicked and visited.

100%

TIME:TIME:TIME:TIME
00:00:00:000

Avail Height Width Window

Worm Control

MOVIE

Coordinates

Message Window

Network_

Capture the Flag: Cyber Battlefield

blackoctopuscartoons.com

Capture the Flag:
Cyber Battlefield