未加星标

Fifteen Ways to Draw a Line

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

All Processing code for this article, along with images, can be found on Github

Early last year I challenged myself to come up with twenty five designs using only Perlin flow fields and followed that up with seventy-five different ways to draw a circle . In this article I explore another simple challenge: fifteen different ways to draw interesting lines.

The Constraints

I set three constraints for this challenge. As before, my first constraint was to forego the use of color so that I could focus on forms and shapes instead.

Second, each version should be implemented as an independent, re-usable function conforming to the following declaration:

void line(float x1, float y1, float x2, float y2, float weight, float value) { /* * Draw a line from (x1, y1) to (x2, y2) with a given * weight and darkness (value) */ }

This way, I can easily reuse them later for other works. Above, you’ll see that I specify two additional parameters: a stroke weight and a value (or lightness/darkness).

As the third and final constraint, each version had to have some generative/procedural component to it. That is, each time the function is called, a new variant should be generated.

Enough talking. Here are the results! Enjoy!

Fifteen Lines

I started with a basic formatting of different weights and values that I was looking for and went with the simplest possible line. Below, the stroke weight increases from left to right, and the values get lighter from top to bottom:


Fifteen Ways to Draw a Line
#1

My immediate next urge was to form the line thickness from multiple thinner lines. The endcaps of the line can be seen as a circle of diameter specified by weight . I generated a random point inside the circle around the first endpoint and another around the second, and connect them with a line whose color is based on the specified value:


Fifteen Ways to Draw a Line
#2

Instead of drawing complete lines, I instead sampled a few points on the line instead and drew small ellipses (with the required opacity to get the correct value):


Fifteen Ways to Draw a Line
#3

I wanted to try and see if I could use a solid black fill for the ellipses and vary the value using just the density of the sampling itself, and it seems to work quite well:


Fifteen Ways to Draw a Line
#4

I decided to switch gears a bit and, after generating a few random points inside the line shape, created a Delaunay diagram (using Lee Byron’s fantastic Mesh library for Processing . The value was determined by the lightness of the lines:


Fifteen Ways to Draw a Line
#5

Since I was using the Mesh library anyway, I figured I would also try to do just a convex hull of the randomly-generated points. This gives an interesting brush-like shape:


Fifteen Ways to Draw a Line
#6

At this point I wanted to try a variation of a previous sketch: instead of generating random lines ending near the endpoints of our line, I wanted to generate them anywhere within the line’s shape. The result was subtly different, but the different was not particularly discernible:


Fifteen Ways to Draw a Line
#7

Since I was generating random points along the shape of the line anyway, I figured I’d just draw some ellipses instead. I use random diameters based on the specified weight, but this is the first one where I start drawing outside the bounds of the original shape:


Fifteen Ways to Draw a Line
#8

In the next one, I removed the fill and used just a thin outline stroke. Tip: you can specify fractional stroke weights in Processing to get thinner lines (e.g. strokeWeight(0.5) )


Fifteen Ways to Draw a Line
#9

Rather than generating ellipses with random positions and diameters, I decided to generate them on the original line with a random diameter up to the specified stroke weight:


Fifteen Ways to Draw a Line
#10

This time I went from the stroke-only version to the filled version because I had just done that variation betweween #8 and #9:


Fifteen Ways to Draw a Line
#11

Now I decided to combine the stroke-only and fill-only versions. I used opposing colors for the stroke and fill to get the different values: lighter values have a dark stroke with very light fill, while darker values have a light stroke with a much darker fill:


Fifteen Ways to Draw a Line
#12

I moved on to implement a simple walker that walks along the line with random shifts in its position. I overlaid a bunch of these to get the next iteration:


Fifteen Ways to Draw a Line
#13

I then reduced the step size to a very small amount to get a perpendicular scribble, and drew just a single walk from endpoint to enpoint with random variations based on the specified stroke weight:


Fifteen Ways to Draw a Line
#14

And finally, I decided to use a closed shape instead of an open one, allowing for filling in the parts that jut out of the original line:


Fifteen Ways to Draw a Line
#15

I suspect I could push this exercise pretty far if I wanted to, but I’ll stop: I’m already glad to have fifteen interesting line variations to play around with in future sketches!


Fifteen Ways to Draw a Line

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Fifteen Ways to Draw a Line
本站链接:https://www.codesec.net/view/628429.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(52)