哭了!好美!交互式《几何原本》再现江湖

栏目: CSS · 发布时间: 6年前

内容简介:作者:公众号编译整理

哭了!好美!交互式《几何原本》再现江湖

标星★公众号      爱你们

作者:公众号编译整理

近期原创文章:

♥  5种机器学习算法在预测股价的应用(代码+数据)

♥  Two Sigma用新闻来预测股价走势,带你吊打Kaggle

  利用深度学习最新前沿预测股价走势

♥  一位数据科学PhD眼中的算法交易

♥  基于RNN和LSTM的股市预测方法

♥  如何鉴别那些用深度学习预测股价的花哨模型?

♥  优化强化学习Q-learning算法进行股市

♥  WorldQuant 101 Alpha、国泰君安 191 Alpha

♥  基于回声状态网络预测股票价格(附代码)

♥  AQR最最最新 | 计量经济学应用投资失败的7个原因

♥  关于高盛在Github开源背后的真相!

♥  新一代量化带货王诞生!Oh My God!

♥  独家!关于定量/交易求职分享(附真实试题)

♥  Quant们的身份危机!

♥  拿起Python,防御特朗普的Twitter!

♥  用深度强化学习打造不亏钱的交易机器人(附代码)

这个网站是对1847年Oliver Byrne对Byrne的Euclid的再现,它向美丽的原创设计者致敬,并包括由Nicholas Rougeux设计的交互式图表,交叉参考和海报等增强功能

哭了!好美!交互式《几何原本》再现江湖

https://www.c82.net/euclid/

哭了!好美!交互式《几何原本》再现江湖

支持多种设备操作:

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

《几何原本》 (希腊语:Στοιχεῖα)又称《原本》, 是古 希腊数学家欧几里得的一部不朽之作,集整个古希腊数学成果和精神于一书。既是数学巨著,也是哲学巨著,并且第一次完成了人类对空间的认识

该身自问世之日起,在长达2000多年的时间里它历经多次翻译和修订,自1482年第一个印刷本出版后,至今已有1000多种不同的版本。除了《圣经》之外,没有任何其他著作,其研究、使用和传播之广泛,能够与《几何原本》相比。它 是欧洲数学的基础,总结了平面几何五大公设,被广泛的认为是历史上最成功的教科书。欧几里得也写了一些关于透视、圆锥曲线、球面几何学及数论的作品。欧几里得使用了公理化的方法。这一方法后来成了建立任何知识体系的典范,在差不多二千年间,被奉为必须遵守的严密思维的范例。

几个世纪以来,原稿和一些抄本一直在流通,但直到1440年印刷机发明后不久,从1482年开始,原稿才得到更广泛的复制。

"BYRNE’S EUCLID 是 Oliver Byrne 版本的《几何原本(Euclid's Elements)》—— The First Six Books of the Elements of Euclid(前六卷几何原本,1847 年版)的复制。使用彩色插图演示证明从而避免使用字母标注边,角以及图形。添加了交互式图表(证明中的图形可点击),交叉引用。

哭了!好美!交互式《几何原本》再现江湖

从Byrne的欧几里得中扫描前八个命题

1847年,爱尔兰的数学教授Oliver Byrne与出版商William Pickering密切合作,在伦敦出版了独特的一版  The First Six Books of the Elements of Euclid 。 Byrne的版本是最早的彩色印刷书籍之一,以其对欧几里得原著的独特理解而闻名。精确地使用颜色和图表意味着这本书非常具有挑战性,而且复制成本很高。关于为什么Byrne只设计了13本书中的6本,人们知之甚少,但这可能是由于时间和成本所致。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

1482年第一版毕达哥拉斯定理的几何证明(左),1847年Byrne的精彩演绎(右)

关于Byrne更深入的历史和他的版本可以在美国数学协会的网站上找到:

哭了!好美!交互式《几何原本》再现江湖

https://www.maa.org/press/periodicals/convergence/oliver-byrne-the-matisse-of-mathematics-byrnes-euclid-geometry-understood-via-color-coded-diagrams

最新的交互式版本,完善了由于19世纪印刷方法限制而不可避免的粗糙和不精准。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

颜色与风格

在创建图表时,我们开发了一个调色板,其中包含了Byrne在书中使用的所有样式,这样我们就可以轻松地将样式应用到在Illustrator中使用吸管 工具 进行创建。他只使用了四种颜色(红、蓝、黄和黑)、两种线条样式(实线和虚线)和两种线条粗细。

哭了!好美!交互式《几何原本》再现江湖

创建角度和圆弧的形状选择更精确的方法:

哭了!好美!交互式《几何原本》再现江湖

有些图需要平分角或平分线。一条任意角度的直线可以通过复制这条直线并围绕其中心旋转90度来平分。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

通过使描述中的每个形状都可单击并在滚动时保持图表可见来实现。

点击查看交互式

