Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Animated Spyro: Animation Contest Entry
ID	5500456605
Created	9 years ago, 1463270394354
Updated	7 years ago, 1532986205228
Code	/***************************************************** * ⭑ Rigged and Animated Spyro [Contest Winner] * * Spyro is one of my favorite video game characters. * * Spyro is a purple dragon that first appeared in * the Sony PlayStation 1 game, Spyro the Dragon, * back in 1998. * This version of Spyro is a close replica of * the mesh that was used in the original PS1 * series developed by Insomniac Games. * Before Insomniac make the ever popular * Ratchet and Clank series, * they developed the Spyro trilogy. * * Spyro games are fun to play and have * unique controls, humorous enemies, * and colorful imaginative worlds. * * * I chose Spyro because I wanted to rig * a 3D-ish low-polygon character with * lots of armature bones. * * It was a challenge and a lot of trial and error * to build the rig and to code the functions to * display the visuals. * * * [[NEW]]: Check out the seven different colors * of spyro as they cycle. * NOTE: Only his dark purple color is his * actual appearance from the game series. * * * Spyro fun facts: * • Stewart Copeland (from the Police music group) * did the soundtrack for the original Spyro trilogy * and for Spyro: Enter the Dragonfly. * * • Tom Kenny (the voiceover for * Spongebob from Spongebob Squarepants, * Dog from CatDog, * and Heffer Wolfe from Rocko's Modern Life) * did the voice of Spyro in Spyro 2: Ripto's Rage, * Spyro 3: Year of the Dragon, * and Spyro: Enter the Dragonfly. * * TODO: * • Work more on the current animation. * • Create a spline editor to create action channels * that work with this rig system. * * NOTE: This program does not use 3D/WebGL, it uses 2D. * * * Created by: KWC @MKaelin368 * Released: 5/14/16 * Last Updated: 7/30/18 * * If you have a question about this program or * related material, please ask. :-) * * Enjoy! ***************************************************/ var main = function () { // ￭ Pre-setup { // ▲ Define "no-operation" function { if (typeof this.noop !== "function") { this.noop = typeof this.draw === "function" ? this.draw : function () {}; } // } // ▲ Reset Processing members { this.main = this.noop; this.draw = this.noop; // } // ▲ Set output canvas size and main loop speed { this.size(this.width, this.height, this.PConstants.P2D); this.frameRate(60); // } // ▲ Hoist built-ins { var Object = this.Object, Array = this.Array, Math = this.Math; // } // } // ￭ Define initialize function { var init = function (pjs, output, debugging) { // ⬟ Confirm output drawing context definition { if (!output.context) { output.context = output.canvas.getContext("2d"); } // } // ⬟ Define top constants { /⬇ Size of the output canvas / var OUTPUT_WIDTH = pjs.width, OUTPUT_HEIGHT = pjs.height, /⬇ CSS colors constants / BLACK = "#000000", WHITE = "#FFFFFF"; // } // ⬟ Define built-in additions { // ▲ Define custom built-in class methods { pjs.noop.constructor.prototype .setMethod = function (k, fn) { /** This function is used to chain * calls to define class methods. / return this.prototype[k] = fn, this; }; // } // ▲ Define 2D drawing context additions { (function () { var THIRD_TAU = Math.PI 2 / 3, half_rad, C = 0.5522847498307933, c_x, c_y; Array.prototype.forEach.call(arguments, function (style) { output.context.constructor.prototype[ style + "Ellipse" ] = function (x, y, w, h) { this.beginPath(); if (w === h) { this.arc(x, y, w/2, 0, Math.PI2, !0); } else { w /= 2; h /= 2; c_x = C w; c_y = C * h; this.moveTo(x + w, y); this.bezierCurveTo( x + w, y - c_y, x + c_x, y - h, x, y - h); this.bezierCurveTo( x - c_x, y - h, x - w, y - c_y, x - w, y); this.bezierCurveTo( x - w, y + c_y, x - c_x, y + h, x, y + h); this.bezierCurveTo( x + c_x, y + h, x + w, y + c_y, x + w, y); } this[style](); this.closePath(); }; }); }) ("fill", "stroke"); // } // ▲ Define image smoothing disable function { (function () { /** NOTE: Because the name of the * "HTMLCanvasElement" drawing context property * "imageSmoothingEnabled" differs between * browsers, this approach is required to set * it to false without failure. * Certain properties get a vendor prefix * between browsers because of different * background OS processes. * This can be annoying to set when multiple * browsers might run the script. / var style = null, k = typeof output.context .mozImageSmoothingEnabled === "boolean" ? /* Mozilla Interface / "mozImageSmoothingEnabled" : typeof output.context .webkitImageSmoothingEnabled === "boolean" ? "webkitImageSmoothingEnabled" : typeof output.context .msImageSmoothingEnabled === "boolean" ? /* IE Interface / "msImageSmoothingEnabled" : /* 3rd Party Interface / "imageSmoothingEnabled"; output.context.constructor.prototype .disableImageSmoothing = function () { /* IMPORTANT: Do NOT set the output * canvas's drawing context property * "imageSmoothingEnabled" within * the main loop as it will be * discarded at the end of the * main loop's callback because * of "pushMatrix" and "popMatrix". * Also make sure to set it right * before the definition of the main loop * to ensure nothing else interfered. / this[k] = !1; style = this.canvas.style; style.setProperty("image-rendering", "pixelated", "important"); style.setProperty("image-rendering", "optimizeSpeed", "important"); style.setProperty("image-rendering", "-moz-crisp-edges", "important"); style.setProperty("image-rendering", "crisp-edges", "important"); style.setProperty("image-rendering", "-webkit-optimize-contrast", "important"); style.setProperty("image-rendering", "optimize-contrast", "important"); style.setProperty("-ms-interpolation-mode", "nearest-neighbor", "important"); style = null; }; })(); // } // } // ⬟ Define "construct()" { var construct = (function () { var obj = null; return function (ctor, args, target) { obj = Object.create(ctor.prototype); return (target \|\| ctor).apply(obj, args), obj; }; })(); // } // ⬟ Define classes { var Point = (function () { var origin = null, value, _resetTransform = function (pt) { pt.x = pt.originX; pt.y = pt.originY; pt.children.forEach(_resetTransform); }, _translateX = function (pt) { pt.x += value; pt.children.forEach(_translateX); }, _translateY = function (pt) { pt.y -= value; pt.children.forEach(_translateY); }, _scaleXY = function (pt) { pt.x = (pt.x - origin.x) value + origin.x; pt.y = (pt.y - origin.y) * value + origin.y; pt.children.forEach(_scaleXY); }, _scaleX = function (pt) { pt.x = (pt.x - origin.x) * value + origin.x; pt.children.forEach(_scaleX); }, _scaleY = function (pt) { pt.y = (pt.y - origin.y) * value + origin.y; pt.children.forEach(_scaleY); }, _rotateZ = (function () { var ang_1, ang_2, mag_x, mag_y; return function (pt) { ang_1 = Math.cos(value); ang_2 = Math.sin(value); mag_x = pt.x - origin.x; mag_y = pt.y - origin.y; pt.x = origin.x + mag_xang_1 - mag_yang_2; pt.y = origin.y + mag_xang_2 + mag_yang_1; pt.children.forEach(_rotateZ); }; })(); return (function (x, y) { this.parent = null; this.originX = x; this.originY = y; this.x = x; this.y = y; this.children = []; }) .setMethod("attachChild", function (pt) { pt.parent = this; this.children.push(pt); }) .setMethod("detachChild", function (pt) { var idx = this.children.indexOf(pt); if (idx >= 0) { pt.parent = null; this.children.splice(idx, 1); } }) .setMethod("resetTransform", function () { _resetTransform(this); }) .setMethod("translateX", function (org, val) { value = val; _translateX(this); }) .setMethod("translateY", function (org, val) { value = val; _translateY(this); }) .setMethod("rotateZ", function (org, val) { origin = org; value = val; _rotateZ(this); }) .setMethod("scaleXY", function (org, val) { origin = org; value = val; _scaleXY(this); }) .setMethod("scaleX", function (org, val) { origin = org; value = val; _scaleX(this); }) .setMethod("scaleY", function (org, val) { origin = org; value = val; _scaleY(this); }) .setMethod("toString", function () { return "[" + Math.round(this.x) + ", " + Math.round(this.y) + "]"; }); })(); var Model = (function () { var asc = pjs.loadFont("serif", 1).ascent, calcCentroid = (function () { var obj = Object.create(null), area = 0, cx = 0, cy = 0, a, i, j, l, p1, p2; return function (vtxs, arr) { area = cy = cx = 0; l = arr.length; for (i = l - 1, j = 0; j < l; i = j, j++) { p1 = vtxs[arr[i]]; p2 = vtxs[arr[j]]; a = p1.x * p2.y - p2.x * p1.y; cx += (p1.x + p2.x) * a; cy += (p1.y + p2.y) * a; area += a; } area = 3; obj.x = cx / area; obj.y = cy / area; p2 = p1 = null; return obj; }; })(), renderers = (function () { var style, faces, vtxs, vtx, pts, pt, list, x, y, n, l, pf = pjs.loadFont("monospace", 14), s = 1.25, s1 = 10, s2 = s1 1.5; return { wireframe: function (model, ctx) { ctx.strokeStyle = BLACK; ctx.lineWidth = 1; vtxs = model.mesh.vertices; ctx.beginPath(); model.mesh.edges.forEach(function (ele) { ele.forEach(function (arr) { vtx = vtxs[arr[0]]; x = vtx.x \| 0; y = vtx.y \| 0; arr[1].forEach(function (k) { vtx = vtxs[k]; ctx.moveTo(x, y); ctx.lineTo(vtx.x \| 0, vtx.y \| 0); }); }); }); ctx.stroke(); ctx.closePath(); vtxs = vtx = null; }, polygons: function (model, ctx) { ctx.strokeStyle = BLACK; ctx.lineWidth = 1; vtxs = model.mesh.vertices; faces = model.mesh.faces; style = model.fill_style; model.mesh.edges.forEach( function (ele, idx) { faces[idx].forEach(function (arr) { list = arr[1]; l = list.length; ctx.fillStyle = style[arr[2]]; ctx.beginPath(); vtx = vtxs[list[0]]; ctx.moveTo(vtx.x \| 0, vtx.y \| 0); n = 0; while (++n < l) { vtx = vtxs[list[n]]; ctx.lineTo(vtx.x \| 0, vtx.y \| 0); } ctx.fill(); ctx.closePath(); }); ele.forEach(function (arr) { ctx.beginPath(); vtx = vtxs[arr[0]]; x = vtx.x \| 0; y = vtx.y \| 0; arr[1].forEach(function (k) { vtx = vtxs[k]; ctx.moveTo(x, y); ctx.lineTo(vtx.x \| 0, vtx.y \| 0); }); ctx.stroke(); ctx.closePath(); }); }); vtxs = faces = vtx = list = style = null; }, unshaded: function (model, ctx) { ctx.strokeStyle = BLACK; ctx.lineWidth = 1; vtxs = model.mesh.vertices; style = model.fill_style; model.mesh.faces.forEach( function (arr) { arr.forEach(function (arr) { list = arr[1]; l = list.length; ctx.fillStyle = style[arr[2]]; ctx.beginPath(); vtx = vtxs[list[0]]; ctx.moveTo(vtx.x \| 0, vtx.y \| 0); n = 0; while (++n < l) { vtx = vtxs[list[n]]; ctx.lineTo(vtx.x \| 0, vtx.y \| 0); } ctx.fill(); ctx.closePath(); }); }); x = vtxs[94].x \| 0; y = vtxs[94].y \| 0; ctx.fillStyle = style.iris; ctx.fillEllipse(x - 1, y + 3, 6s, 19s); ctx.fillStyle = BLACK; ctx.fillEllipse(x - 1, y + 3, 3s, 15s); ctx.fillStyle = WHITE; ctx.fillEllipse(x - 2, y + 4, 3s, 7s); vtxs = vtx = list = style = null; }, armature_bones: function (model, ctx) {}, full_render: function (model, ctx) {}, point_ids: function (model, ctx) { ctx.font = pf.css; ctx.textAlign = "left"; pts = model.points; model.point_keys.forEach(function (k) { pt = pts[k]; x = pt.x \| 0; y = pt.y \| 0; ctx.fillStyle = pt.color; ctx.fillEllipse(x, y, 10, 10); ctx.fillStyle = BLACK; ctx.fillText(k, x + 3, Math.round(y - 6 + pf.ascent0.5)); }); pts = pt = null; }, vertex_ids: function (model, ctx) { ctx.font = s1 + "px serif"; ctx.textAlign = "center"; vtxs = model.mesh.vertices; model.mesh.vertex_keys .forEach(function (k) { vtx = vtxs[k]; x = vtx.x \| 0; y = vtx.y \| 0; ctx.fillStyle = BLACK; ctx.fillEllipse(x, y, s2, s2); ctx.fillStyle = "rgb(255, 194, 82)"; ctx.fillText(k, x, y + (s1asc0.5 \| 0)); }); vtxs = vtx = null; }, face_ids: function (model, ctx) { ctx.font = s1 + "px serif"; ctx.textAlign = "center"; vtxs = model.mesh.vertices; model.mesh.faces.forEach(function (ele) { ele.forEach(function (arr) { pt = calcCentroid(vtxs, arr[1]); x = pt.x; y = pt.y; ctx.fillStyle = BLACK; ctx.fillEllipse(x, y, s2, s2); ctx.fillStyle = "rgb(127, 255, 84)"; ctx.fillText(arr[0],x,y+(s1asc0.5 \| 0)); }); }); vtxs = list = pt = null; } }; })(), depth_colors = [ "rgb(85, 0, 255)", "rgb(0, 255, 242)", "rgb(0, 153, 255)", "rgb(0, 255, 17)", "rgb(255, 247, 0)", "rgb(255, 149, 0)", "rgb(255, 64, 0)", "rgb(255, 0, 166)", "rgb(183, 0, 255)" ], _bindMesh = function (mesh, points) { Object.keys(mesh.vertex_assignments) .forEach(function (k) { mesh.vertex_assignments[k].reduce( function (acc, n) { return acc.attachChild(mesh.vertices[n]), acc; }, points[k]); }); }, _unbindMesh = function (verts) { verts.forEach(function (vtx) { vtx.parent.detachChild(vtx); }); }; return (function (rig_data) { this.splines = rig_data.splines; this.actions = rig_data.actions; this._assemblePoints(rig_data.armature.points); this._assemblePointAncestry( rig_data.armature.point_ancestry ); this._assembleMeshes(rig_data.meshes); }) .setMethod("_assemblePoints", function (conf) { this.point_keys = Object.keys(conf); this.points = this.point_keys.reduce( function (acc, k) { acc[k] = construct(Point, conf[k]); return acc; }, Object.create(null)); }) .setMethod("_assemblePointAncestry", function (arr) { /* Parent points according to the * "point_ancestry" array connections and * assign colors to each point flaging * its depth in the inheritance tree. / var pts = this.points, pt = null, idx, n, l; arr.forEach(function (ele) { pt = pts[ele[0]]; idx = depth_colors.indexOf(pt.color); if (idx === -1) { idx = 0; } n = -1; l = ele.length - 1; while (++n < l) { pt = pts[ele[n]]; pt.color = depth_colors[idx++]; pt.attachChild(pts[ele[n + 1]]); } pts[ele[n]].color = depth_colors[idx]; }); }) .setMethod("_assembleMeshes", function (arr) { var vtxs = null; this.meshes = arr.reduce( function (acc, ele) { vtxs = []; ele.vertices.forEach(function (el, idx) { vtxs[idx] = construct(Point, el); }); return acc[ele.name] = { fill_styles: ele.fill_styles, vertices: vtxs, vertex_keys: Object.keys(vtxs), vertex_assignments: ele.vertex_assignments, faces: ele.faces, edges: ele.edge_connections }, acc; }, Object.create(null)); }) .setMethod("setMesh", function (k) { if (k in this.meshes) { if (this.mesh) { _unbindMesh(this.mesh.vertices); } _bindMesh(this.mesh=this.meshes[k],this.points); } }) .setMethod("setFillStyle", function (k) { if (k in this.mesh.fill_styles) { this.fill_style = this.mesh.fill_styles[k]; } }) .setMethod("render", function (ctx) { renderers[this.render_type](this, ctx); }) .setMethod("setRenderer", function (k) { if (k in renderers) { this.render_type = k; } }) .setMethod("setAction", function (k) { if (k in this.actions) { this.transformer_data = this.actions[k]; } }) .setMethod("setActionFrame", (function () { var pts, splns, pt, s; return function (idx) { pts = this.points; splns = this.splines; pts.base.resetTransform(); this.transformer_data.forEach( function (ele) { pt = pts[ele[0]]; s = splns[ele[2]]; pt[ele[1]](pt, s[idx % s.length] ele[3]); }); pts = splns = pt = s = null; }; })()); })(); // } // ⬟ Define Spyro rig configure objects { pjs.spyro_rig_config = { armature: { points: { /** point-id: [x, y] / "base": [338, 462], "anchor": [338, 277], "body": [373, 353], "neck-base": [388, 343], "mid-neck": [389, 311], "head": [371, 275], "jaw": [398, 258], "lip": [421, 263], "eye-R": [433, 224], "eye-brow-top-R": [425, 177], "eye-brow-bottom-R": [439, 200], "spine-hindge": [359, 363], "hip-hindge": [280, 359], "upper-front-leg-L": [384, 364], "lower-front-leg-L": [361, 404], "front-ankle-L": [372, 441], "front-foot-L": [383, 462], "upper-front-leg-R": [384, 364], "lower-front-leg-R": [361, 404], "front-ankle-R": [372, 441], "front-foot-R": [383, 462], "upper-back-leg-L": [251, 359], "lower-back-leg-L": [268, 407], "back-ankle-L": [248, 446], "back-foot-L": [263, 462], "upper-back-leg-R": [251, 359], "lower-back-leg-R": [268, 407], "back-ankle-R": [248, 446], "back-foot-R": [263, 462], "tail-base": [229, 372], "tail-tier-A": [174, 372], "tail-tier-B": [133, 372], "tail-tier-C": [99, 372], "wing-base-R": [350, 327], "wing-tier-A-R": [298, 284], "wing-tier-B-R": [283, 182], "wing-tier-C-R": [132, 157], "wing-tier-A-top-R": [305, 278], "wing-tier-B-top-R": [288, 175], "wing-flap-A-R": [223, 293], "wing-flap-B-R": [166, 234] },/* 41 points total / point_ancestry: [ /* [parent_id -> child_id -> ...] / ["base", "anchor", "body", "neck-base", "mid-neck", "head"], ["head", "jaw", "lip"], ["head", "eye-R"], ["head", "eye-brow-top-R"], ["head", "eye-brow-bottom-R"], ["body", "upper-front-leg-L", "lower-front-leg-L", "front-ankle-L", "front-foot-L"], ["body", "upper-front-leg-R", "lower-front-leg-R", "front-ankle-R", "front-foot-R"], ["body", "wing-base-R", "wing-tier-A-R", "wing-tier-B-R"], ["wing-tier-A-R", "wing-tier-A-top-R"], ["wing-tier-B-R", "wing-tier-B-top-R"], ["wing-tier-B-R", "wing-flap-A-R"], ["wing-tier-B-R", "wing-flap-B-R"], ["wing-tier-B-R", "wing-tier-C-R"], ["body", "spine-hindge", "hip-hindge"], ["hip-hindge","upper-back-leg-L", "lower-back-leg-L", "back-ankle-L", "back-foot-L"], ["hip-hindge","upper-back-leg-R", "lower-back-leg-R", "back-ankle-R", "back-foot-R"], ["hip-hindge", "tail-base", "tail-tier-A", "tail-tier-B", "tail-tier-C"] ] }, meshes: [ { name: "1", fill_styles: { purple: { skin_1: "rgb(68, 60, 110)", skin_2: "rgb(71, 62, 115)", skin_3: "rgb(74, 65, 120)", skin_4: "rgb(83, 75, 133)", skin_5: "rgb(87, 77, 138)", skin_6: "rgb(89, 79, 140)", skin_7: "rgb(92, 81, 145)", skin_8: "rgb(96, 84, 150)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(240, 189, 43)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(214, 149, 88)", eye_ball: "rgb(237, 237, 237)", wing_1: "rgb(217, 142, 56)", wing_2: "rgb(240, 167, 57)", wing_flap_1: "rgb(158, 56, 38)", wing_flap_2: "rgb(161, 56, 37)", chest_1: "rgb(240, 208, 135)", iris: "rgb(66, 36, 150)" }, red: { skin_1: "rgb(115, 27, 17)", skin_2: "rgb(125, 29, 19)", skin_3: "rgb(128, 30, 21)", skin_4: "rgb(138, 32, 21)", skin_5: "rgb(145, 35, 23)", skin_6: "rgb(153, 35, 22)", skin_7: "rgb(158, 37, 24)", skin_8: "rgb(173, 43, 26)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(240, 174, 43)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(209, 106, 54)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(217, 147, 56)", wing_2: "rgb(240, 173, 57)", wing_flap_1: "rgb(34, 89, 143)", wing_flap_2: "rgb(35, 90, 148)", chest_1: "rgb(240, 208, 135)", iris: "rgb(207, 45, 8)" }, green: { skin_1: "rgb(37, 115, 17)", skin_2: "rgb(45, 125, 20)", skin_3: "rgb(50, 128, 22)", skin_4: "rgb(61, 138, 22)", skin_5: "rgb(63, 143, 23)", skin_6: "rgb(66, 153, 23)", skin_7: "rgb(67, 156, 25)", skin_8: "rgb(80, 166, 43)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(37, 111, 222)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(43, 127, 196)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(45, 148, 204)", wing_2: "rgb(62, 120, 207)", wing_flap_1: "rgb(173, 146, 14)", wing_flap_2: "rgb(173, 150, 17)", chest_1: "rgb(240, 208, 135)", iris: "rgb(8, 91, 207)" }, yellow: { skin_1: "rgb(140, 122, 3)", skin_2: "rgb(161, 140, 3)", skin_3: "rgb(171, 149, 3)", skin_4: "rgb(181, 158, 6)", skin_5: "rgb(189, 164, 4)", skin_6: "rgb(199, 173, 4)", skin_7: "rgb(209, 181, 2)", skin_8: "rgb(217, 189, 4)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(167, 37, 222)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(170, 72, 194)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(163, 56, 217)", wing_2: "rgb(176, 71, 217)", wing_flap_1: "rgb(62, 153, 20)", wing_flap_2: "rgb(43, 156, 25)", chest_1: "rgb(240, 208, 135)", iris: "rgb(187, 8, 207)" }, blue: { skin_1: "rgb(17, 45, 115)", skin_2: "rgb(20, 62, 125)", skin_3: "rgb(23, 72, 128)", skin_4: "rgb(22, 61, 138)", skin_5: "rgb(24, 70, 143)", skin_6: "rgb(26, 72, 153)", skin_7: "rgb(26, 74, 156)", skin_8: "rgb(27, 75, 171)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(78, 201, 56)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(116, 199, 34)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(85, 181, 47)", wing_2: "rgb(114, 212, 68)", wing_flap_1: "rgb(22, 146, 153)", wing_flap_2: "rgb(26, 156, 150)", chest_1: "rgb(240, 208, 135)", iris: "rgb(8, 177, 207)" }, pink: { skin_1: "rgb(112, 25, 99)", skin_2: "rgb(120, 24, 106)", skin_3: "rgb(128, 28, 113)", skin_4: "rgb(135, 30, 119)", skin_5: "rgb(143, 31, 128)", skin_6: "rgb(150, 35, 135)", skin_7: "rgb(156, 36, 138)", skin_8: "rgb(168, 37, 148)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(118, 55, 212)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(107, 68, 184)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(153, 56, 217)", wing_2: "rgb(127, 63, 204)", wing_flap_1: "rgb(148, 22, 49)", wing_flap_2: "rgb(156, 26, 59)", chest_1: "rgb(240, 208, 135)", iris: "rgb(207, 8, 171)" }, black: { skin_1: "rgb(36, 7, 7)", skin_2: "rgb(38, 8, 8)", skin_3: "rgb(43, 8, 8)", skin_4: "rgb(46, 9, 9)", skin_5: "rgb(48, 9, 9)", skin_6: "rgb(51, 10, 10)", skin_7: "rgb(56, 11, 11)", skin_8: "rgb(61, 12, 12)", belly_1: "rgb(150, 135, 88)", jazz_1: "rgb(217, 55, 37)", horn_1: "rgb(184, 121, 57)", horn_2: "rgb(191, 124, 57)", horn_3: "rgb(196, 131, 75)", tail_tip: "rgb(194, 68, 54)", eye_ball: "rgb(242, 242, 242)", wing_1: "rgb(196, 42, 37)", wing_2: "rgb(201, 60, 50)", wing_flap_1: "rgb(156, 70, 26)", wing_flap_2: "rgb(158, 70, 25)", chest_1: "rgb(240, 208, 135)", iris: "rgb(207, 8, 8)" } }, vertices: [ /* [x, y] // vertex_id / /* back leg L / [283, 413], // 0 [248, 425], // 1 [259, 446], // 2 [235, 447], // 3 [224, 463], // 4 [262, 463], // 5 [302, 463], // 6 /* front leg L / [347, 391], // 7 [375, 419], // 8 [359, 446], // 9 [375, 443], // 10 [355, 463], // 11 [383, 463], // 12 [415, 463], // 13 /* body / [228, 397], // 14 [228, 387], // 15 [228, 333], // 16 [252, 323], // 17 [278, 319], // 18 [280, 358], // 19 [307, 395], // 20 [289, 406], // 21 [373, 410], // 22 [347, 396], // 23 [359, 363], // 24 [342, 329], // 25 [358, 325], // 26 [384, 348], // 27 [415, 377], // 28 [415, 315], // 29 [389, 311], // 30 [364, 308], // 31 [392, 275], // 32 /* tail / [174, 354], // 33 [174, 388], // 34 [133, 361], // 35 [133, 384], // 36 [99, 365], // 37 [99, 378], // 38 [69, 367], // 39 [69, 375], // 40 [52, 354], // 41 [52, 375], // 42 [25, 372], // 43 /* head / [371, 275], // 44 [347, 253], // 45 [340, 248], // 46 [310, 275], // 47 [319, 223], // 48 [334, 221], // 49 [291, 211], // 50 [339, 172], // 51 [347, 185], // 52 [347, 199], // 53 [332, 147], // 54 [378, 150], // 55 [383, 170], // 56 [383, 183], // 57 [380, 118], // 58 [406, 154], // 59 [428, 186], // 60 [420, 194], // 61 [426, 153], // 62 [436, 127], // 63 [451, 153], // 64 [433, 233], // 65 [423, 235], // 66 [473, 231], // 67 [471, 237], // 68 [456, 266], // 69 [451, 265], // 70 [461, 239], // 71 [407, 242], // 72 [404, 235], // 73 [385, 237], // 74 [378, 253], // 75 [396, 259], // 76 [392, 275], // 77 [421, 265], // 78 [417, 275], // 79 [437, 267], // 80 /* horn R / [365, 188], // 81 [366, 176], // 82 [326, 155], // 83 [309, 166], // 84 [313, 113], // 85 [302, 125], // 86 [274, 88], // 87 /* eye R / [435, 233], // 88 [436, 214], // 89 [428, 199], // 90 [423, 211], // 91 [423, 229], // 92 [429, 233], // 93 [433, 220], // 94 /* nostral R / [463, 226], // 95 [468, 235], // 96 [461, 237], // 97 /* lower eye brow R / [435, 205], // 98 [441, 195], // 99 [425, 190], // 100 [430, 180], // 101 /* higher eye brow R / [421, 172], // 102 [406, 226], // 103 /* back leg R / [283, 402], // 104 [248, 414], // 105 [259, 442], // 106 [235, 443], // 107 [224, 463], // 108 [262, 463], // 109 [302, 463], // 110 /* front leg R / [347, 391], // 111 [375, 419], // 112 [359, 446], // 113 [375, 443], // 114 [355, 463], // 115 [383, 463], // 116 [415, 463], // 117 /* wing R / [305, 279], // 118 // hidden under 119 [305, 279], // 119 [288, 291], // 120 [222, 294], // 121 [288, 177], // 122 // hidden under 123 [288, 177], // 123 [277, 188], // 124 [166, 235], // 125 [133, 158] // 126 ], vertex_assignments: { /* point id, [mesh vertices...] / /* back-leg-L / "upper-back-leg-L": [0, 1], "lower-back-leg-L": [2, 3], "back-ankle-L": [4, 5], "back-foot-L": [6], /* front-leg-L / "upper-front-leg-L": [7, 8], "lower-front-leg-L": [9, 10], "front-ankle-L": [11, 12], "front-foot-L": [13], /* body / "hip-hindge": [14, 15, 16, 17, 18], "spine-hindge": [19, 20, 21], "body": [22, 23, 24, 25, 26, 27, 28], "neck-base": [29, 30, 31], "mid-neck": [44], /* tail / "tail-base": [33, 34], "tail-tier-A": [35, 36], "tail-tier-B": [37, 38], "tail-tier-C": [39, 40, 41, 42, 43], /* head / "head": [32, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 81, 82, 83, 84, 85, 86, 87, // horn-R 95, 96, 97, // nostral-R 103 // eye-brow-top-R ], "jaw": [77, 78, 79], "lip": [80], /* eye-R / "eye-R": [88, 89, 90, 91, 92, 93, 94], /* lower-eye-brow-R / "eye-brow-bottom-R": [98, 99, 100, 101], /* eye-brow-top-R / "eye-brow-top-R": [102], /* back-leg-R / "upper-back-leg-R": [104, 105], "lower-back-leg-R": [106, 107], "back-ankle-R": [108, 109], "back-foot-R": [110], /* front-leg-R / "upper-front-leg-R": [111, 112], "lower-front-leg-R": [113, 114], "front-ankle-R": [115, 116], "front-foot-R": [117], /* wing-R / "wing-tier-A-top-R": [118], "wing-base-R": [119, 120], "wing-tier-B-top-R": [121, 123], "wing-tier-B-R": [122], "wing-flap-A-R": [124], "wing-flap-B-R": [125], "wing-tier-C-R": [126] }, faces: [ /* [[face id, [vertices], color key], ...], / /* back-leg-L / [[0, [2, 5, 6], "skin_2"], [1, [2, 5, 3], "skin_2"], [2, [3, 5, 4], "skin_2"], [3, [1, 2, 3], "skin_2"], [4, [0, 1, 2], "skin_2"], [5, [0, 21, 2], "skin_1"], [6, [1, 14, 0], "skin_1"], [7, [0, 20, 21], "belly_1"], [8, [0, 20, 14], "skin_1"]], /* front-leg-L / [[9, [10, 12, 13], "skin_2"], [10, [9, 10, 12], "skin_2"], [11, [9, 11, 12], "skin_2"], [12, [7, 8, 10], "skin_2"], [13, [7, 9, 23], "skin_2"], [14, [7, 9, 10], "skin_2"], [15, [8, 22, 28], "skin_1"], [16, [7, 23, 24], "skin_1"], [17, [7, 8, 22], "skin_1"]], /* body / [[18, [16, 17, 19], "skin_8"], [19, [17, 18, 19], "skin_8"], [20, [18, 19, 24], "skin_8"], [21, [18, 24, 25], "skin_8"], [22, [19, 24, 23], "skin_1"], [23, [19, 20, 23], "skin_1"], [24, [20, 23, 22], "belly_1"], [25, [20, 21, 22], "belly_1"], [26, [22, 23, 24], "skin_1"], [27, [24, 25, 27], "skin_7"], [28, [25, 26, 27], "skin_7"], [29, [26, 30, 27], "skin_4"], [30, [26, 30, 31], "skin_4"], [31, [27, 28, 30], "skin_7"], [32, [22, 23, 24], "skin_1"], [33, [28, 29, 30], "chest_1"], [34, [29, 30, 32], "chest_1"], [35, [30, 32, 44], "chest_1"], /* These are faces that * connect the right legs. / [36, [14, 21, 105], "skin_2"], [37, [30, 31, 44], "skin_4"], [38, [31, 44, 45], "skin_4"], [39, [31, 45, 46], "skin_4"], [40, [32, 44, 77], "skin_1"], [41, [22, 28, 112], "skin_1"], [42, [22, 24, 111], "skin_1"], [43, [14, 15, 105], "skin_8"], [44, [15, 16, 105], "skin_8"], [45, [19, 20, 104], "skin_1"], [46, [20, 21, 104], "skin_1"], [47, [21, 104, 106], "skin_1"]], /* tail / [[48, [14, 15, 34], "belly_1"], [49, [15, 16, 33], "skin_6"], [50, [15, 33, 34], "skin_6"], [51, [33, 34, 35], "skin_5"], [52, [34, 35, 36], "skin_5"], [53, [35, 36, 37], "skin_4"], [54, [36, 37, 38], "skin_4"], [55, [37, 38, 39], "skin_4"], [56, [38, 39, 40], "skin_4"], [57, [39, 40, 41], "tail_tip"], [58, [40, 41, 42], "tail_tip"], [59, [41, 42, 43], "tail_tip"]], /* head / [[60, [45, 46, 49], "skin_3"], [61, [45, 49, 53], "skin_3"], [62, [49, 52, 53], "skin_6"], [63, [52, 53, 57], "skin_8"], [64, [52, 56, 57], "skin_8"], [65, [56, 57, 61], "skin_8"], [66, [56, 60, 61], "skin_8"], [67, [60, 61, 65], "skin_6"], [68, [61, 65, 66], "skin_6"], [69, [45, 53, 74], "skin_4"], [70, [53, 57, 74], "skin_4"], [71, [57, 61, 74], "skin_4"], [72, [61, 73, 74], "skin_4"], [73, [61, 66, 73], "skin_4"], [74, [65, 66, 71], "skin_8"], [75, [65, 67, 71], "skin_8"], [76, [67, 68, 71], "skin_3"], [77, [68, 69, 71], "skin_3"], [78, [69, 70, 71], "skin_3"], [79, [66, 71, 72], "skin_6"], [80, [66, 72, 73], "skin_6"], [81, [70, 71, 72], "skin_3"], [82, [70, 72, 76], "skin_3"], [83, [73, 72, 75], "skin_6"], [84, [73, 74, 75], "skin_6"], [85, [45, 74, 75], "skin_6"], [86, [44, 45, 75], "skin_3"], [87, [72, 75, 76], "skin_3"], [88, [44, 75, 77], "skin_3"], [89, [75, 76, 77], "skin_3"], [90, [76, 77, 79], "skin_2"], [91, [76, 78, 79], "skin_2"], [92, [78, 79, 80], "skin_1"]], /* jazz / [[93, [46, 48, 49], "jazz_1"], [94, [46, 48, 47], "jazz_1"], [95, [48, 49, 52], "jazz_1"], [96, [48, 51, 52], "jazz_1"], [97, [48, 50, 51], "jazz_1"], [98, [51, 52, 56], "jazz_1"], [99, [51, 55, 56], "jazz_1"], [100, [51, 54, 55], "jazz_1"], [101, [55, 56, 59], "jazz_1"], [102, [56, 59, 60], "jazz_1"], [103, [55, 58, 59], "jazz_1"], [104, [59, 62, 60], "jazz_1"], [105, [62, 64, 60], "jazz_1"], [106, [62, 63, 64], "jazz_1"]], /* horn-R / [[107, [81, 82, 83], "horn_3"], [108, [53, 81, 84], "horn_1"], [109, [81, 83, 84], "horn_1"], [110, [83, 84, 86], "horn_2"], [111, [83, 85, 86], "horn_2"], [112, [85, 86, 87], "horn_3"]], /* eye-R / [[113, [88, 89, 94], "eye_ball"], [114, [89, 90, 94], "eye_ball"], [115, [90, 91, 94], "eye_ball"], [116, [91, 92, 94], "eye_ball"], [117, [92, 93, 94], "eye_ball"], [118, [93, 88, 94], "eye_ball"]], /* nostral-R / [[119, [95, 96, 97], "skin_8"]], /* lower-eye-brow-R / [[120, [98, 99, 100], "skin_4"], [121, [99, 100, 101], "skin_4"]], /* upper-eye-brow-R / [[122, [101, 102, 103], "skin_7"]], /* back-leg-R / [[123, [16, 19, 105], "skin_8"], [124, [19, 104, 105], "skin_8"], [125, [104, 105, 106], "skin_5"], [126, [105, 106, 107], "skin_5"], [127, [107, 109, 108], "skin_4"], [128, [107, 106, 109], "skin_4"], [129, [106, 109, 110], "skin_4"], // for front-leg-R [130, [22, 28, 112], "skin_1"], /// for front-leg-R [131, [22, 24, 111], "skin_1"], /// for front-leg-R [132, [111, 24, 27], "skin_8"]], /* front-leg-R / [[133, [111, 112, 27], "skin_8"], [134, [112, 27, 28], "skin_8"], [135, [111, 112, 114], "skin_5"], [136, [111, 114, 113], "skin_5"], [137, [113, 115, 116], "skin_4"], [138, [113, 114, 116], "skin_4"], [139, [114, 116, 117], "skin_4"]], /* wing_R / [[140, [25, 26, 119], "wing_2"], [141, [25, 119, 120], "wing_2"], [142, [119, 120, 124], "wing_2"], [143, [119, 123, 124], "wing_2"], [144, [123, 124, 126], "wing_2"], [145, [26, 118, 119], "wing_1"], [146, [118, 119, 122], "wing_1"], [147, [119, 122, 123], "wing_1"], [148, [122, 123, 126], "wing_1"], [149, [25, 120, 121], "wing_flap_1"], [150, [120, 121, 124], "wing_flap_2"], [151, [121, 124, 125], "wing_flap_1"], [152, [124, 125, 126], "wing_flap_2"]] ], edge_connections: [ /* [vertex id ->, [other vertex ids]] / /* back-leg-L / [[0, [1, 2, 14, 20, 21]], [1, [2, 3, 14]], [2, [3, 5, 6, 21]], [3, [4, 5]], [4, [5]], [5, [6]], [20, [21]]], /* front-leg-L / [[7, [8, 9, 10, 23, 24]], [8, [10, 22, 28]], [9, [10, 11, 12, 23]], [10, [12, 13]], [11, [12]], [12, [13]], [22, [28]], [23, [24]]], /* body / [[14, [15, 105]], [15, [16, 105]], [16, [17, 19]], [17, [18, 19]], [18, [19, 24, 25]], [19, [20, 23, 24]], [20, [21, 22, 23, 104]], [21, [22, 104, 106]], [22, [23, 24, 111, 112]], [23, [24]], [24, [25, 27, 111]], [25, [26, 27]], [26, [27, 30, 31]], [27, [28, 30, 111, 112]], [28, [29, 30]], [29, [30, 32]], [30, [31, 32, 44]], [31, [44, 45, 46]], [32, [44, 77]], [44, [77]]], /* tail / [[14, [15, 34]], [15, [16, 33, 34]], [16, [33]], [33, [34, 35]], [34, [35, 36]], [35, [36, 37]], [36, [37, 38]], [37, [38, 39]], [38, [39, 40]], [39, [40, 41]], [40, [41, 42]], [41, [42, 43]], [42, [43]]], /* head / [[44, [45, 75, 77]], [45, [46, 49, 53, 74, 75]], [49, [53]], [52, [53, 57]], [53, [57, 74]], [56, [57, 61]], [57, [61, 74]], [60, [61, 65]], [61, [65, 66, 73, 74]], [65, [66, 67, 71]], [66, [71, 72, 73]], [67, [68, 71]], [68, [69]], [69, [70, 71]], [70, [71, 72, 76]], [71, [72]], [72, [73, 75, 76]], [73, [74, 75]], [74, [75]], [75, [76, 77]], [76, [77, 78, 79]], [77, [79]], [78, [79, 80]], [79, [80]]], /* jazz / [[46, [47, 48, 49]], [47, [48]], [48, [49, 50, 51, 52]], [49, [52]], [50, [51]], [51, [52, 54, 55, 56]], [52, [56]], [54, [55]], [55, [56, 58, 59]], [56, [59, 60]], [58, [59]], [59, [60, 62]], [60, [62, 64]], [62, [63, 64]], [63, [64]]], /* horn-R / [[53, [81, 84]], [81, [82, 83, 84]], [82, [83]], [83, [84, 85, 86]], [84, [86]], [85, [86, 87]], [86, [87]]], /* eye-R / [[88, [89, 93, 94]], [89, [90, 94]], [90, [91, 94]], [91, [92, 94]], [92, [93, 94]], [93, [94]]], /* nostral-R / [[95, [96, 97]], [96, [97]]], /* lower-eye-brow-R / [[98, [99, 100]], [99, [100, 101]], [100, [101]]], /* upper-eye-brow-R / [[101, [102, 103]], [102, [103]]], /* back-leg-R / [[16, [19, 105]], [19, [104, 105]], [22, [28, 112]], // for front-leg-R [28, [112]], // for front-leg-R [104, [105, 106]], [105, [106, 107]], [106, [107, 109, 110]], [107, [108, 109]], [108, [109]], [109, [110]], [24, [27, 111]]], // for front-leg-R /* front-leg-R / [[27, [28, 111, 112]], [111, [112, 113, 114]], [112, [28, 114]], [113, [114, 115, 116]], [114, [116, 117]], [115, [116]], [116, [117]]], /* wing-R / [[25, [119, 120, 121]], [26, [118, 119]], [118, [119, 122, 123]], [119, [120, 123, 124]], [120, [121, 124]], [121, [124, 125]], [122, [124, 126]], [123, [124, 126]], [124, [125, 126]], [125, [126]]] ] } ], actions: { walking: [ /* [point, transform, spline, influence] / ["anchor", "translateX", 4, 0.2], ["anchor", "translateY", 4, 0.2], ["neck-base", "rotateZ", 2, 0.0017], ["neck-base", "rotateZ", 0, 0.8], ["mid-neck", "rotateZ", 2, -0.0017], ["mid-neck", "rotateZ", 0, 0.34], ["head", "rotateZ", 1, 0.017], ["head", "rotateZ", 0, -1.1], ["jaw", "rotateZ", 2, -0.0024], ["lip", "rotateZ", 2, 0.0084], ["eye-brow-top-R", "translateY", 2, -0.0845], ["eye-brow-bottom-R", "translateY", 2, -0.1445], ["spine-hindge", "rotateZ", 4, 0.002], ["hip-hindge", "rotateZ", 5, 0.0174], ["upper-front-leg-L", "rotateZ", 5, 0.0474], ["lower-front-leg-L", "rotateZ", 5, 0.0274], ["front-foot-L", "rotateZ", 5, 0.0174], ["upper-front-leg-R", "rotateZ", 7, 0.0174], ["lower-front-leg-R", "rotateZ", 7, 0.0174], ["front-foot-R", "rotateZ", 7, 0.0174], ["upper-back-leg-L", "rotateZ", 3, 0.0274], ["lower-back-leg-L", "rotateZ", 3, 0.0074], ["back-foot-L", "rotateZ", 3, 0.0174], ["upper-back-leg-R", "rotateZ", 6, 0.0324], ["lower-back-leg-R", "rotateZ", 6, 0.0074], ["back-foot-R", "rotateZ", 6, 0.0174], ["wing-base-R", "rotateZ", 4, 0.00845], ["wing-tier-A-R", "rotateZ", 5, -0.0014], ["wing-tier-B-R", "rotateZ", 4, 0.0084], ["tail-base", "rotateZ", 4, 0.0174], ["tail-tier-A", "rotateZ", 5, 0.0174], ["tail-tier-B", "rotateZ", 5, -0.0274], ["tail-tier-C", "rotateZ", 5, -0.0274] ] }, splines: [ /* TODO: Add generator to build splines. / [ 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1 ], // 0 [ 0,-0.20,-0.72,-1.48,-2.40,-3.38,-4.32,-5.14, -5.76,-6.07,-6.00,-5.55,-5.10,-4.66,-4.22, -3.80,-3.38,-2.98,-2.59,-2.22,-1.88,-1.55, -1.25,-0.97,-0.73,-0.52,-0.34,-0.19,-0.09, -0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0 ], // 1 [ 0,-2.25,-4.44,-6.47,-8.22,-9.60,-10.50, -10.82,-10.44,-9.28,-7.22,-4.16,0,5.92, 12.36,18.84,24.89,30.02,33.75,35.61,35.11, 31.78,25.14,14.70,0,-2.25,-4.44,-6.47, -8.22,-9.60,-10.50,-10.82,-10.44,-9.28, -7.22,-4.16,0,5.92,12.36,18.84,24.89,30.02, 33.75,35.61,35.11,31.78,25.14,14.70 ], // 2 [ 0,5.92,12.36,18.84,24.89,30.02,33.75,35.61, 35.11,31.78,25.14,14.70,0,-2.25,-4.44,-6.47, -8.22,-9.60,-10.50,-10.82,-10.44,-9.28,-7.22, -4.16,0,5.92,12.36,18.84,24.89,30.02,33.75, 35.61,35.11,31.78,25.14,14.70,0,-2.25,-4.44, -6.47,-8.22,-9.60,-10.50,-10.82,-10.44,-9.28, -7.22,-4.16 ], // 3 [ 0,-2.18,-4.17,-5.91,-7.33,-8.39,-9.00,-9.11, -8.67,-7.59,-5.83,-3.32,0,4.91,8.68,11.39,13.11, 13.91,13.88,13.06,11.56,9.42,6.74,3.57,0,-2.18, -4.17,-5.91,-7.33,-8.39,-9.00,-9.11,-8.67,-7.59, -5.83,-3.32,0,4.91,8.68,11.39,13.11,13.91,13.88, 13.06,11.56,9.42,6.74,3.57 ], // 4 [ 0,4.91,8.68,11.39,13.11,13.91,13.88,13.06,11.56, 9.42,6.74,3.57,0,-2.18,-4.17,-5.91,-7.33,-8.39, -9.00,-9.11,-8.67,-7.59,-5.83,-3.32,0,4.91,8.68, 11.39,13.11,13.91,13.88,13.06,11.56,9.42,6.74, 3.57,0,-2.18,-4.17,-5.91,-7.33,-8.39,-9.00, -9.11,-8.67,-7.59,-5.83,-3.32 ], // 5 [ -10.50,-10.82,-10.44,-9.28,-7.22,-4.16,0,5.92, 12.36,18.84,24.89,30.02,33.75,35.61,35.11,31.78, 25.14,14.70,0,-2.25,-4.44,-6.47,-8.22,-9.60, -10.50,-10.82,-10.44,-9.28,-7.22,-4.16,0,5.92, 12.36,18.84,24.89,30.02,33.75,35.61,35.11,31.78, 25.14,14.70,0,-2.25,-4.44,-6.47,-8.22,-9.60 ], // 6 [ 30.02,33.75,35.61,35.11,31.78,25.14,14.70,0,-2.25, -4.44,-6.47,-8.22,-9.60,-10.50,-10.82,-10.44, -9.28,-7.22,-4.16,0,5.92,12.36,18.84,24.89,30.02, 33.75,35.61,35.11,31.78,25.14,14.70,0,-2.25,-4.44, -6.47,-8.22,-9.60,-10.50,-10.82,-10.44,-9.28, -7.22,-4.16,0,5.92,12.36,18.84,24.89 ] // 7 ] }; // } // ⬟ Construct Spyro rig { var spyro_rig = Object.create(Model.prototype); Model.call(spyro_rig, pjs.spyro_rig_config); //} // ⬟ Set Spyro's rig initial settings { var render_mode = 0, render_modes = [ //"point_ids", // Uncomment this to see matrix ids. //"vertex_ids", // Uncomment this to see vertex ids. //"face_ids", // Uncomment this to see face ids. "wireframe", "polygons", "unshaded" ], mode_count = render_modes.length; spyro_rig.setMesh("1"); var fill_type = 0, fill_styles = Object.keys(spyro_rig.mesh.fill_styles), fill_style_count = fill_styles.length; spyro_rig.setFillStyle(fill_styles[fill_type]); spyro_rig.setRenderer(render_modes[render_mode]); spyro_rig.setAction("walking"); // } // ⬟ Disable output canvas anti-aliasing { /* NOTE: KA's function "noSmooth" * is unreliable to disable the output * canvas element's anti-aliasing. * I made a method to disable * anti-aliasing on any canvas drawing * context that it is called on. / output.context.disableImageSmoothing(); // } // ⬟ Define main loop callback { var ctx = output.context, bkgd_clr = "rgba(255,255,255,212)", scene_clr = "rgb(235,235,235)", fg, bg, time = 0, frame_count; ctx.lineWidth = 1; pjs.draw = function () { frame_count = pjs.frameCount; ctx.fillStyle = WHITE; ctx.fillRect(0, 0, OUTPUT_WIDTH, OUTPUT_HEIGHT); if (frame_count % 2 === 0) { spyro_rig.setActionFrame(time++); if (time % 96 === 0) { time = 0; spyro_rig.setRenderer( render_modes[++render_mode % mode_count] ); if (render_mode % mode_count === 0) { spyro_rig.setFillStyle( fill_styles[++fill_type % fill_style_count] ); } } } bg = (OUTPUT_WIDTH - frame_count4 % 800) \| 0; fg = (frame_count * 5 % OUTPUT_WIDTH) \| 0; ctx.strokeStyle = BLACK; ctx.fillStyle = scene_clr; ctx.beginPath(); ctx.rect(bg, 263, 200, 200); ctx.moveTo(bg, 263); ctx.lineTo(bg + 200, 263 + 200); ctx.fill(); ctx.stroke(); ctx.closePath(); spyro_rig.render(ctx); ctx.strokeStyle = BLACK; ctx.fillStyle = scene_clr; ctx.beginPath(); ctx.rect(-1 - fg, 463, OUTPUT_WIDTH + 2, 56); ctx.moveTo(-1 - fg, 464); ctx.lineTo(OUTPUT_WIDTH + 2 - fg, 519); ctx.rect( -1 - fg + OUTPUT_WIDTH, 463, OUTPUT_WIDTH + 2, 56); ctx.moveTo(-1 - fg + OUTPUT_WIDTH, 464); ctx.lineTo( OUTPUT_WIDTH + 2 - fg + OUTPUT_WIDTH, 519); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.fillStyle = BLACK; ctx.fillRect(0,0, OUTPUT_WIDTH, 80); ctx.fillRect(0, OUTPUT_HEIGHT, OUTPUT_WIDTH, -80); }; // } }; // } // ￭ Execute initialize function { try { init(this, this.externals, !1); } catch (err) { this._clearLogs(); throw { message: "Setup" + err }; } // } }; main();
Folds	67,93,96,101,102,111,112,232,233,242,246,250,251,254,255,258,259,263,264,267,268,271,272,283,285,292,293,296,297,303,304,306,307,310,311,314,315,319,320,324,325,329,330,334,335,338,343,364,365,518,519,529,530,538,539,543,545,553,554,561,563,585,586,603,604,611,612,616,617,619,620,624,625,629,630,644,652,695,696,727,733,755,756,778,779,801,802,824,825,847,848,870,871,893,895,1049,1050,1118,1119,1310,1311,1478,1519,1586,1591,1595,1596,1618,1619,1629,1630,1691,1696,1707
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBidnem-FAw
Votes	391
Spin-Offs	11
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4491333245","title":"Contest: Animate a rigged character","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	KWC
Author Name	MKaelin368
Author ID	kaid_1018232416454567422505063
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739289295734
Updated	6 months ago, 1739289295734
Source Deleted	unknown