Animated_GIF: Javascript Library for Creating Animated GIFs

Animated_GIF

A Javascript library for creating animated GIFs

How to use it?

Include dist/Animated_GIF.js in your HTML.

var imgs = document.querySelectorAll('img');

var ag = new Animated_GIF(); 
ag.setSize(320, 240);

for(var i = 0; i < imgs.length; i++) {
    ag.addFrame(imgs[i], { delay: 1000 });
}

var animatedImage = document.createElement('img');

// This is asynchronous, rendered with WebWorkers
ag.getBase64GIF(function(image) {
    animatedImage.src = image;
    document.body.appendChild(animatedImage);
});

If you instance lots of Animated_GIF objects, it's strongly recommended that you call their destroy method once you're done rendering the GIFs, as browsers don't seem to be happy otherwise. See the stress test for an example of this in use!

Minified versions

There's a minified version in dist/: dist/Animated_GIF.min.js.

Using from npm

You can also use this via npm.

To install:

npm install --save animated_gif

To use:

var Animated_GIF = require('animated_gif');

// And then the examples are as before
var ag = new Animated_GIF(); 
ag.setSize(320, 240);

// ... etc

Available options

Pass an object with the desired values when creating an Animated_GIF instance:

sampleInterval: how many pixels to skip when creating the palette. Default is 10. Less is better, but slower.
numWorkers: how many web workers to use. Default is 2.
useQuantizer: this is true by default, and provides the highest quality results, at the cost of slower processing and bigger files. When this is enabled, a neural network quantizer will be used to find the best palette for each frame. No dithering is available in this case, as the colours are chosen with the quantizer too.
dithering: selects how to best spread the error in colour mapping, to conceal the fact that we're using a palette and not true color. Note that using this option automatically disables the aforementioned quantizer. Best results if you pass in a palette, but if not we'll create one using the colours in the first frame. Possible options:
- bayer: creates a somewhat nice and retro 'x' hatched pattern
- floyd: creates another somewhat retro look where error is spread, using the Floyd-Steinberg algorithm
- closest: actually no dithering, just picks the closest colour from the palette per each pixel
palette: An array of integers containing a palette. E.g. [ 0xFF0000, 0x00FF00, 0x0000FF, 0x000000 ] contains red, green, blue and black. The length of a palette must be a power of 2, and contain between 2 and 256 colours.

addFrame options

delay: set frame delay. Default is Animated_GIF instance delay.

Tests and examples

Check the files in the tests folder:

Start the server from the root folder (e.g. Animated_GIF). One way of doing it is using the simple Python web server:

python -m SimpleHTTPServer

starts a server in http://localhost:8000. So you can now go to http://localhost:8000/tests/ and see the available examples.

Contributing / walkthrough

Here's a quick walkthrough of each of the files in src/ and what they do:

