SVG Avatar-In-A-Box

Get yours now while supplies last!
Get yours now while supplies last!

A revolutionary breakthrough in avatar technology, Avatar-In-A-Box allows you to study your Khan Academy avatar from the inside out simply by moving your mouse! Derived from 100% organic SVG. Some assembly required.

SVG Avatar-In-A-Box

“My life used to be kind of boring, but everything changed when I learned about Avatar-In-A-Box. It delivers a top-notch experience, and it’s even grown from sustainable, 100% organic SVG sources!”

Avatar-In-A-Box is truly the next revolutionary breakthrough in avatar technology. Now you can study your avatar from the inside out and obtain a full perspective of its structure simply by waving your mouse!

In each and every step of the manufacturing process, we consistently meet or exceed industry best practices. We source our SVG Avatars from trusted local sources such as the Khan Academy Avatar Picker, where they evolve and develop, free-range.

Harvested by hand using sustainable right-click practices.
Harvested by hand using sustainable right-click practices.

Each SVG Avatar is then minimally processed through the SVG to Processing.js Converter. This highly refined procedure turns all SVG <path> components to their corresponding Processing.js shape commands, i.e. beginShape(), vertex(), bezierVertex(), and endShape().

To enable our revolutionary avatar technology, we modified the beginShape() and endShape() functions. This allowed us to draw a thin rectangle around each layer and apply 2D transformations.

var currentShape = 0;

var BeginShape = function(){
    currentShape++;

    var distanceFromCenter = map(currentShape/numberOfShapes, 0, 1, -1, 1) + 0.01;

    pushMatrix();
        if(dancing){
            rotate(distanceFromCenter * 6 * sin(frameCount * 8));
        }
        translate(
            mouseDistance.x * distanceFromCenter,
            mouseDistance.y * distanceFromCenter
        );
        scale(0.4);
        pushStyle();
        noFill();
        strokeWeight(3);
        stroke(avatars[avatar][1]);
        rectMode(CENTER);
        rect(0, 0, 614, 614);
        popStyle();
        beginShape();
}, EndShape = function(){
        endShape();
    popMatrix();
};

Each layer is translated and scaled such that the layers are arranged in pseudo-3D perspective, which varies based on the position of the mouse. This gives your Avatar-In-A-Box a pseudo-3D flair.

You’ve probably noticed from the code above that a rotation is sometimes applied. This makes your avatar… dance?

We hope you take good care of your new Avatar-In-A-Box. 100% customer satisfaction guaranteed! If you aren’t satisfied with your new Avatar-In-A-Box, simply click or tap it and we’ll instantly beam you another one. Shipping and handling fees may apply.

Collect ‘Em All!

The Avatar-In-A-Box comes in 7 flavors:

  • Aqualine Tree
  • Aqualine Ultimate
  • Leafers Tree
  • Piceratops Ultimate
  • Duskpin Ultimate
  • Primosaur Ultimate
  • Starky Ultimate

Customers Love Their Avatar-In-A-Box

“This is impossibly good…”

“Its like a jelly box XD”

“Dancing is so funny.”

“Stop blowing my mind!”

“Can you deliver one to me?”

“Darn it! I’ve run out of words to say!”

“The dancing variable was a great idea. Adds a little humor to an already humorous idea.
If I were the boss of a large programming company, I would hire you. Just saying.”

“This is AWESOME!
At first I thought it was awesome when all the pieces of the avatar fly in at the beginning, but THEN I just happened to move my mouse across the screen.
AND you can click to use a different avatar?!
AND you can make them dance?
THIS IS SO AMAZING!”

See more testimonials in the Khan Academy Tips and Thanks.

All avatar images are owned by Khan Academy.

By | 2017-05-28T23:24:01+00:00 July 27th, 2016|0 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

Leave a Comment

avatar
2000

wpDiscuz
Go to Top