seriot.ch

About > Projects > Drawing with Computers

Drawing with Computers

Various drawings, images and screenshots that I've created with code.

Postscript Stairs

Isometric stairs in minimal Postscript

<</PageSize[800 600]>>setpagedevice/S 5 def/f{/M exch def/C exch def/h exch def
/w exch def gsave M concat C setgray 0 0 w h rectfill 0 setgray 0 0 w h
rectstroke grestore}def/b{/H exch def/W exch def gsave W H 2 div 0.8[1 0 -1 1 0
S]f W S 1[1 0 0 1 0 0]f H 2 div S 1[-1 1 0 1 0 0]f grestore}def/U{/H2 exch def{
H 2 div neg H 2 div S add translate W H2 b}repeat}def/D{/H exch def{H 2 div H 2
div neg S sub translate W H b}repeat}def/L{/W2 exch def{W2 neg S neg translate
W2 H b}repeat}def/R{/W2 exch def{W S translate W2 H b}repeat}def/s{save}def/r{
restore}def/W 60 def/H 60 def 100 200 translate 2 30 L 2 30 D s 12 5 D 1 60 D 1
265 R 9 10 R 4 5 R r 2 30 R 1 30 U 1 60 U 1 60 R 1 60 U 5 10 R 1 30 R 1 60 R s 
5 20 D s 10 5 L r s 18 5 D r 10 5 R r 10 10 R 1 60 R s 20 10 D 1 60 D 10 5 R 1
110 R r s 10 10 U 1 60 U 10 20 R r 10 10 R 1 60 R 20 10 D

Intersecting Planes

How to draw these three intersecting planes in Postscript, and shrink the code down to 5 lines?

%!PS
200 200 translate/W 300 def/H 200 def/w 150 def/h 100 def/P{1 setgray 0 0 W H
rectfill 0 setgray 0 0 W H rectstroke 0 10 W{dup 0 moveto H lineto}for stroke}
def/A[1 0.6 -1 0.6 50 60]def/B[0 1 1 0.6 0 0]def/C[1 -0.6 0 1 -50 200]def/p{
gsave concat exec P grestore}def 1 0 0{}A p 0 1 0{}B p 1 0 0{0 0 W h rectclip}A
p 0 0 1{}C p 1 0 0{0 0 w H rectclip}A p 0 1 0{w 0 w h rectclip}B p showpage

Golfing with Postscript

How to draw Swissquote logo with only 3 lines of Postscript:

%!PS
2.5 2.5 scale /l { lineto } def 1 0.4 0.2 setrgbcolor
(@>CC30TFCF>J>MC30TPCP>T>TJ<J<><NH41HHD0x) { 48 sub 5 mul } forall
arc fill setgray rectfill moveto l l l l l arc l l l arc l fill showpage

Schotter

Source: (Postscript) https://gist.github.com/nst/696c31566a283588b7933415b3bd6aae

See also: https://twitter.com/nst021/status/1572249779480178690

Circles

Coding exercise with Émilien (10 years old).

Source: (Python) https://gist.github.com/nst/c689416bf23cccfc858e0f184280d7ed

Source: (Postscript) https://gist.github.com/nst/58b9d2b2bc70247bff1bddc4f5a80822

See also: https://twitter.com/nst021/status/1570047611989540865

Intetwined

Intertwined threads, knots and knitting figures with PyCairo.

Source: Intertwined

Truchet

Complex patterns from simple tiles, with just a few lines of Python.

truchet tiles

Source: truchet_simple.py

truchet tiles

Source: truchet_2.py

Roni Kaufman

Reproducing Roni Kaufman's art with PyCairo.

truchet kaufman pycairo

Source: truchet.py

Misc. variations created with the kids:

Isometric Renderings

Inspired by @bendotk.

Sources: iso.py, iso4.py, iso7.py, IsoRenderer

macOS Screensaver

GitHub: Isometric

Text User Interfaces

A Text User Interface over the Yuh neo-bank (undocumented) API

A Text User Interface over Swissquote Bank (undocumented) Mobile API

PulsarRuns

Pulsar-plot of Strava runs in Swift 3. sources

ShapefileReader

Reads Shapefile files, a geospatial vector data format. sources

switzerland_zip.png
switzerland_zip.pdf

DevTeamActivity

Generates a picture summarising the activity of a dev team on one or several repositories. sources

Twitter API Visual Documentation

Public and private endpoints of Twitter API with their parameters.

Made with OmniGraffle.