Animated_GIF.js - definition of the Animated_GIF class. Holds the logic for the queueing and rendering of the files, and parsing config options.
Animated_GIF.worker.js - code for the web worker that color-indexes frames in the background, using node-dithering and NeuQuant.js. This is bundled in dist/Animated_GIF.js, using workerify.
main.js - stub in order to export the library using Browserify (you won't generally need to touch this one)

External / included libraries --see Credits for more information on these. You generally don't want to touch these because it will make very difficult to track updates in those libraries:

lib/NeuQuant.js - color quantizer based on a neural network algorithm, this is an external library
omggif.js - GIF89 encoder/decoder
node-dithering - class with three different types of dithering algorithms

Rebuild `dist` files

If you made changes in the library, you'll need to rebuild the files in dist/ in order to see the changes working. We have a node.js-based script to regenerate those files.

Once node.js is installed in your system, do:

cd Animated_GIF     # or however you cloned the library to
npm install         # this pulls dependencies for building (uglify, browserify)
npm run build       # and this actually builds

Once you do the initial two steps you just need to execute npm run build whenever you change things and want to rebuild the files in dist/. Or you can also use npm run watch to have it build the library automatically.

Credits

We're using these fantastic libraries to do GIF stuff:

Anthony Dekker's NeuQuant image quantization algorithm which was ported from C into Java by Kevin Weiner and then to ActionScript 3 by Thibault Imbert, and to JavaScript by antimatter15, and fixed, patched and revised by sole.
Dean McNamee's omggif library - for actually encoding into GIF89
sole's node-dithering.

And then, to build the dist files

node.js
uglify
browserify

Download Details:

Author: Sole
Source Code: https://github.com/sole/Animated_GIF

#javascript #gif

What is GEEK

Buddha Community

Animated_GIF: Javascript Library for Creating Animated GIFs

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

The built-in interactive_console.py tool (if you already have a consumer key & secret)
The Tumblr API console at https://api.tumblr.com/console
Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

state - a string, the state of the post. Supported types are published, draft, queue, private
tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
date - a string, the customized GMT that you want
format - a string, the format that your post is in. Support types are html or markdown
slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

title - a string, the title of post that you want. Supports HTML entities.
url - a string, the url that you want to create a link post for.
description - a string, the desciption of the link that you have

#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api

Tamale Moses

1669003576

Exploring Mutable and Immutable in Python

In this Python article, let's learn about Mutable and Immutable in Python.

Mutable and Immutable in Python

Mutable is a fancy way of saying that the internal state of the object is changed/mutated. So, the simplest definition is: An object whose internal state can be changed is mutable. On the other hand, immutable doesn’t allow any change in the object once it has been created.

Both of these states are integral to Python data structure. If you want to become more knowledgeable in the entire Python Data Structure, take this free course which covers multiple data structures in Python including tuple data structure which is immutable. You will also receive a certificate on completion which is sure to add value to your portfolio.

Mutable Definition

Mutable is when something is changeable or has the ability to change. In Python, ‘mutable’ is the ability of objects to change their values. These are often the objects that store a collection of data.

Immutable Definition

Immutable is the when no change is possible over time. In Python, if the value of an object cannot be changed over time, then it is known as immutable. Once created, the value of these objects is permanent.

List of Mutable and Immutable objects

Objects of built-in type that are mutable are:

Lists
Sets
Dictionaries
User-Defined Classes (It purely depends upon the user to define the characteristics)

Objects of built-in type that are immutable are:

Numbers (Integer, Rational, Float, Decimal, Complex & Booleans)
Strings
Tuples
Frozen Sets
User-Defined Classes (It purely depends upon the user to define the characteristics)

Object mutability is one of the characteristics that makes Python a dynamically typed language. Though Mutable and Immutable in Python is a very basic concept, it can at times be a little confusing due to the intransitive nature of immutability.

Objects in Python

In Python, everything is treated as an object. Every object has these three attributes:

Identity – This refers to the address that the object refers to in the computer’s memory.
Type – This refers to the kind of object that is created. For example- integer, list, string etc.
Value – This refers to the value stored by the object. For example – List=[1,2,3] would hold the numbers 1,2 and 3

While ID and Type cannot be changed once it’s created, values can be changed for Mutable objects.

Check out this free python certificate course to get started with Python.

Mutable Objects in Python

I believe, rather than diving deep into the theory aspects of mutable and immutable in Python, a simple code would be the best way to depict what it means in Python. Hence, let us discuss the below code step-by-step:

#Creating a list which contains name of Indian cities

cities = [‘Delhi’, ‘Mumbai’, ‘Kolkata’]

# Printing the elements from the list cities, separated by a comma & space

for city in cities:
		print(city, end=’, ’)

Output [1]: Delhi, Mumbai, Kolkata

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(cities)))

Output [2]: 0x1691d7de8c8

#Adding a new city to the list cities

cities.append(‘Chennai’)

#Printing the elements from the list cities, separated by a comma & space

for city in cities:
	print(city, end=’, ’)

Output [3]: Delhi, Mumbai, Kolkata, Chennai

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(cities)))

Output [4]: 0x1691d7de8c8

The above example shows us that we were able to change the internal state of the object ‘cities’ by adding one more city ‘Chennai’ to it, yet, the memory address of the object did not change. This confirms that we did not create a new object, rather, the same object was changed or mutated. Hence, we can say that the object which is a type of list with reference variable name ‘cities’ is a MUTABLE OBJECT.

Let us now discuss the term IMMUTABLE. Considering that we understood what mutable stands for, it is obvious that the definition of immutable will have ‘NOT’ included in it. Here is the simplest definition of immutable– An object whose internal state can NOT be changed is IMMUTABLE.

