Categories
Designs Tech

The Making of: Lyricova Screensaver v2

It has been long since last time I post here. This time I’d like to share about how I made the Lyricova Screensaver v2: refractor from my own legacy code.

Categories
Designs

Eanois Default’s Design

Actually this is just to showcase the original design of the new Eanois Default design. Still a little different from the current implementation, but personally, it still looks a little better on the design draft, than the actual website. Although I can’t see why.

Screenshot from Sketch

By the way, today’s the 8th anniversary of 1A23.com. Yay!

Categories
Designs

The Making of the New 1A23 (1): Accordion and Modal in the same tag with pure CSS.

This is my new series that talks about the making of the new 1A23 Studio site, and some tricks I’ve used in it. For the first article, I would like to talk about the gallery page.

Categories
Designs 中文文章

Codename LyricG 那个一度设想过的音乐游戏,设计图初公开

差不多快两年了呢。

那一次在纸上描绘出来的设想,也一直没有实施。本来很早就想把这个发上来的。唉,╮(╯▽╰)╭。 拖延症啊~~~

总之,今天终于把这个东西扫出来了。

PDF 下载。

Categories
Designs

LRC translation combiner

LRC translation combiner

LRC 用歌词翻译合并工具

为制作LRC翻译歌词的各位提供的工具。
将原文和译文分别填入左右栏,分行对齐之后点击生成即可。
生成之后的内容能够直接复制到歌词制作工具(如千千静听)里面打时间轴。

单一网页制作。(仅引用了Google web font)将网页保存到任何地方即可离线使用,支持大多数现代浏览器。目前支持中文和英文。

MIT协议发布,转载及修改请署名。

地址:http://1a23.com/lyrictool

Categories
Designs 中文文章

脑内开坑: 歌语计划屏保。

Keng: Gy Screensaver.

1, fetch information from Gy server

File format:
possibly XML, or JSON?
Consist of all of posts

Separated API port for update date.
Program checks the update date compare to the local one. If the later one is newer, then update the local list.
Use local list for poor our unavailable internet connection.

2, the main body.

pick lyric from random if picked(a)=false.
label picked(a)=true,
lyric shown count +=1
if lyric shown = size(lyric array) then {lyric shown =0, fill picked(all)=0}
Draw lyric text in a time interval (#setting)

Randomize text size, color, position
Range of text size (#setting)
Range of color: complete hue,
Saturation and brightness are decided such that the text it’s visible on dark/black/starry background.
Text align to center,
[Detect pixel length/height of longest line,
Make a 10-20 px margin,
Draw text, and start timer.
last time of line(a) = length(line(a)) * time factor (speed, #setting)
enter animation: typewriter,
exit animation: fade out, .5s
transition: exit,exit end,enter
after object finish, destroy object

3, otherwise, on web?

directly fetch items number and single item from server by ajax. other applies.

Categories
Designs 中文文章

[on Github!] 歌语计划 PHP化。

更新!歌语计划登陆Github!欢迎围观!
https://github.com/blueset/project-gy

以后更新日志就放在那上面了。
这里停止更新。

====================2013.5.19====================

从一个最初的想法开始,经过各种构思与创意,经过一年多的时间,歌语计划终于决定PHP化了。

歌语计划是一个以歌词为主网络日志程序,用户将歌词片段以及各种相关信息输入后即可生成对应条目,并展示在首页。通过歌语计划,用户可以使用歌词来表达自己的感受,然后分享给全世界。

本程序是由蓝色之风工作室与iBe共同制作。

使用框架:

  • CodeIgnite
  • Twitter Bootstrap
  • jQuery
    UI设计:蓝色之风
    程序:蓝色之风

预计通过MIT协议开源发布。

已完成:

  • 条目显示
  • 条目添加
  • 条目值有效判断
  • 注册与登录模块
  • 条目编辑模块
  • 用户权限管理
    待完成:

  • 主体UI设计(80)

  • 条目后台管理
  • 单独页面显示
  • 分类检索与关键词检索
  • Ajax 支持
  • 主题支持
    截图:

 

gyb1-1 gyb1-2

Categories
Designs 中文文章

粘粘世界字体修改器

第一步,用BMfont生成图片字体,字符可以从原来的文本导入,注意调整字体和图片大小在一个图片上。
第二步,下载本工具生成四大段

打开fnt文件、点击转换并依次点击右边四个按钮。即可在右边文本框中得到结果
然后在txt文件里面替换。

第三步,替换生成的文本和图片即可。
本工具要求。net framework 4.0 环境

下载:http://u.115.com/file/aqa2h5er#bmp-font-2-wog.exe