Powerful and Lightweight Library to create using HTML5 Canvas
Home Page: https://raphamorim.io/origamijs/
License: GNU General Public License v3.0
HTML5 Canvas for Humans
Initially, it's a tool for teaching geometry, web, and javascript in schools. Currently, it's a powerful library to create using HTML5 Canvas.
Want to contribute? Follow these recommendations.
How about a XML-based language to draw with Origami API?
It's a very common pattern for representing a display list/UI, from SVG to MXML and now JSX.
Just played around with DOMParse:
http://www.es6fiddle.net/iju78rqa/
I'm using origami.js for create a sample game, and I need my sprite in animation loop.
I saw the source code and understand that your first condition is if the sprite stay outside of canvas and after if the loop is false.
function drawSprite(sprite) {
var self = this;
if (sprite.posX === sprite.widthTotal) {
if (sprite.loop === false) {
window.cancelAnimationFrame(sprite.animation);
return;
}
sprite.posX = 0;
}
...I think that logic is:
function drawSprite(sprite) {
var self = this;
if (sprite.loop === false) {
window.cancelAnimationFrame(sprite.animation);
return;
}
if (sprite.posX === sprite.widthTotal ) {
sprite.posX = 0;
}
...If I want create a true loop, where my sprite forever animate.
The origami.jsjust execue one time the animation and not work like a loop.
Example:
origami(canvas).chartLine({
tooltip: true
labels: ["January", "February", "March", "April", "May", "June", "July"],
fill: true,
datasets: [
{
data: [1, 9, 8, 71, 56, 30, 60],
line: "2px solid pink",
}]
})
Currently Phantomjs is no longer maintained. I was wondering if make sense to move to Puppeteer or other option to run origamijs tests.
Question: How to test canvas with animation?
Just to let you know, most header links on http://origamijs.com are not working. What is the status of Origami.js? It looks quite robust and I'd be interested in it's future plans.
Doesn't work well
.flip('horizontal')
.image('images/person.jpg', 0, 0, 200, 200)
.flipEnd()
.image('images/person.jpg', 0, 250, 200, 200)Doesn't work well
.flip('vertical')I think it's have some relationship with another issue #3
Support onMouseDown(event), onMouseDrag, onMouseUp
Related: #4
Today:
origami('#graphicalweb')
.Background()
.sprite(20, 40, {
src: 'images/red-charset-1.png',
speed: 100,
loop: true
}, 20, 20)What have to do:
origami('#graphicalweb')
.Background()
.sprite(20, 40, {
src: 'images/red-charset-1.png',
interval: 100,
loop: true
}, 20, 20)Why? This property doesn't represent sprite speed
currentContext = {
queue: new Array() // Array of things to draw, witch can be saved in a buffer or drew
...
}Hi, just looked at Origami again after getting to know Vue.js and I can see that they are both advocates of clean syntax and structure. Due to the newness of Vue2 there is somewhat of a void in Vue2 when it comes to graphic APIs.
Just an idea here, why not turn Origami into a integral API for Vue2? The audience for Origami would most certainly be greatly multiplied as would the number of contributing hands.
It runs the tests on all the supported browsers that the project intent to work with.
https://www.browserstack.com/pricing
Browserstack has Open Source plan, you would just need to contact them for info.
Congratulations for the project!
Is there an implementation of zoom using the mouse?
Is that dificult to code?
Thanks
Shape is a empty object which waits for instructions about how will draw it
.shape() // nothing happensStyle gets the last object and apply a style starting from a css class, example:
.class-example {
background: blue;
}.shape.style('.class-example');
// Now the empty shape has a blue backgroundOr
.arc(10, 30, 50).style('.class-example');
// Now the arc has a blue backgroundNote: Before draw any object must know if the next call is be a style method, cause this method will overide the previous setted styles
Dist license is different from package.json (GPL 3.0 which is the correct one)
Repro: https://codepen.io/atav32/pen/jOrPzPK?editors=1010
Trying to run the example code from the docs page:
var style = {
color: "#000",
font: "70px Helvetica",
align: "center",
border: "2px solid gold"
};
origami(".canvas")
.text("Nice!", 100, 100, style)
.text("Really Nice!", 150, 150, style);
origami.draw();But seeing a stacktrace:
Uncaught TypeError: Cannot read property 'ctx' of null
at Function.u.draw (origami.js:156)
at pen.js:13
Using https://cdnjs.cloudflare.com/ajax/libs/origamijs/0.5.0/origami.min.js
Hello @raphamorim ,
I am the member of cdnjs project.
We want to host this library.
But there is a question about the old version.
Because there is no v0.0.2 on npm, we need to add it on github manually.
But I couldn't find the main file in v0.0.2.
Please help me confirm that.
Thanks!
When drawing a rectagle, it works if border parameters are like this:
origami('#canvas')
.rect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight, {
background: 'lightblue',
border: '4px solid #999'
}).draw();
But if I swap them, such as:
origami('#canvas')
.rect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight, {
background: 'lightblue',
border: 'solid 4px #999'
}).draw();
The exception Uncaught TypeError: Failed to execute 'setLineDash' on 'CanvasRenderingContext2D': The 1st argument is neither an array, nor does it have indexed properties is thrown.
If you check branch bug/css_parameter_order in my fork there are unit tests describing this behaviour.
Hello
https://raphamorim.io/origamijsdocs
Where to find the documentation page?
Ref: https://www.html5rocks.com/en/tutorials/canvas/imagefilters/
Add a option to create Image filters, like:
origami('.canvas').image('images/origamijs.png', 10, 10, {filter: 'grayscale'})origami.createComponent('Header', function(octx, props) {
var style = {
color: '#000',
font: '70px Helvetica',
align: 'center',
border: '2px solid gold'
};
octx.text(props.text, 100, 100, style);
})
origami.Header({text: 'Nice!'});Today LineChart dataset doesn't work well with negative numbers
I'm thinking in create a similar method like draw(), but instead drawing in canvas it'll return the custom queue to SVG.
Something like:
origami('#canvas')
.rect(300,30,40,{
background: 'blue'
});
var svg = origami('#canvas').toSVG(); // return SVG element as string<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><defs/><g><path fill="none" stroke="none"/><rect fill="blue" stroke="none" x="300" y="30" width="40" height="40"/></g></svg>Ref: canvas2svg
origami('selector').chart({
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
});Current CSS -> Shape in Origami.js is a very heavy process. Personally I don't like anything about this cast. Is a really lazy method and very heavy. Doesn't worth, I think.
Maybe think in another option more ellegant like html2canvas.
It'll create a kind of "responsible canvas"
suggestion to work with multline
origami('#canvas').chartLine({
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
data: [65, 59, 80, 81, 56, 30, 60],
points: true,
pointsColor: "red",
line: "1px dashed #000",
},
{
data: [5, 159, 20, 31, 56, 30, 60],
points: true,
pointsColor: "red",
line: "1px dashed #000",
}
]
gridLines: {
vertical: false,
horizontal: false,
},
}).draw();Cases:
var style = {
border: "1px dotted #000",
}var style = {
borderSize: "1px",
borderColor: "blue",
borderStyle: "dashed" // default: solid
}References: Dashed Applications, Dotted Applications
The idea is mantain the same API of chartLine (with few differences), cause in Origamijs next release will be a unique API
Do you have features that allow users to click on any shapes defined?
e.g. hit region definition and events integration?
seishu('#demo-1')
.canvasBackground('#2A80B9')
.image('images/firefox.png', 100, 40, 100, 100)
.text("Mozilla", 160, 110, {
color: '#ECF0F1',
font: '30px Helvetica',
})
Because Origami is loading image, so he ignore loads and keep drawing
I'm getting the above error from try1.html (attached), line 105
105: origami('#canvas1')
.styles('.pacman')
.shape('.pacman')
.draw();
<style>
.pacman {
width: 100px;
height: 100px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-bottom: 60px solid red;
border-left: 60px solid red;
border-top-right-radius: 60px;
border-top-left-radius: 60px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 60px;
}
...
</style>
118: for (var i = 0; i < selectors.length; i++) {
119: var style = styleRuleValueFrom(selectors[i], (this.documentStyles[0] || []));
120: Origami.virtualStyles[selectors[i]] = style;
In cases like tsuru dashboard, he actually gets:
{
"max ": [
[1477493880000, 0.030500340632603404],
[1477493940000, 0.04075857819905213],
[1477494000000, 0.014717393483709273],
[1477494060000, 0.029667878787878785],
[1477494120000, 0.01438573566084788],
[1477494180000, 0.01365384223918575],
[1477494240000, 0.03254841309823678],
[1477494300000, 0.0275413],
[1477494360000, 0.07786407960199006],
[1477494420000, 0.016713316953316956],
[1477494480000, 0.014612100000000001],
[1477494540000, 0.03143121212121212],
[1477494600000, 0.016177874396135265],
[1477494660000, 0.016748715365239294],
[1477494720000, 0.02291617529880478],
[1477494780000, 0.012555072463768115],
[1477494840000, 0.014970251256281406],
[1477494900000, 0.014784186046511627],
[1477494960000, 0.015761853658536586],
[1477495020000, 0.01699513381995134],
[1477495080000, 0.030748264058679708],
[1477495140000, 0.015027630922693266],
[1477495200000, 0.027111720698254366],
[1477495260000, 0.011219402985074628],
[1477495320000, 0.02812541353383459],
[1477495380000, 0.0311629197080292],
[1477495440000, 0.02950381443298969],
[1477495500000, 0.01642673417721519],
[1477495560000, 0.017345648854961832],
[1477495620000, 0.01717910891089109],
],
avg: [
[1477493880000, 0.030500340632603404],
[1477493940000, 0.035934743644980616],
[1477494000000, 0.007358696741854636],
[1477494060000, 0.018660303030303027],
[1477494120000, 0.013888010687566798],
[1477494180000, 0.006826921119592875],
[1477494240000, 0.030645235960883095],
[1477494300000, 0.020882202162849875],
[1477494360000, 0.045783910125184554],
[1477494420000, 0.014818087048087049],
[1477494480000, 0.009202084615384616],
[1477494540000, 0.030941069719753928],
[1477494600000, 0.014575949543746646],
[1477494660000, 0.015212804284561395],
[1477494720000, 0.018559660130974872],
[1477494780000, 0.012527713447073931],
[1477494840000, 0.01123532663316583],
[1477494900000, 0.01265842297432905],
[1477494960000, 0.014770059482329517],
[1477495020000, 0.014380085801663327],
[1477495080000, 0.02340578251477675],
[1477495140000, 0.013467885813105426],
[1477495200000, 0.02130251071587535],
[1477495260000, 0.005609701492537314],
[1477495320000, 0.02575494080171335],
[1477495380000, 0.025785389325047346],
[1477495440000, 0.023237517606105235],
[1477495500000, 0.008213367088607594]
],
min: [
[1477493880000, 0.030500340632603404],
[1477493940000, 0.031110909090909092],
[1477494000000, 0],
[1477494060000, 0.013133333333333334],
[1477494120000, 0.013390285714285714],
[1477494180000, 0],
[1477494240000, 0.028742058823529412],
[1477494300000, 0.014223104325699745],
[1477494360000, 0.01370374064837905],
[1477494420000, 0.012922857142857142],
[1477494480000, 0],
[1477494540000, 0.03045092731829574],
[1477494600000, 0.012974024691358025],
[1477494660000, 0.013676893203883494],
[1477494720000, 0.014203144963144962],
[1477494780000, 0.012500354430379747],
[1477494840000, 0.007500402010050251],
[1477494900000, 0.009654710327455919],
[1477494960000, 0.013778265306122448],
[1477495020000, 0.011765037783375315],
[1477495080000, 0.016063300970873787],
[1477495140000, 0.011908140703517587],
[1477495200000, 0.015493300733496331],
[1477495260000, 0],
[1477495320000, 0.021027930174563593],
[1477495380000, 0.020407858942065493],
[1477495440000, 0.01697122077922078],
[1477495500000, 0],
[1477495560000, 0.013399605911330048],
[1477495620000, 0.016777959183673467],
[1477495680000, 0.013905074626865672],
[1477495740000, 0.013392780487804878],
[1477495800000, 0.01237432098765432],
[1477495860000, 0.013311209876543209],
[1477495920000, 0.012793801452784505],
[1477495980000, 0.01323367901234568],
[1477496040000, 0.016626943005181347],
[1477496100000, 0.013865210918114143],
[1477496160000, 0.014770025316455696],
[1477496220000, 0],
]
}What this actually means? It receives timestamp and data.set in [x,y]. Origamijs doesn't support this data type. The idea is check if is a timestamp and set automatically the labels (calculating variance)
Returning a line chart like:
Reference: http://jsfiddle.net/m1erickson/Cw4ZN/
When using the example in https://raphamorim.io/origamijs/docs/#examples "Line"
Iteration over data values doesn't work as intended, it requires a single array but the example is a dataset of multiple values.
I found that Pacman is not getting rendered on the safari browser.
On the above link, the pacman is visible on all browser except safari (On Macbook Pro)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.