Again, if you try and concentrate on different error messages, you have encountered, thrown by the respective IDE; you use you would be able to identify the immutable objects in Python. For instance, consider the below code & associated error message with it, while trying to change the value of a Tuple at index 0.

#Creating a Tuple with variable name ‘foo’

foo = (1, 2)

#Changing the index[0] value from 1 to 3

foo[0] = 3
	
TypeError: 'tuple' object does not support item assignment

Immutable Objects in Python

Once again, a simple code would be the best way to depict what immutable stands for. Hence, let us discuss the below code step-by-step:

#Creating a Tuple which contains English name of weekdays

weekdays = ‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’

# Printing the elements of tuple weekdays

print(weekdays)

Output [1]:  (‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’)

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(weekdays)))

Output [2]: 0x1691cc35090

#tuples are immutable, so you cannot add new elements, hence, using merge of tuples with the # + operator to add a new imaginary day in the tuple ‘weekdays’

weekdays  +=  ‘Pythonday’,

#Printing the elements of tuple weekdays

print(weekdays)

Output [3]: (‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Pythonday’)

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(weekdays)))

Output [4]: 0x1691cc8ad68

This above example shows that we were able to use the same variable name that is referencing an object which is a type of tuple with seven elements in it. However, the ID or the memory location of the old & new tuple is not the same. We were not able to change the internal state of the object ‘weekdays’. The Python program manager created a new object in the memory address and the variable name ‘weekdays’ started referencing the new object with eight elements in it. Hence, we can say that the object which is a type of tuple with reference variable name ‘weekdays’ is an IMMUTABLE OBJECT.

Also Read: Understanding the Exploratory Data Analysis (EDA) in Python

Where can you use mutable and immutable objects:

Mutable objects can be used where you want to allow for any updates. For example, you have a list of employee names in your organizations, and that needs to be updated every time a new member is hired. You can create a mutable list, and it can be updated easily.

Immutability offers a lot of useful applications to different sensitive tasks we do in a network centred environment where we allow for parallel processing. By creating immutable objects, you seal the values and ensure that no threads can invoke overwrite/update to your data. This is also useful in situations where you would like to write a piece of code that cannot be modified. For example, a debug code that attempts to find the value of an immutable object.

Watch outs: Non transitive nature of Immutability:

OK! Now we do understand what mutable & immutable objects in Python are. Let’s go ahead and discuss the combination of these two and explore the possibilities. Let’s discuss, as to how will it behave if you have an immutable object which contains the mutable object(s)? Or vice versa? Let us again use a code to understand this behaviour–

#creating a tuple (immutable object) which contains 2 lists(mutable) as it’s elements

#The elements (lists) contains the name, age & gender

person = (['Ayaan', 5, 'Male'], ['Aaradhya', 8, 'Female'])

#printing the tuple

print(person)

Output [1]: (['Ayaan', 5, 'Male'], ['Aaradhya', 8, 'Female'])

#printing the location of the object created in the memory address in hexadecimal format

print(hex(id(person)))

Output [2]: 0x1691ef47f88

#Changing the age for the 1st element. Selecting 1st element of tuple by using indexing [0] then 2nd element of the list by using indexing [1] and assigning a new value for age as 4

person[0][1] = 4

#printing the updated tuple

print(person)

Output [3]: (['Ayaan', 4, 'Male'], ['Aaradhya', 8, 'Female'])

#printing the location of the object created in the memory address in hexadecimal format

print(hex(id(person)))

Output [4]: 0x1691ef47f88

In the above code, you can see that the object ‘person’ is immutable since it is a type of tuple. However, it has two lists as it’s elements, and we can change the state of lists (lists being mutable). So, here we did not change the object reference inside the Tuple, but the referenced object was mutated.

Also Read: Real-Time Object Detection Using TensorFlow

Same way, let’s explore how it will behave if you have a mutable object which contains an immutable object? Let us again use a code to understand the behaviour–

#creating a list (mutable object) which contains tuples(immutable) as it’s elements

list1 = [(1, 2, 3), (4, 5, 6)]

#printing the list

print(list1)

Output [1]: [(1, 2, 3), (4, 5, 6)]

#printing the location of the object created in the memory address in hexadecimal format

print(hex(id(list1)))

Output [2]: 0x1691d5b13c8

