soulwire / sketch.js Goto Github PK

You can see more explanation here https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollX

i'm a beginner . i'm not able to follow your documentation
can you tell me how to vary the size of 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!

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.

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')
});

It would be useful to have an isMobile flag for adjusting properties of a sketch.

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?

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

http://davidwalsh.name/page-visibility

Hey, maintainer(s) of soulwire/sketch.js!

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!

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.

Similar to the way mouse and touch events are normalised, this should be extended to other input methods (perhaps as plugins).

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

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.

Should get refs to the document during the create cycle or otherwise when first needed

when i resize the browser window, why the canvas context be cleared?

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.

This should be accessible via Sketch.instances

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!

Retrieving dimensions from the style declaration is unreliable

Incorrect variable being referenced in dynamic property check

The hasOwnProperty test in the extend method isn't sufficient for detecting some native code. Should also check for a value before overwriting.

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.

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.

Found myself using these the other day and they weren't available conveniently like the others:

abs
acos
asin
log

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.

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;

Add both AMD & CommonJS support. Again, from kkxlkkxllb PR #53 but with UMD, not just module.exports

The method named 'touchstart' firing should coincide with the firing of 'mousedown', the way 'touchmove' coincides with 'mousemove'

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.

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).

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.

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.

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);
},

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.

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

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.

As title

Touches array should be a persistant object to allow cached references