Skip to content
master
Go to file
Code

Latest commit

ZIM Cat 01

GENERATOR
https://zimjs.com/cat/generator.html
Used for dynamic drawing such as generative art or visualizations.
Generator provides a set of RELATIVE drawing commands
that primarily match the traditional absolute drawing commands for
shapes on the canvas.
Rather than add all these commands to the Shape class they have been
added to the Generator class.
This optimizes the Shape class which is used for all components and ZIM
shapes.

The arrangement is similar to Processing (or P5js for a JS version).
There is one Shape that gets drawn into and code can be put in three
different callback functions:

setup - happens once at the start (similar to Processing)
draw - happens at the framerate (similar to Processing)
stamp - loops all at once (different that Processing?)

>> SETUP
The optional setup runs once before the draw or stamp functions run.
This function will not be used as much as in Processing because ZIM has
a Frame().
Also, things can be set up before the Generator code is called.
And the Generator class has parameters for color, strokeColor and
strokeWidth.
Generator defaults to start at the center of the stage - so in the
setup,
translate(-stageW/2, -stageH/2) could be used to start at the top left.

>> DRAW
The optional draw function runs at the framerate and receives count and
total parameters.
This will have the affect of animating the drawing as it "processes" the
code
By default, this will pause and unpause when the screen or the spacebar
is pressed.

>> STAMP
The optional stamp function runs inside a loop and produces the final
drawing at once.
The function receives count and total parameters.
You can switch between the stamp and draw function with the same code
inside.
The end product will be the same.

>> RELATIVE
The draw and stamp work the same way, running the code inside for each
count.
The magic happens because the commands are relative.
Even g.rectangle().rotate(5) is beautiful.
Each new rectangle after the first will be rotated 5 degrees
In absolute space, the corner points would have to be calculated with
sine and cosine - ew.
Generator does the matrix calculations to avoid this.
Each new command starts where the last command left off.
But each command also has an x and y value to translate if desired.
This x and y value is relative to the current rotation and scale.
Often, the x and y is left at 0, 0.
We considered removing them as parameters because translate() can be
called
but we left them in to be the same as Processing.

>> COUNT, PAUSE AND STEP
The count parameter of draw or stamp suplies the current count.
This provides ways to modify commands.
for instance circle(0,0,count*10); will draw circles that get bigger.
This can also be used to set the rate of change - often by using smaller
factors such as count*.01, etc.
Count can also be used to pause or do something different at certain
places in the drawing
Pause also has an optional number of seconds to pause or a ZIM
interval() and pause(false) can be used.
Generator has a count property which can be set to go forward or back to
a certain count.
Step calls a step - usually used when pause is true - an interval could
then be used for steps

>> PUSH AND POP
There is also push() and pop() as in Processing.
These remember the position, rotation, scale and skew when push() is
used
and then return the generator to these settings when pop() is used.
Multiple pushes can be set and then popped back.
These can be used to make fractals with recursive branching.

The drawing uses matrix transforms on Shape which takes the shape out of
traditional positioning.
A drawing property is available on the Generator that points to a
Container that holds the drawing.
This container can be moved, dragged, etc. so use this to manipulate the
drawing in a traditional manner.
The generator has a shape property which can be used to access the raw
shape for absolute drawing for instance.

The drawing container is automatically added to the default stage as the
Generator is created

CONNECTORS
https://zimjs.com/cat/connectors.html
Added a new component called Connectors that has nodes that can be
dragged and connected with lines.
There are three main uses:

1. Connecting dots like in coloring books - use linear:true
2. Making hieararchy type drawings - use snaps
3. Connecting objects like boxes together - pass in objects to the
points

The num parameter limits the number of lines that can be drawn from a
node.
The dropType can be set to require nodes to be dropped on or off other
nodes (or the default, any).
There are min and max distances the connections can be made.
These and the other parameters provide a variety of game and puzzle
options.

The Line can be set to have start and end heads.
The lineType in the Line can be set to "straight", "corner" or "curve"
Line also accepts points for any arrangement of a connector
but in this version, these have not been used in Connectors.

