0

I am trying to build a surface with Famo.us that is shaped like a kite.

A kite is a quadrilateral whose four sides can be grouped into two pairs of equal-length sides that are adjacent to each other. I am looking to transform the rectangle of the shape of a surface into a kite shape. I can create parallelogram by skewX or skewY. A parallelogram also has two pairs of equal-length sides, but they are opposite each other rather than adjacent(like in a kite).

The surface is a div, and I want to change the shape from a surface from a square/rectangle into a kite. I trying to make a hex grid. I am surprised that a highly mathematical JavaScript Famo.us web platform does not have a Triangular surface. I like a Famo.us only solution, it possible.

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Anton Matosich
  • 3
  • 2
  • Now that it has been put on hold. I read deeper into your question and am wondering if you meant you wanted to go from a square to a kite shape using a transform. Did you mean it differently than I answered? – talves Mar 22 '15 at 16:04
  • Yes, I do want to transform a square/rectangle into a kite. – Anton Matosich Mar 23 '15 at 01:45
  • You will need to do it with a canvas. Famo.us can only transition what normal css tranfrorms can. – talves Mar 23 '15 at 01:53

1 Answers1

1

Your question is valid, but there is a caveat. A surface (div) of this shape requires us to create a two part style using after. Your use case may limit the use of this solution.

Without Famo.us: Using a div and css you can create a kite shape.

enter image description here

<div class="kite-css"></div>

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

Using Famo.us: Use some modified css from above and adding the class to the Famo.us surface. I added some background-color of the Surface to highlight the surface area that will be used for rendering size. I added some text in the content of the surface to show how text is affected by this method.

enter image description here
Issues:

  • The true center of the surface is the center of the shaded area in the image above. This is the element created by Famo.us and the lower piece is created by the style using after.
  • The usable content starts at the center of the top piece, because the border squeezes out all sides of the square. 
.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

  var kite = new Surface({ 
    size: [100, 100],
    classes: ['kite-shape','double-sided'],
    content: 'Famo.us Kite',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em'
    }
  });

Considerations:

  • You could put the kite shape inside your surface with your text content prior (example snippet #2)
  • You could also use the ImageSurface and make a kite image to be used by the surface.

Example code snippet below with a rotation effect, so you can play with it.

define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager'); 
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var kite = new Surface({ 
    classes: ['kite-shape','double-sided'],
    content: 'Famo.us Kite',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em'
    }
  });

  var tt = new TransitionableTransform();
  mainContext.add(new Modifier({
    size: [100, 100],
    origin:[0.5, 0.5],
    align:[0.5, 0.5],
    transform: rotate
  })).add(kite);


  var initialTime = Date.now();
  
  function rotate() {
    var radians = 0.001 * (Date.now() - initialTime);
    tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
    return tt.get();
  }
  
  });
require(['main']);
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div class="kite-css">CSS</div>

<style>
.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}
</style>

Example code snippet #2.

Has the kite shape inside a surface.

define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager'); 
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var kite = new Surface({ 
    size: [100, 300],
    classes: ['double-sided'],
    content: 'Famous Kite<div class="kite-css"></div>',
    properties: {
      backgroundColor: 'rgba(0,0,0,0.05)',
      fontSize: '0.9em',
      lineHeight: '12px'
    }
  });

  var tt = new TransitionableTransform();
  mainContext.add(new Modifier({
    size: [100, 100],
    origin:[0.5, 0.5],
    align:[0.5, 0.5],
    transform: rotate
  })).add(kite);

  var initialTime = Date.now();
  
  function rotate() {
    var radians = 0.001 * (Date.now() - initialTime);
    tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
    return tt.get();
  }
  
  });
require(['main']);
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div class="kite-css">CSS</div>

<style>
.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.kite-css {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
  position: relative;
}
.kite-css:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}

.kite-shape {
  border: 50px solid transparent;
  border-bottom: 50px solid red;
  top: -40px;
}
.kite-shape:after {
  content: '';
  position: absolute;
  left: -50px; 
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 90px solid red;
  z-index: -1
}
</style>
talves
  • 13,993
  • 5
  • 40
  • 63