#changing object reference at index 0

list1[0] = (7, 8, 9)

#printing the list

Output [3]: [(7, 8, 9), (4, 5, 6)]

#printing the location of the object created in the memory address in hexadecimal format

print(hex(id(list1)))

Output [4]: 0x1691d5b13c8

As an individual, it completely depends upon you and your requirements as to what kind of data structure you would like to create with a combination of mutable & immutable objects. I hope that this information will help you while deciding the type of object you would like to select going forward.

Before I end our discussion on IMMUTABILITY, allow me to use the word ‘CAVITE’ when we discuss the String and Integers. There is an exception, and you may see some surprising results while checking the truthiness for immutability. For instance:
#creating an object of integer type with value 10 and reference variable name ‘x’

x = 10

#printing the value of ‘x’

print(x)

Output [1]: 10

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(x)))

Output [2]: 0x538fb560

#creating an object of integer type with value 10 and reference variable name ‘y’

y = 10

#printing the value of ‘y’

print(y)

Output [3]: 10

#Printing the location of the object created in the memory address in hexadecimal format

print(hex(id(y)))

Output [4]: 0x538fb560

As per our discussion and understanding, so far, the memory address for x & y should have been different, since, 10 is an instance of Integer class which is immutable. However, as shown in the above code, it has the same memory address. This is not something that we expected. It seems that what we have understood and discussed, has an exception as well.

Quick check – Python Data Structures

Immutability of Tuple

Tuples are immutable and hence cannot have any changes in them once they are created in Python. This is because they support the same sequence operations as strings. We all know that strings are immutable. The index operator will select an element from a tuple just like in a string. Hence, they are immutable.

Exceptions in immutability

Like all, there are exceptions in the immutability in python too. Not all immutable objects are really mutable. This will lead to a lot of doubts in your mind. Let us just take an example to understand this.

Consider a tuple ‘tup’.

Now, if we consider tuple tup = (‘GreatLearning’,[4,3,1,2]) ;

We see that the tuple has elements of different data types. The first element here is a string which as we all know is immutable in nature. The second element is a list which we all know is mutable. Now, we all know that the tuple itself is an immutable data type. It cannot change its contents. But, the list inside it can change its contents. So, the value of the Immutable objects cannot be changed but its constituent objects can. change its value.

FAQs

1. Difference between mutable vs immutable in Python?

Mutable Object	Immutable Object
State of the object can be modified after it is created.	State of the object can’t be modified once it is created.
They are not thread safe.	They are thread safe
Mutable classes are not final.	It is important to make the class final before creating an immutable object.

2. What are the mutable and immutable data types in Python?

Some mutable data types in Python are:

list, dictionary, set, user-defined classes.

Some immutable data types are:

int, float, decimal, bool, string, tuple, range.

3. Are lists mutable in Python?

Lists in Python are mutable data types as the elements of the list can be modified, individual elements can be replaced, and the order of elements can be changed even after the list has been created.
(Examples related to lists have been discussed earlier in this blog.)

4. Why are tuples called immutable types?

Tuple and list data structures are very similar, but one big difference between the data types is that lists are mutable, whereas tuples are immutable. The reason for the tuple’s immutability is that once the elements are added to the tuple and the tuple has been created; it remains unchanged.

A programmer would always prefer building a code that can be reused instead of making the whole data object again. Still, even though tuples are immutable, like lists, they can contain any Python object, including mutable objects.

5. Are sets mutable in Python?

A set is an iterable unordered collection of data type which can be used to perform mathematical operations (like union, intersection, difference etc.). Every element in a set is unique and immutable, i.e. no duplicate values should be there, and the values can’t be changed. However, we can add or remove items from the set as the set itself is mutable.

6. Are strings mutable in Python?

Strings are not mutable in Python. Strings are a immutable data types which means that its value cannot be updated.

Join Great Learning Academy’s free online courses and upgrade your skills today.

Original article source at: https://www.mygreatlearning.com

#python

Lawrence Lesch

1664411280

Animated_GIF: Javascript Library for Creating Animated GIFs

Animated_GIF

A Javascript library for creating animated GIFs

How to use it?

Include dist/Animated_GIF.js in your HTML.

var imgs = document.querySelectorAll('img');