Currently, there are no pre-made lines - the user would have to make
these.
In future versions, we will look at making nodes and lines based on a
ZIM Hierarchy object.
This would also allow use to handle undo, redo and save.

LINE
Added lineType, lineOrientation, curveH, curveV, points as follows:
lineType - (default "straight") - by default the line is a straight line
between points
set to "corner" to draw only horizontal and vertical lines at 90 degree
angles between lines (see lineOrientation)
set to "curve" to draw horizontal and vertical lines with curves between
lines (see lineOrientation)
lineOrientation - (default "horizontal") - for lineType other than
straight draw two horizontal lines and one vertical line between points
set to "vertical" to draw two vertical lines and one horizontal line
between points
curveH - (default 100) - for "curve" lineType this is the horizontal
distance of the curve
curveV - (default 100) - for "curve" lineType this is the vertical
distance of the curve
points - (default null) an Array of points for the line which will
ignore length and lineType parameters
points in the array can have the following formats (a mix is okay too):
[x,y] points for straight lines.  This format should also be used for
first point
[cpX, cpY, x, y] for quadratic curve to with a single control point
followed by the destination point
[cp1X, cp1Y, cp2X, cp2Y, x, y] for Bezier curve to with start and end
control points followed by the destination point
// see the ZIM Shape docs (or
https://www.createjs.com/docs/easeljs/classes/Graphics) for details on
the curves
Fixed cloning of line ends - were not adjusting their start angles
also ZIM VEE heads were not cloning the decisions but rather moving them
to the clone

COLORS
Added toColor(targetColor, ratio) method to Strings - just like
lighten() and darken()
So blue.toColor(pink, .2) is a blue color a little ways towards pink

SERIES
Added range to series:
var s = series({min:1, max:5}).step(.1).bounce()
would return 1, 1.1, 1.2, etc. to 5 and back again, etc. every time it
is called
Added every() method to series:
var s = series(red, green, blue).every(3)
would return red, red, red, green, green, green, blue, blue, blue, red,
red, red, etc.
Remember, these are used with ZIM VEE
Which can be used in the new Generator (and Emitter, Tile, STYLE, etc.)

LOADER FOR TEXT AND JSON
Added type parameter to Loader BREAK after the label parameter before
all the colors, etc.
This defaults to "image" and can be set to "text" or "JSON" for loading
these types of data
The event object of the loaded event function will receive a text or
json properties for the results.
Also handles multiple files

MADE WITH ZIM
There is a frame.madeWith() method with some color and wording options
Thanks Iestyn for the prompting.
There is still the makeCircles(), makeIcon() and makeCat() methods as
well

FLIPPER
https://zimjs.com/cat/flipper.html
Takes a ZIM Tile and scrambles its items allowing the items to be
dragged to unscramble.
Works on horizontal, vertical or grid versions of Tile (as in one
column, one row or multiples)
Dispatches a "complete" event when done.
Can pass in an optional keys array that must match key properties
or an existing property of type keyType.
This allows, for instance, matching duplicate letters or colors.

CORS
https://zimjs.com/cat/picture.html
JavaScript on the Canvas gives CORS (Cross Origin Resource Sharing)
errors
when interacting with an image or sound from remote sites (without
arranging for CORS)

Now, adding https://cors.zimjs.com/ in front of a full URL
will avoid CORS errors on assets from remote sites.
eg: https://cors.zimjs.com/https://somesite.com/somepath/someimage.jpg

This should be used only when there is a CORS issue
and not just to work with your own assets locally on your computer.
For that, please adjust your browsers according to
https://zimjs.com/tips.html#IMAGES
Thank you Disco Drama for the work on this.

SOCKET
https://zimjs.com/socket
Socket lets you connect with multiuser sockets for chats, avatars, etc.
There is a ZIM socket file and a ZIM server file as well as socket.io.
ZIM Socket has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.

DISTILL
https://zimjs.com/distill
Distill lets you minify only the ZIM code used in the app.
This can reduce code from 600K to often around 100k.
This service has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.

