gramener / comicgen Goto Github PK

Power BI supports custom visuals written in JS. Since Comicgen is a pure JS library, porting it should be possible.

This lets us annotate Power BI dashboards with emotion states driven by data. (e.g. growing sales => happy emotion)

• Test color class for Ava, Evan & Bean (@tejesh95 to test)
• Convert Ava, Evan & Bean into classes for color (@tejesh95 to test)
• Test color face for Dee (@sanand0 to test)

Possible options:

• Canva -- which has an existing comic strip feature
• Figma

faces.js is a JavaScript library that generates and displays cartoon faces. http://dumbmatter.com/facesjs/

Can we integrate this?

Raised by @richielionell

Avataaars has a character set to create faces. This can be integrated.

(things to keep in mind when creating the characters)

• Name all layers of character. ensure the name doesn't start with numbers/special characters. (Because the names are translated as id attribute for svg elements
• For better performance of interpolation, ensure number of vector points are same.

Allow anyone to create a comicgen plugin that adds new characters.

This allows individuals to create and use strips independent of comicgen -- for your own use.

Create a CRAN package (e.g. comicgenR) that allows people to plot a comic alongside ggplot2, or on a Jupyter notebook.

Tyler has created an R HTML Widget. More discussion at #1

https://charactercreator.org/ helps create prototypes for characters quickly that can be exported for web projects, 2D gaming projects, Comics or other print materials.

How can we learn from this?

Options include:

• Hand-drawn images
• Integrate Bubbly

Raised by @richielionell

The SVGs are large. Cycling through them is slow. Create PNGs corresponding to each image as an alternative format.

This official code sample:

<svg width="500" height="600">
  <g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="pointingright" x="-120"></g>
  <g class="comicgen" name="dey" angle="straight" emotion="smile" pose="handsinpocket" x="150"></g>
</svg>

... should create this image:

But the result is:

Raised by RK

Watch the <g> tag's attributes. If they change, change the comic immediately.

This allows updating the same <g> tag without having to re-draw it.

Google Spreadsheet has an Image() function.

Would love to be able to use IMAGE("https://gramener.com/comicgen/#?name=dee&emotion=angry&pose=handsinpocket&ext=svg&mirror=&x=0&y=0&scale=1&width=500&height=600&ext=svg") & get the image displayed in a cell in Google Spreadsheet.

Comicgen supports a JavaScript API and a HTML API. However, the UI also supports a REST API. For example: ?name=dee&angle=side&emotion=sad&pose=shrug links to this page.

We want to create:

• https://gramener.com/comicgen/export.svg?... to send an SVG
• https://gramener.com/comicgen/export.png?... to send a transparent PNG
• https://gramener.com/comicgen/export.jpg?... to send a JPG
• https://gramener.com/comicgen/export.gif?... to send a transparent GIF
• https://gramener.com/comicgen/export.pdf?... to send a PDF

This allows Comicgen images to be embedded in many more applications, such as emails. This also allows users to compose their own layers using SVG, PNG or GIF images

Users want to download an SVG to edit offline on tools like Adobe Illustrator. Some users want to download the images as PNG - which is simpler than taking a screenshot.

This requires UI testing. Evaluate Cypress

View this HAR file at https://toolbox.googleapps.com/apps/har_analyzer/

comicgen.zip

This slows down the site!

Having a background story to each character gives users an idea of where and when to use them.

For example, Ringo looks like a "corporate" character. If he is a busy manager, with a fair bit of experience, a quiet and gentle disposition, and likes playing drums, it's easier to (a) relate to him, and (b) create stories and situations around him.

The character's background story is best written by the author.

We need to write a background story for:

• Dee
• Dey
• Ringo
• Priya
• Aryan
• Zoe
• Facesketch
• Humaans

We also need to:

• Create a character page on the website that describes each character
• Document the process. Each new character must come with a story

This is similar to #5 Integrate with Power BI.