var ag = new Animated_GIF(); 
ag.setSize(320, 240);

for(var i = 0; i < imgs.length; i++) {
    ag.addFrame(imgs[i], { delay: 1000 });
}

var animatedImage = document.createElement('img');

// This is asynchronous, rendered with WebWorkers
ag.getBase64GIF(function(image) {
    animatedImage.src = image;
    document.body.appendChild(animatedImage);
});

Minified versions

There's a minified version in dist/: dist/Animated_GIF.min.js.

Using from npm

You can also use this via npm.

To install:

npm install --save animated_gif

To use:

var Animated_GIF = require('animated_gif');

// And then the examples are as before
var ag = new Animated_GIF(); 
ag.setSize(320, 240);

// ... etc

Available options

Pass an object with the desired values when creating an Animated_GIF instance:

sampleInterval: how many pixels to skip when creating the palette. Default is 10. Less is better, but slower.
numWorkers: how many web workers to use. Default is 2.
useQuantizer: this is true by default, and provides the highest quality results, at the cost of slower processing and bigger files. When this is enabled, a neural network quantizer will be used to find the best palette for each frame. No dithering is available in this case, as the colours are chosen with the quantizer too.
dithering: selects how to best spread the error in colour mapping, to conceal the fact that we're using a palette and not true color. Note that using this option automatically disables the aforementioned quantizer. Best results if you pass in a palette, but if not we'll create one using the colours in the first frame. Possible options:
- bayer: creates a somewhat nice and retro 'x' hatched pattern
- floyd: creates another somewhat retro look where error is spread, using the Floyd-Steinberg algorithm
- closest: actually no dithering, just picks the closest colour from the palette per each pixel
palette: An array of integers containing a palette. E.g. [ 0xFF0000, 0x00FF00, 0x0000FF, 0x000000 ] contains red, green, blue and black. The length of a palette must be a power of 2, and contain between 2 and 256 colours.

addFrame options

delay: set frame delay. Default is Animated_GIF instance delay.

Tests and examples

Check the files in the tests folder:

Start the server from the root folder (e.g. Animated_GIF). One way of doing it is using the simple Python web server:

python -m SimpleHTTPServer

starts a server in http://localhost:8000. So you can now go to http://localhost:8000/tests/ and see the available examples.

Contributing / walkthrough

Here's a quick walkthrough of each of the files in src/ and what they do:

