search

Pomilui / Akira_Page

This page is for the Coding and Data Visualation project on the Akira anime.
The Unlicense
4 stars 0 forks source link

Akira Canonical Color (for HSV and website palette) #16

Closed ebeshero closed 5 years ago

ebeshero commented 6 years ago

Sites you need for isolating "Akira red" for use on the project site 1) Upload an image and isolate its colors to return values: https://imagecolorpicker.com/en 2) This helps you locate and adjust the HSL factors (see DHClass-Hub Explanation of HSL: https://www.w3schools.com/colors/colors_hsl.asp

@Pomilui @MarkTheShark01 @quantum-satire

helvitiis commented 6 years ago

These are the colors and their hex values I used for the site design: "Akira Red": #ed4630 red "Akira Teal": #2a6b6f teal "Off Black": #161417 black

These were taken from the advertisements and box art.

I can also help with finding particular colors you need with Photoshop, just let me know :)

ebeshero commented 6 years ago

@quantum-satire Ahhh, so you were using canonical Akira colors after all! :-) We were exploring HSL() values to make gradients from a red pulled from an Akira poster earlier today--you can see the results here.

helvitiis commented 6 years ago

@ebeshero That looks great!! Was this done as styling or in XQuery?

ebeshero commented 6 years ago

@quantum-satire In XQuery, we set the @fill on the rectangle element to read an hsl() set of color values.

ebeshero commented 6 years ago

@quantum-satire Here's some sample code:

<rect x="{$currentPersonPos * 5}" y="-{$currentDatePos * 5}" width="5" height="5" fill="hsl(240,{$saturation}%, 50%)"/>

The first number in HSL is the hue, and the third is its lightness--those together seem to control what color is displayed. Then you can just vary the saturation factor in the middle. Saturation and Lightness are percentages. We tinkered with it and found that be multiplying the raw count of the characters' exercising their powers in the script multiplied by 10, the gradation started to be visible on the screen. Your results might vary here...I'd start by inputting a meaningfully variant variable, and if it doesn't look right, multiply or divide it by something.

helvitiis commented 6 years ago

@ebeshero I'm wondering if I can implement this into the timeline and other data visualisations on Rick & Morty... Actually, I wonder if we could create a heatmap to show off some of the connections Dorothea has in mind in regard to all of the episodes as a grid.

ebeshero commented 6 years ago

@quantum-satire You sure could! I've been learning about heat maps from @zme1 and @djbpitt over on the Toscana project.

ebeshero commented 6 years ago

@quantum-satire Think of the number of episodes you're representing, and the information you want to sum up visually. You could represent that as a grid, but the blocks don't necessarily have to be super small, and could vary in size and/or color depending on what you want to show! https://www.fusioncharts.com/chart-primers/heat-map-chart/

Pomilui commented 6 years ago

@ebeshero Hey, Dr. B

I'm going to attempt to add the character names, the legend, and the axis labels to the Powers Bar Graph. Any recommendations? Thanks.