WebTurtle docs

Installation guide:

To install WebTurtle you need to put this in your code:

<script src="http://89.159.202.47/WebTurtle/WebTurtle.js"></script>

Api:

Insert renderer:

To insert the renderer you can use this code:

WebTurtle.Renderer.Insert();
Inserts the Renderer in the body.

You could use this code to insert the renderer in another element:

WebTurtle.Renderer.Insert(<element>);

Resize the renderer:

WebTurtle.Renderer.SetSize(<width>, <height>);

Create an object (eg: Rectangle):

Rectangle = WebTurtle.Object.createObject(<Id>, <Type>, <Color>, <x>, <y>, <width>, <height>, <rotation-in-degrees>);

Add an object to the renderer:

WebTurtle.Object.addObject(<Object>);

Remove an object from the renderer:

WebTurtle.Object.removeObject(<Object-id>);

Render (Update) the scene:

WebTurtle.Renderer.Render();

Example:

We're going to build a simple example, we're going to
draw a rectangle and rotate it. Let's go !

Step 1: Create a div that contains the renderer

<!DOCTYPE html>
<html>
<head>
<title>
WebTurtle docs
</title>
</head>
<body>
<center>
<div id="content">
</div>
</center>
</body>
</html>

<script src="http://89.159.202.47/WebTurtle/WebTurtle.js"></script>
<script>
document.body.style.backgroundColor = "white";
var div = document.getElementById("content");
div.style.border = "3px solid black";
div.style.width = "fit-content";
div.style.height = "fit-content";
</script>



As you can see, this div is empty and centered.
Now we're going to insert and resize the renderer,
we're also going to create a rectangle and add it into the renderer.

Step 2: Insert the renderer and create a rectangle

<!DOCTYPE html>
<html>
<head>
<title>
WebTurtle docs
</title>
</head>
<body>
<center>
<div id="content">
</div>
</center>
</body>
</html>

<script src="http://89.159.202.47/WebTurtle/WebTurtle.js"></script>
<script>
document.body.style.backgroundColor = "white";
document.body.style.margin = "0px";
document.body.style.overflow = "hidden"
var div = document.getElementById("content");
div.style.border = "3px solid black";
div.style.width = "fit content";
div.style.height = "fit content";
WebTurtle.Renderer.Insert(div);
WebTurtle.Renderer.SetSize(window.innerWidth, window.innerHeight);

//The line below looks complex but it's not i'm just trying to place the Rectangle at the center of the renderer
var Rectangle = WebTurtle.Object.createObject("rectangle", "Rectangle", "black", (div.offsetWidth / 2.75), (div.offsetHeight / 4), (div.offsetHeight / 2), (div.offsetHeight / 2), 0);
WebTurtle.Object.addObject(Rectangle);

setInterval(function() {
WebTurtle.Renderer.Render();
}, 1);
</script>



As you can see, the renderer is now inserted and the rectangle is created.
Now we're going to make the rectangle rotate.

Step 3: Make the square rotate into the renderer

<!DOCTYPE html>
<html>
<head>
<title>
WebTurtle docs
</title>
</head>
<body>
<center>
<div id="content">
</div>
</center>
</body>
</html>

<script src="http://89.159.202.47/WebTurtle/WebTurtle.js"></script>
<script>
document.body.style.backgroundColor = "white";
document.body.style.margin = "0px";
document.body.style.overflow = "hidden"
var div = document.getElementById("content");
div.style.border = "3px solid black";
div.style.width = "fit content";
div.style.height = "fit content";
WebTurtle.Renderer.Insert(div);
WebTurtle.Renderer.SetSize(window.innerWidth, window.innerHeight);

//The line below looks complex but it's not i'm just trying to place the Rectangle at the center of the renderer
var Rectangle = WebTurtle.Object.createObject("rectangle", "Rectangle", "black", (div.offsetWidth / 2.75), (div.offsetHeight / 4), (div.offsetHeight / 2), (div.offsetHeight / 2), 0);
WebTurtle.Object.addObject(Rectangle);

setInterval(function() {
WebTurtle.Renderer.Render();
}, 1);
var rotation = 0;
setInterval(function() {
rotation += 1;
WebTurtle.Object.removeObject("rectangle");
var Rectangle = WebTurtle.Object.createObject("rectangle", "Rectangle", "black", (div.offsetWidth / 2.75), (div.offsetHeight / 4), (div.offsetHeight / 2), (div.offsetHeight / 2), rotation);
WebTurtle.Object.addObject(Rectangle);
}, 10);
</script>



As you can see, the rectangle is now rotating.
And it's how we made a rotating rectangle with WebTurtle.

By willmil11 -- 2022