We want to annotate Tableau dashboards with emotion states driven by data. (e.g. growing sales => happy emotion.)

At the moment, we don't know how to do this, but linking to a dynamic image seems to be an approach.

See this Chernoff faces demo. It uses variables to control the extent of the smile, width of the face, etc.

Can we create characters whose expressions and body posture can be controlled using continuous variables?

This may be easier with xkcd-like stick figures #11. This is also something cartoon animators would know a lot about.

The people list helps us connect to people interested in storytelling through comics.

If you know of more people, please add a comment. We'll include them in our list.

Currently, Dee and Dey are in black and white. Zoe is in color.

Change the API to allow re-coloring the SVGs -- ideally without the author having to create new images. Color maps may be a possibility.

The example for the "emotion slider" feature needs to show "zoozoo" but shows the image of "Dee".

Ramya is working on this

This allows the same image to be tagged with multiple phrases. For example, searching Fontawesome for city also shows "building", "university", etc. Similarly, we want "unhappy" to be a synonym for sad.

This is required only in the UI - not in the API. This is to avoid bloat.

This requires being able to

• add multiple layers into a panel (#14)
• edit text in the layers
• add panels and lay them out into a page
• add pages into a novel
• save and share the novels

Add borders that look hand-drawn. Like Sketchy

Pixton Comic Characters is a PowerPoint add-in that lets you insert comic characters constructed using layers -- very similar to Comicgen. This approach would work fine.

We can create PowerPoint task pane add-ins using JS.

Enable comicgen to used in require('comicgen') and import('comicgen') environments. Probably default document.currentScript.src to http://gramener.com or /

@sanand0 -- is this something you'd like in this project?

I want to see Dee and Dey together in a single panel, like this.

The builder interface at https://gramener.com/comicgen/ should support multiple layers

• Create comicgen-full.min.js with continuous characters and d3/flubber dependencies included
• Document the above

Hello Team,

Wonderful Job! Thanks for sharing. Does it have any public API that I can use to create a wrapper for Python or R?

Thanks,
A

See xkcd

The gallery helps people understand how to use comics better for storytelling.

If you see any good examples, please add a comment. We'll include them in our list.

Pablo Stanley's new side project has a set of hand-drawn illustrations available in public domain, with a nice generator to make color variations: https://www.opendoodles.com/

How can we leverage this?

Raised by @richielionell

The resources list has other tools and resources for creating comic stories. We'd love to integrate with them and learn.

If you know of tools or resources, please add a comment. We'll include them in our list.

Today, each character has its own set of emotions.

We need a taxonomy of emotions for these characters, and apply these in a standard way across characters.

cc: @kriti21 @nikhilkabbin

Once users can add layers #14, allow users to search for public clip art (or even upload their own clip art) as a layer.

Fairly similar to #2 (Integrate with PowerPoint). But in Excel, we want to drive the character using data.

For example, if cell D2 has "dee" and D3 has "straight" and D4 has emotion "happy" and so on, we should be able to create a comic from that. When the cells change, the comic should change dynamically.

One way of doing this may be to embed an SVG or PNG image based on a dynamically constructed URL

Users can construct a series of panels, add characters & layers in each, choose a timing, and export the result as an animated GIF or video.

If you would like us to add a new character, or you have an idea for a new character to propose on comicgen, please add a comment, mentioning:

• What character(s) you'd like to add (e.g. a disabled character)
• An example of what that might look like (a screenshot)
• Who might find this useful, and how they'd use it

Here is a consolidated list of requests:

• Stick figures
• US 2020 presidential candidates
• Characters that represent minorities, people with disabilities: via Alberto Cairo
• Characters of different age groups (children, middle-aged, elderly, etc)
• Indian Characters
• Animal characters (e.g. dogs, cats, fish)
• Inanimate characters (e.g. cars, chairs, etc) -- but these could have emotions too
• 3D character objects

https://app.leanboard.io/board/cf68e6b3-22af-4fa7-84e0-0288f9aaf25f