UTIs Explorer

Graph of OS X UTIs inheritance.

Made with Python and GraphViz. sources

Benjamin Kovach

Reproducing Benjamin Kovach's art with PyCairo.

kovach pycairo

Source: kovach_pycairo.py

Sample drawings with BitmapCanvas

Swift implementation of Nadieh Bremer's work "Exploring the Art hidden in Pi".

pi walk

"Schotter" by Georg Nees where the idea is that randomness for x, y and rotation does increase at each row. Also created a rainbow-colored version.

schotter schotter color

Sources in BitmapCanvas repository.

DrawBytes

Draws any file as a picture, considering bytes as RGB values.

Made with Python. sources

$ python draw_bytes.py /usr/standalone/i386/tmbootpicker.efi tmbootpicker.efi.png

iOS Frameworks

Draws a timeline of iOS public and private framworks.

Made with Swift (formerly Python). sources

Coop Coffee

A scatter plot of coffee sold at Coop supermarket.

Made with Python and matplotlib. sources

OS X Frameworks Dependencies

OS X frameworks and dynamic libraries dependencies.

Made with Python and GraphViz. sources

Mobile Signal

Measure and display the kind of cell phone signal (Edge or 3G) on a map.

Make with Cocoa UIKit. sources

BatteryChart

Measure and display the battery charge of iOS devices.

Make with Cocoa UIKit and Python matplotlib. sources

Wolfiles

Shows the modification date of all the files in the home directory. Inspired by Stephen Wolfram personal analytics.

Made with Cocoa AppKit. Sources not yet available.

Hello Mach-O

Dissection of minimal Intel 32-bits, 204 bytes, Mach-O "Hello World" executable file.

Click to get a full-scale PDF file.

TwitHunter

Represents the cumulated number of tweets with a certain score.

The scores are applied according to user defined rules.

Made with Cocoa AppKit. sources

Email scams intelligence

Here are several diagrams revealing links among messages, giving investigators stategic and tactical intelligence. These pictures are taken from my Master's thesis in Economic crime investigation.

Made with Django, R and OmniGraffle. Source not available.

Emails can be represented in time and space.

A 2D map and a dendrogram showing clusters of similar messages.

The source and type of scams can be summarized with this oval diagram.

On the left, we draw links between messages, using "hard informations" (IP addresses, phone numbers, ...). One the right, we continue filling the chart, drawing further links and using "soft informations" like the kind of scam.

Spotlook

An innovative Mac OS X search tool based on Spotlight.

Based on my software engineering thesis at EIVD 2006.

STStrava

Experimental visualisation of runs using Swift and Strava API. sources

Objective-C Dependencies

Dependencies in Objective-C classes.

Made with Python and GraphViz. sources

eForex Backtest

Evaluates a trading strategy with historical prices.

The upper chart shows the prices. The lower one shows the profit.

The heatmap shows the profit according to the time and a parameter of the trading strategy.

Three more charts show the volatility of EUR/CHF. Abscissa represents hours of the week. Ordinate represents the weeks themselves. The top is January 2001, the bottom August 2011.

Made with Python and GnuPlot. sources

Power Management logs to iCal

Read the start and stop time where the Mac OS X was used, display these sessions in iCal.

Made with Python and iCal. sources

Home Made Maps

Here are my attempts to make new maps of Western Switzerland. The goals are to explore alternative representations of the Swiss highways network and to create maps that fullfil my actual needs.

Click on the maps to display the original PDF ones.

1. Highways Network

The first map simplifies quite a bit the shape of the network. It tries to respect geography. The map also shows rest areas, gas pumps and clickable red dots for speed radars.

2. Highways Topology

The second one does not respect geography anymore. It is just the topology of the network, as the one on this French highway ticket. It start from Lausanne on the left and extends to the right.

3. Highways Touristic Map from Lausanne

The third map is an evolution of the former network representation. It shows the places proportionnaly to the travel time by car from my home in the center of Lausanne. It shows highways exits, but also nice touristic places you can reach through the given exits. At the bottom of the map, you can also see several places reachable by train.

4. Touristic Map from Lausanne

This map displays more or less the same places as the previous one. However, it tries to respect the geographical layout instead of highways network topology. Space is still distorted to match the travel time from my home. This whole map can be generated by a script, except the roads and the lake which are added by hand. This is the artistic touch. This map could and will be improved, but you get the idea.

I posted the source code and described the process to generate such a map out of a Google Map on github.