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

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

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

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

标星★公众号      爱你们

作者:公众号编译整理

近期原创文章:

♥  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+ 关注者。每日发布行业前沿研究成果和最新资讯。

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


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

查看所有标签

猜你喜欢:

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

《10%创业家》

《10%创业家》

[美] 帕特里克•J.麦金尼斯 / 李文远 / 广东人民出版社 / 2017-4 / 45.00

还在打工和创业之间苦苦挣扎吗?麦金尼斯用亲身经历告诉你,不用辞职,只需投入10%的时间和资源,就能获得100%的财务自由。你不需要雄厚的资本,也不必占用工作时间,只要准确掌握本书所授的方法,就能立即开始创业。 麦金尼斯是世界银行风投顾问,同时也是一名10%创业家。在本书中,他结合自身的创业咨询经历,为读者讲解了移动互联时代的5种创业模式,还提供了创业基因测试、10%创业计划、自传模板等个性化......一起来看看 《《10%创业家》》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具