WONDER
https://zimjs.com/wonder
Wonder lets you record microstats like button clicks, time spent in
areas, etc.
This service has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.

GENERAL
Made loadAsssets() dispatch a complete event even if no assets passed to
it - helps in dynamic systems (thanks Ami Hanya)
Added toEnd parameter to stopAnimate(). If set to true, will make
targets go to end values of their tweens (this will ignore specific ids)
Adjusted endTween() callType parameter to default to "all" rather than
"none"
this will now call the call function (and all series call functions
prior) when endTween() is run
Thanks to Disco Drama for suggesting the endTween and callType
parameters.
Adjusted Page to have backing size the size of the screed by default
with container dimensions the zimDefaultFrame width and height
Adding Layout to Page will now keep the same background color or pattern
by default as the frame is scaled.
Pages object now automatically swipes horizontally from page to page
without wrapping (thanks Andi Erni for the request)
specify swipe lists if some other swiping is desired or specify a swipe
property of [] on one of the pages to turn off swiping
Switched rotate parameter of MotionController to orient to match animate
property of the same name.
Added rotate property to end of parameters for backwards compatibility
but this is now depricated.
Fixed MotionController to keep start rotation when orient is set to
true.
Adjusted MotionController so flip does not work when target starts at an
angle other than 0.
To rotate a target and use flip, use a Container as the target and put a
rotated object inside the container.

PATCHES to CAT 00 since GitHub update
Added shadowBlur and shadowColor to Scrambler for when an item is picked
up - <em>BREAK</em> of later params
Fixed a glitch in the Scrambler so it scrambles to a non-correct order
Added num parameter to Scrambler to visibly scramble a number of times
within the time provided - <em>BREAK</em> of later params
This is good for scrambling a small number of things - eg. set num to 3
to scramble 4 things in 2 seconds
Fixed ZIM Tips which extends a Label and we had added bold, italic and
variant to Label but not to the Tips - thanks Racheli Golan for the...
tip
Also added bold, italic and variant parameters to the end of the tips
Fixed up a typo in ZIM Base which was outputting a 3 in front of an
async call - thanks Andi Erni!
Fixed animate() to handle relative values when loopPick set to true
Adjusted getLatestVersions() to return a JSON parsed object as expected
and intended
Fixed minified version for getLatestVersions() - minify is changing
async() return function name
** yay!  Remembered that async() has a third parameter to use the
function as a string to overcome minify problem
Fixed up dispose of Tag, TextArea and Loader - it called a "removed"
event which was trying to delete the html tag but it was already gone -
thanks Racheli Golan for the find.
Fixed glitch in Scramble - so fast tripple clicks do not mess it up -
applied mouseEnabled false before animating and mouseEnabled true when
done
Fixed bug in running Sprite from JSON - was referencing frame in Sprite
and should have been zimDefaultFrame - or zdf.  Thanks Racheli Golan for
the find.
Took off container dispose for Blob and Squiggle as that affects how
they are recreated with a points change - went back to 10.9.0 and
patched that there too
Fixed animate() for shape tweens - the index for events needs to be
updated anytime parameters change - thanks Mike Gossland for the report.
Fixed Blob and Squiggle issue with bringing back controls - the
mousedown -> pressdown on Shape was left in a test mode - tricky bug.
Still needing to adjust pressdown so that target and currentTarget
report properly...
Updated Scrambler to have a swap parameter before the style parameter.
Swap will not automatically shift the tiles as a tile is dragged but
wait until the drop (thanks Ami Hanya for the idea)
Added swapLock parameter to Scrambler to lock tiles in place that are
placed - thanks Netanela for the request!
Added a testItem(item, index) to test a specific item in the Scrambler
Also added a complete property to the Scrambler - but usually the
"complete" event would be used
then the dragged tile goes where dropped and the dropped on tile goes to
where the drag came from
Fixed asset() without preload to addTo() as placed not after when loaded
- this keeps the levels - thanks Ami for the report
Added label property to TextEditor() to get or set the label the editor
is applied to - thanks Ami
And made the show() method also set the editor to whatever label is
provided
Adjusted animate drag on path to properly flip if object is rotated to
start
We had fixed up flip when dragging on path to be more stable and missed
adjusting pre-rotated objects
This is not perfect as it handles only pre-rotation of 90 and -90 or
270.
Put unusual start angles in a container and animate the container if
there are any issues.
Added timeUnit to docs for animate() parameter and added timeCheck
parameter to animate
Set the min time for warning on wiggle() to 40 as we often wiggle
greater than a 10 second time
Fixed Button toggled text, color and rollColor when these have been
changed after creation
Fixed Button clone() which was missing various new toggle colors
Turned ColorPicker indicator to mouseEnabled false so button shows
cursor still when rolled over