这意味着这些图需要从Illustrator中导出为SVG,然后添加到站点中,并且需要创建每个形状的相应微型版本,以便在描述中单击它们。这个过程是最耗时的,但也是最令人愉快的,因为当我们完成时,每个图表都栩栩如生。

哭了!好美!交互式《几何原本》再现江湖

漂亮的排版是我们想重新创作Byrne版本的一个重要原因。

哭了!好美!交互式《几何原本》再现江湖

幸运的是,大家都知道使用的字体是Caslon,Adobe有一个版本的字体支持这项工作。

装饰首字母是由Mary Byfield于1843年创作的木版画,最初展示在中世纪的字母,数字和装置中。 它们是几何图表现代性的完美补充,我觉得重现它们也很重要。通过在Illustrator中跟踪它们并使用Glyphr Studio将图形转换为字体来创建自定义字体。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

long s ( ſ ) 

long s ( ſ ) 贯穿于这本书。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

特殊符号

有趣的是,“不相等”、“不大于”和“不小于”的符号只出现在符号和缩写的定义列表中,而没有出现在原著的任何地方。不平行的符号并不出现在符号列表中,而是出现在第一本书的命题39和命题40中。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

最后,在每次加载页面时都编写了一个小脚本,便为每个字符添加标题属性以获得更多帮助。

哭了!好美!交互式《几何原本》再现江湖

方程和组

Byrne经常使用大括号来表示等式,并通过将文本行或形状组合在一起来避免重复文本。

哭了!好美!交互式《几何原本》再现江湖

作者做了很多复杂的前端处理:

哭了!好美!交互式《几何原本》再现江湖

但是还是有一些问题:因为括号是由CSS生成的,而不是在HTML中生成的,而且实际上是不可见的。 这也意味着我必须为大小(.group-fence2,.group-fence3等)指定不同的类,这些类不总是与行对齐。

哭了!好美!交互式《几何原本》再现江湖

Caslon字体的花括号字符也有一个非常大的em方框,这是CSS无法改变的。放大字体大小意味着em方形通常会与其他文本和可单击形状重叠,如下所示。此外,大括号看起来很笨重,即使我们使用了其他字体。

哭了!好美!交互式《几何原本》再现江湖

作者进行了改进:基于MathJax如何处理花括号的原理,以及作者设计的更灵活的方法。每个组都有包含在HTML中的方括号供参考,然后替换为自定义SVG形状,并为上、中、下和扩展元素添加了一些JavaScript。然后使用CSS对扩展元素进行拉伸,而不是使用字体大小设置进行放大,以填充上部、下部和中部留下的空白。

哭了!好美!交互式《几何原本》再现江湖

自定义花括号

下面的代码是一个工作示例:

哭了!好美!交互式《几何原本》再现江湖

这种方法非常好,并且没有其他两种方法的缺点,而且花括号的大小总是正确的。

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

对齐之前和之后的方程组

还有一位作者,用ConTeXt宏来创建一个新的MetaPost实例。 在MetaPost中,有许多函数可以创建这些构造。 它们的使用看起来有点像这样:

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

对于命题文本,我们 制作了一系列在同一个MetaPost实例中绘制图片的宏 。通常,它们执行任意的 MetaPost 代码,但大多数情况下,它们将对象名称作为参数。是这样的:

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

如下:

哭了!好美!交互式《几何原本》再现江湖

书中的图片并不过分复杂,但有些部分需要特别注意。

如果线段的末端彼此接触,则触摸点需要很好的显示。 目前,仅支持两条线路的连接。 

哭了!好美!交互式《几何原本》再现江湖

角度被描绘为圆形扇区。 如果角度足够小,具有相同半径的扇区可能看起来很小,因此放大它是有意义的。 目前,对于60度以上的角度,半径保持不变。

哭了!好美!交互式《几何原本》再现江湖

为了看起来不错,虚线应该以完整破折号开始和结束。

哭了!好美!交互式《几何原本》再现江湖

由于很多事情都是自动完成的,所以添加小字母并不是什么大不了的事情。默认情况下,点的名称是那些保存其坐标的变量的名称。标签可以放置在多边形的顶点,线段和c的末端。

哭了!好美!交互式《几何原本》再现江湖

这个项目的GitHub:

https://github.com/jemmybutton/byrne-euclid

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

哭了!好美!交互式《几何原本》再现江湖

—End—

量化投资与机器学习微信公众号,是业内垂直于 Quant MFE CST 等专业的主流量化自媒体。公众号拥有来自 公募、私募、券商、银行、海外 等众多圈内 10W+ 关注者。每日发布行业前沿研究成果和最新资讯。

哭了!好美!交互式《几何原本》再现江湖


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

A Byte of Python

A Byte of Python

Swaroop C H / Lulu Marketplace / 2008-10-1 / USD 27.98

'A Byte of Python' is a book on programming using the Python language. It serves as a tutorial or guide to the Python language for a beginner audience. If all you know about computers is how to save t......一起来看看 《A Byte of Python》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具