Animated_GIF.js - definition of the Animated_GIF class. Holds the logic for the queueing and rendering of the files, and parsing config options.
Animated_GIF.worker.js - code for the web worker that color-indexes frames in the background, using node-dithering and NeuQuant.js. This is bundled in dist/Animated_GIF.js, using workerify.
main.js - stub in order to export the library using Browserify (you won't generally need to touch this one)

External / included libraries --see Credits for more information on these. You generally don't want to touch these because it will make very difficult to track updates in those libraries:

lib/NeuQuant.js - color quantizer based on a neural network algorithm, this is an external library
omggif.js - GIF89 encoder/decoder
node-dithering - class with three different types of dithering algorithms

Rebuild `dist` files

If you made changes in the library, you'll need to rebuild the files in dist/ in order to see the changes working. We have a node.js-based script to regenerate those files.

Once node.js is installed in your system, do:

cd Animated_GIF     # or however you cloned the library to
npm install         # this pulls dependencies for building (uglify, browserify)
npm run build       # and this actually builds

Credits

We're using these fantastic libraries to do GIF stuff:

Anthony Dekker's NeuQuant image quantization algorithm which was ported from C into Java by Kevin Weiner and then to ActionScript 3 by Thibault Imbert, and to JavaScript by antimatter15, and fixed, patched and revised by sole.
Dean McNamee's omggif library - for actually encoding into GIF89
sole's node-dithering.

And then, to build the dist files

node.js
uglify
browserify

Download Details:

Author: Sole
Source Code: https://github.com/sole/Animated_GIF

#javascript #gif

React Interview Questions & Answers

1625530200

GSAP (Green Sock Animation Platform) Web SVG Animation | JavaScript Animation Library

Today we are going to look at how to design and create a fully working website animation using the GSAP (Green Sock Animation Platform). SVG animation is actually not so complicated and can be a lot of fun. With the help of GSAP we can do powerful web animations with ease.

Article + Files:
https://raddy.co.uk/blog/adobe-xd-website-design-to-gsap-3-0-tutorial/

Part 1 - Designing the website layout: https://www.youtube.com/watch?v=ZmGfH6CJNYY

Subscribe to my newsletter: www.raddy.co.uk/newsletter

SOCIAL: @RaddyTheBrand
Instagram: www.instagram.com/RaddyTheBrand
Twitter: www.twitter.com/RaddyTheBrand
Website: www.raddy.co.uk
Blog: www.raddy.co.uk/blog
GitHub: https://github.com/RaddyTheBrand

#svg animation #javascript #library #gsap #green sock animation platform #tutorial

Mya Lynch

1598065860

Top 5 JavaScript Libraries to Create an Organizational Chart

In this article, we’ll review five JavaScript libraries that allow you to create online organizational charts. To make this info useful for different categories of readers, we’ve gathered together libraries with different functionality and pricing policy. To help you decide whether one of them is worthy of your attention or not, we’ll take a look at the main features and check if the documentation is user-friendly.

DHTMLX Diagram Library

The DHTMLX diagram library allows creating easily configurable graphs for visualization of hierarchical data. Besides org charts, you can create almost any type of hierarchical diagrams. You can choose from organizational charts, flowcharts, block and network diagrams, decision trees, mind maps, UML Class diagrams, mixed diagrams, and any other types of diagrams. This variety of diagrams can be generated using a built-in set of shapes or with the help of custom shapes.

You can set up any diagram shape you need with text, icons, images, and any other custom content via templates in a few lines of code. All these parameters can be later changed from the UI via the sidebar options in the editor.

Top 9 JavaScript Charting Libraries

The edit mode gives an opportunity to make changes on-the-fly without messing with the source code. An interactive interface of the editor supports drag-and-drop and permits you to change each item of your diagram. You can drag diagram items with your mouse and set the size and position property of an item via the editor. The multiselection feature can help to speed up your work in the editor, as it enables you to manipulate several shapes.

The library has an exporting feature. You can export your diagram to a PDF, PNG, or JSON format. Zooming and scrolling options will be useful in case you work with diagrams containing a big number of items. There is also a search feature that helps you to quickly find the necessary shape and make your work with complex diagrams even more convenient by expanding and collapsing shapes when necessary. To show the structure of an organization compactly, you can use the vertical mode.

The documentation page will appeal both to beginners and experienced developers. A well-written beginner’s guide contains the source code with explanations. A bunch of guides will help with further configuration, so you’ll be able to create a diagram that better suits your needs. At the moment, there are three types of licenses available. The commercial license for the team of five or fewer developers costs $599, the enterprise license goes for $1299 per company, and the ultimate license has a price tag of $2899.

#javascript #web dev #data visualization #libraries #web app development #front end development #javascript libraries #org chart creator

Animated_GIF: Javascript Library for Creating Animated GIFs

Animated_GIF

How to use it?

Minified versions

Using from npm

Available options

addFrame options

Tests and examples

Contributing / walkthrough

Rebuild dist files

Credits

Download Details:

What is GEEK

Buddha Community

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Usage

Create a client

Supported Methods

User Methods

Blog Methods

Post Methods

Tagged Methods

Using the interactive console

Running tests

Exploring Mutable and Immutable in Python

Mutable and Immutable in Python

Mutable Definition

Immutable Definition

List of Mutable and Immutable objects

Objects in Python

Mutable Objects in Python

Immutable Objects in Python

Immutability of Tuple

Exceptions in immutability

FAQs

1. Difference between mutable vs immutable in Python?

2. What are the mutable and immutable data types in Python?

3. Are lists mutable in Python?

4. Why are tuples called immutable types?

5. Are sets mutable in Python?

6. Are strings mutable in Python?

Animated_GIF: Javascript Library for Creating Animated GIFs

Animated_GIF

How to use it?

Minified versions

Using from npm

Available options

addFrame options

Tests and examples

Contributing / walkthrough

Rebuild dist files

Credits

Download Details:

GSAP (Green Sock Animation Platform) Web SVG Animation | JavaScript Animation Library

Top 5 JavaScript Libraries to Create an Organizational Chart

DHTMLX Diagram Library

Rebuild `dist` files

Rebuild `dist` files