PATCHES SINCE NPM Cat 00
Adjusted Bitmap so it does not specify sourceRect if being passed a
video
CreateJS had a warning about the sourceRect needing to be same dimension
as the video
Which is too bad as it would be nice to cut video into pieces too...
would need to confirm that is not possible
Adjusted ZIM asset object {id:, src:, type:} to include a type
so a JSON file can be loaded without a .json extension for example -
thanks Frank Los for the prompting!
Adjusted ColorPicker selectedColor to convert to lowerCase as the colors
are set in lowerCase <em>BREAK</em>
Fixed rollBorderColor to default to borderColor
Fixed Emitter so emitterPaused is true if set to startPaused false
Fixed the recursive parameter on noDrag() so it can receive a false -
thanks Cajoek for working through this with us
Adjusted windowWidth(), windowHeight() and frame.swapRotation on mobile
to not set swapRotation when in an iFrame - it was reading a wide iframe
as wrong when shown in vertical view on mobile
see what we mean... horizontal aspect ratio iframe on vertical device or
visa versa - this was giving a false reading
leading to a very confusing bug with ZIM in iframe on mobile when
changing orientation
Fixed Synth to play the right note to start - was trying to apply an
octive shift test when we did not need to
Worked on Synth to reduce crackle on Firefox - thanks Frank Force for
the advice
Adjusted stop() parameter to be release in seconds - not stop time
Added setInput() and dispose() methods to SoundWave - to set a different
sound and dispose - thanks Amy Hanya for the suggestion
Added ramp(volume, duration) to Synth tone() this will set the volume
smoothly without pop or crackle (as best as possible)
The volume should be used only for animation.
Adjusted stop() method of Synth tone() to use ramp fix - thanks Frank
Force for the aid - it is better but still not perfect
Swapped in a new Synth play() with updates from ZzFX - sustainVolume and
decay parameters were added
The patch now matches updates to the tool
https://killedbyapixel.github.io/ZzFX/ and keep backwards compatibility
Fixed Window resize and maximize
maximize was missing stage update since we removed the constant update
in window scrollbar
resize was broken by that.noDrag() on end of window drag as we made
noDrag() recursive
so need to pass in false to noDrag to stop it setting noDrag on resize
handle too!
went through and checked rest of noDrag in ZIM - seems okay
Fixed clone registration issue - typo was setting regY as regX
Added callType parameter to animate endTween() method with three values
"all", "none", "main"
These will call the callback function (or not) when endTween() is used.
"all" will call the callback functions in a series where "main" will not
Thanks Disco Drama for the suggestion and testing
The current default is "none" for backwards compatibility but in version
01, this will be changed to "all"
Added a madeWith() method to Frame to create an ZIM icon with Made with
ZIM beneath (customizable) - thanks Iestyn for the request!
Added a noCORSonImage property to the ZIM asset object for loading
assets
this will avoid CORS errors by loading an HTML image into a bitmap and
then applying an expand to add a CreateJS hitArea
See https://zimjs.com/explore/imagewithnocors.html (thanks Disco Drama
for the find!)
it means that the full image will be interactive and not just the opaque
parts of a png
it also does not count in the progress property (bytes loaded) of the
progress event - but it does trigger assetload and complete events
Updated ZIM Window to remove drag bounds check if enabled is set to
false
this will avoid a positioning issue when animating the location of a
Window or List.
See https://zimjs.com/test/listmove.html as a sample of using this -
thanks Disco for the report
Fixed animateTo() in List to use seconds by default
Fixed spacing issue on custom non-equal width objects in a horizontal
List (or Tabs) - thanks Disco for the find
Fixed content property of selected items in List for custom items - this
was documented but missing in practice - thanks Disco for the find
Added noScale to List at end of parameters before style.
This will make the list not scale custom objects and ignore the listNum
parameter - thanks Disco for the testing
f5cafff

