soulwire / sketch.js Goto Github PK
View Code? Open in Web Editor NEWCross-Platform JavaScript Creative Coding Framework
License: MIT License
Cross-Platform JavaScript Creative Coding Framework
License: MIT License
i'm a beginner . i'm not able to follow your documentation
can you tell me how to vary the size of canvas?
As title
It is not a best pratice to pollute the window object with utility functions.
Let say I must support both your librairy and a other, older one, that re-creates the window.random
property. Eveythings breaks down.
Another thing is if you use a linter (like jshint) it will warn you that method x is not declared. This is annoying.
Thanks.
I recently ran into an issue where I was updating an array on resize that was attached to the main sketch object on setup. However, a resize event seems to always fire at least once before setup has occurred, so the array does not exist yet and throws an error. Is there any way to ensure that setup has run before running the resize function?
A reduced test case shows the errors via console: http://codepen.io/jackrugile/pen/5e60581d85a74dd996f8ddb9f53754d2
Could you add to Sketch.js the ability to automatically pause/resume the run loop on focus lost/gained?
It's useful when editing code with the sketch left open/viewable in the browser.
setup: function() {
window.addEventListener("focus", function(e) { demo.start(); }, false);
window.addEventListener("blur", function(e) { demo.stop(); }, false);
},
It seems that when setup is not a function the resize event is fired every loop.
Why?
Am I missing something?
Anyway, thanks for sketch!
Sketch looks like an ideal fast Canvas / WebGL solution but I'm just wondering how it might be possible to use SVG paths within Sketch?
What I mean by path is just a string as defined by SVG. My app uses SVG data paths to define its symbols. The symbol paths are then listed in a JSON file and deserialized into a JavaScript cache object. I would take care of this bit of code. This minimal pre-canvas usage of SVG is the only aspect of SVG my app is concerned with.
From here on the focus is on the canvas and I'm not sure if there is some facility in Sketch to take such a cached path and render it to the view? Here is how a path could be used:
path = new Path('M 100,100 h 50 v 50 h 50');
As another option the JSON file of symbol paths could also be converted into a structure that Sketch uses? As long as there is some way to then clone that structure and raster it to screen it would work. Also not sure if Sketch maintains any type of scenegraph of objects, which might make hit detection easier?
Pass a flag inside options to include common debugging libraries like these.
This should be accessible via Sketch.instances
Similar to the way mouse and touch events are normalised, this should be extended to other input methods (perhaps as plugins).
Will there be any baked in device pixel ratio support for retina displays? Or is it recommended to come up with our own solutions to bump the canvas up on retina devices?
Cheers.
It would be useful to have an isMobile flag for adjusting properties of a sketch.
Retrieving dimensions from the style declaration is unreliable
There are certain times when I am either forced or choose to use an existing canvas element. I'd love to use Sketch.js in these situations. If there was an option on creation to specify an existing canvas, that would rule. Something like:
Sketch.create({
element: document.getElementById('existing-canvas')
});
This might be a personal preference issue, or you might have performance reasons for using ctx.canvas.width = ctx.canvas.width
for clearing - Code Reference.
However, I always find myself resetting the clear method to ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height )
since that does not clear the state of the canvas. There are many simple animations I make that have initial line widths, stroke styles, or other default options that never get changed throughout the animation. It is nice not to have to redeclare those values on each loop tick.
Just something to consider, if you have other reasons for using the width clear method though, please let me know. Thanks!
The method named 'touchstart' firing should coincide with the firing of 'mousedown', the way 'touchmove' coincides with 'mousemove'
You can see more explanation here https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollX
when i resize the browser window, why the canvas context be cleared?
The hasOwnProperty
test in the extend
method isn't sufficient for detecting some native code. Should also check for a value before overwriting.
THREE.js Example (http://soulwire.github.io/sketch.js/examples/three.html) normal render vs. THREE.EffectComposer render:
-
Here is a working example: http://brunoimbrizi.com/_temp/sketchjs_issue/sketch.htm
Press T on the keyboard to toggle the effect.
When it is only three.js it works fine: http://brunoimbrizi.com/_temp/sketchjs_issue/three.htm
http://soulwire.github.io/sketch.js/examples/three.html
I am not sure which browsers this affects, but I know this is an issue on Chrome 28 Beta. Chrome doesn't run scripts properly when linking to files on raw.github.com. They get served as plain text, I assume to prevent people from linking to them to reduce server load. Obviously, this doesn't break it in all browsers, but maybe some. I can only confirm on Chrome 28 beta.
Hey Justin,
When I set fullscreen to false the canvas gets created with 0 width and height. Could I be missing something obvious here about how to set it?
From @kkxlkkxllb #53 PR. Do not know if this is a real issue though, I never encounter a bug related to this. It's more for cleaning issue and PR.
Hi!
Your focus handling is nice, but it would be nice if we could turn this off. I am getting a real performance problem with this right now. Thanks.
Add both AMD & CommonJS support. Again, from kkxlkkxllb PR #53 but with UMD, not just module.exports
Incorrect variable being referenced in dynamic property check
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library soulwire/sketch.js
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "soulwire/sketch.js",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Not sure about this one, but @kkxlkkxllb made a PR #53 mixing a fix for this one in it.
I will try to work out a clean PR for this.
Those two lines must be moved into the create
function in order to be able to control mutiple canvases on the same page.
var ctx;
var counter = 0;
I was looking at this demo: http://soulwire.github.io/Plasmatic-Isosurface/ in Chrome version 27.0.1453.94 m and I'm seeing a message saying my browser doesn't support WebGL. When I go to this site, I see that it does support it.
So, I can only guess that the WebGL detection method isn't working properly.
Found myself using these the other day and they weren't available conveniently like the others:
abs
acos
asin
log
Touches array should be a persistant object to allow cached references
It's probably me, and I can probably fix it.
There's mention of a Sketch.DOM type, but the variable isn't set, and relying on the default type case throws width/height and binding errors.
I just wanted to add an enhancement request. If you could allow the chaining of canvas functions, that would be awesome :)
Check out LeaVerou's chainvas for inspiration.
Should get refs to the document during the create cycle or otherwise when first needed
The default container value is document.body
but of course this doesn't exist when the script is included in the head of the document. Although doing so isn't good practice, this shouldn't cause an error when no alternate container is provided.
This will allow for transparent multitouch handling even on non-multitouch platforms. For example, a mousemove handler could respond to all touches by default and on non-multitouch devices this would just parse the 0th element, being the mouse.
Refactor the bindEvents method to act more as a mixin for any object. This will get called on the context by default, but could also be used with any DOM element to handle mouse events, dragging (etc).
When autopause is enabled and blur/focus events are starting and stopping the animation., the delta time (ctx.dt) can get incredibly large. It is of course obvious why this is happening, since tons of time is still passing, even while the animation isn't running. I am not sure of the best way to handle this.
I suppose you could store the current time when the blur occurs, and then get the current time when the focus occurs, and remove that amount from the delta calculation once things start up again. Any other ideas?
On a similar note, maybe you could just add blur/focus into the overridable instance methods, and we can handle regulating delta and other blur/focus issues manually, if that is out of the scope of sketch.js
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.