### Author Topic: PolyJS  (Read 354 times)

0 Members and 1 Guest are viewing this topic.

#### _iPhoenix_

• Super User
• Join Date: Mar 2017
• Location:
• Posts: 639
• Post Rating Ratio: +15/-1
• █████ ▼ ♪ Best music ♫
• Gender:
##### Re: PolyJS
« on: May 25, 2018, 07:04:09 am »
I forgot to post my demos! I think this deserves a double post, because they are cool

Here's  a demo. The shapes do not have to be triangles!

Code: [Select]
`var pJS = new PolyJS(document.getElementById("canvas"));pJS.canvas.width = 240;pJS.canvas.height = 240;function createTriMesh(width, height, triWidth, triHeight, skewFactor) {  var index = -1,    horizTris = width / triWidth;  var skewX = () => (Math.floor(Math.random() * 2) - 1) * Math.floor((triWidth * Math.random()) / skewFactor),    skewY = () => (Math.floor(Math.random() * 2) - 1) * Math.floor((triHeight * Math.random()) / skewFactor)  for (var j = 0; j < height; j += triHeight) {    for (var i = 0; i < width; i += triWidth) {      var a = i / triWidth,        b = j / triHeight;      index++;      var points = [        [i + skewX(), j + triHeight + skewY()]      ];      if (i) {        points[0] = {          attached: [pJS.polygons[pJS.polygons.length - 1], 1]        };      }      if (j) {        points.push({          attached: [pJS.polygons[2 * ((b - 1) * horizTris + a)], 0]        });        points.push({          attached: [pJS.polygons[2 * ((b - 1) * horizTris + a) + 1], 1]        });      } else {        points.push([i, j]);        points.push([i + triWidth, j]);      }      var lastPolygon = new pJS.Polygon(points, color(), color());      new pJS.Polygon([{          attached: [lastPolygon, 2]        },        [i + triWidth + skewX(), j + triHeight + skewY()], {          attached: [lastPolygon, 0]        }      ], color(), color());    }  }  pJS.draw()}function color() {  return "#" + Math.floor(256 * Math.random()).toString(16).padStart(2, 0) + Math.floor(256 * Math.random()).toString(16).padStart(2, 0) + Math.floor(256 * Math.random()).toString(16).padStart(2, 0)}createTriMesh(240, 240, 30, 30, 2.5);`Please ignore the low code quality; that demo was made in less than 15 minutes without any planning... x.x

Here's a much more simple example that I posted in SAX/IRC about a week or two ago. It draws two triangles and alters them after a short delay, and it explains how it works better, too.
Code: [Select]
`//create a <canvas> element and add it to the page.var canvas = document.createElement("canvas");document.body.appendChild(canvas);//initialize a PolyJS object with the canvasvar pJS = new PolyJS(canvas);//create a Polygonvar shape1 = new pJS.Polygon([  [0, 0],  [0, 100],  [100, 0]], "black", "green", true);//create another Polygonvar shape2 = new pJS.Polygon([{    attached: [pJS.polygons[0], 1] //attached to the first point in the first Polygon created.  }, {    attached: [pJS.polygons[0], 2]  }, //attached to the 3rd point in the first Polygon created  [100, 50]], "black", "red", true);pJS.draw();//after a delay of 1/2 second, change two points in the first shape and redraw.setTimeout(x => {  var points = shape1.points;  shape1.setPoint(1, [0, 20]);  shape1.setPoint(2, [128, 32]);  pJS.draw(true);}, 500);`
• Calculators owned: A sentient TI-84+ CE, TI-85
• Consoles, mobile devices and vintage computers owned: TI-99/4a home computer
Please spam here: https://legend-of-iphoenix.github.io/spam/

"walruses are better than tuxedo chickens, all hail the great " ~ me

You can also use the following HTML or bulletin board code to share it on your page or forum signature!

Also do not forget to check our affiliates below.