Git stats

Files

Permalink
Failed to load latest commit information.

README.md

ZIM

npm GitHub

JavaScript Canvas Framework - Code Creativity!
https://zimjs.com

A consistent, complete, simple and colorful Canvas Framework that provides quick visual results. ZIM is great for learning to code but also powerful for professionals to make games, apps, art and more for desktop and mobile!

Please see the About section for why we use ZIM to make Interactive Media.
https://zimjs.com/about.html

Examples

There are many examples of things to be made with ZIM in the banner sections on the ZIM site
Here is the main example section including CodePen examples - we hope you like them!
https://zimjs.com/examples.html

Coding in ZIM looks like this:

new Rectangle(50, 50, green).center().drag(); // for a centered draggable rectangle!

new MotionController(new Emitter(), "mousemove"); // for a particle emitter following the mouse

const squiggle = new Squiggle().loc(100, 100); // wavy line with Bezier handles
new Circle(20, pink).addTo().animate({path:squiggle}, 1000); // animate along a squiggle

new Button(200, 70, "TRY ME")
  .pos(30,30,RIGHT,BOTTOM) 
  .tap(()=>{zgo("https://zimjs.com");}); // go to URL
  

Getting Started

Copy the template on the Code page into an editor like Atom and view results in any Browser.
https://zimjs.com/code.html

ZIM CODEPEN TOPIC
https://codepen.io/topic/zim/

ZIM ZOO - lets you code in the browser and has a few examples to add and view
https://zimjs.com/zoo.html

ZIM LEARN has many code and video tutorials including:

ZIM Bits - 64 common techniques, ZIM Capture, What IZ tutorials, ZIM Badges, Code Zero and more!
https://zimjs.com/learn.html

ZIM SKOOL is great for learning with 8 full lessons including in Browser code examples.
https://zimjs.com/skool.html and for kids https://zimjs.com/kids.html - like Magic!

LEARN JAVASCRIPT WITH CREATIVE CODING
https://zimjs.com/learnjavascript.html

ZIM TIPS has a listing of the elegant ways we code in ZIM
https://zimjs.com/tips.html

ZIM DOCS has all the Classes and Functions broken down by module - expand the topics
to see descriptions, examples, methods, properties, events, source, bits, vids, demos and more!
https://zimjs.com/docs.html

ZIM NPM - here is some information on optionally using ZIM with Node Package Manager:
https://zimjs.com/npm.html

ZIM TYPESCRIPT - here is some information on optionally using ZIM with TypeScript:
https://zimjs.com/typescript.html

Issues & Community

You are welcome to add issues here but we tend to use Slack at for issues and support
We would love to see you there!
https://zimjs.com/slack

An easy view of updates can be found here:
https://zimjs.com/updates.html

Dependencies

ZIM is powered by the robust CreateJS Library and adds many conveniences, components and controls.
Cheers to Grant, Lanny and the CreateJS Team!
https://createjs.com

Authors

  • Inventor Dan Zen
    Canadian New Media Awards Programmer of the Year 2008
    Hamilton Arts Awards for Media Arts 2017
    http://danzen.com - Museum of Interactive Works

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

  • Thanks to the folks here and on Slack with reports, requests and enthusiasm!
  • Thanks Sheridan College and the Interactive Media Post Grad Program for the testing grounds!
  • Thanks to family for keeping me active in the "real world"
  • Thanks for giving us a STAR on GitHub!
You can’t perform that action at this time.