el

@elliot.website

1066 Followers 81 Following

and visual and creativity and computers and math and elliot.website

A sketchbook page. On it there are marker drawings. There are two cards and a math diagram. The first card has italic "T"s in two corners like a playing card. It has three arrows inside. The second card has a lambda in one corner and "y" in the other; it has another card in it with "x"s in each of two corners and in the middle. The math diagram consists of three parts: a set above, a set below, and a labelled arrow between them. The top set consists of an apple and an orange; The arrow is labelled: "x squared plus x plus one" (with math symbols); the bottom set consists of the following: pair of apples, pair of apple and orange, pair of orange and apple, pair of oranges, singleton of apple, singleton of orange, empty tuple.
In this video the complex plane is (lch colour space) colour coded by angle represented by hue and magnitude represented by luminosity and chroma. The video shows the iterations of each point in the frame as a complex number under z^2 + c where c is the initial complex number value of that point.
The mouse moves, an asymptotic function follows the mouse, the asymptote adds with a sin curve to produce a sin curve with an asymptote that follows the mouse
There is a strange configuration of five quads (four sided shapes). The quads share edges so they form a loop (like a necklace of quads joined by their edges). The quads are deformed from a square in various ways. Throughout the animation, the camera's perspective shifts so that each quad, in turn, is un-distorted into a square while the other quads are distorted to match the new camera perspective.
Comic:
 First panel is of some code with wingdings equal to an code-inlined image editor with a sketchy fish in it.
 Then there is a text-message dialogue:
 Left person: Hi Sam. Do you think you could make my fish sprite nicer? Right person: Okay, I will try! My coding skills are pretty weak though... Could you help me get my sprite into the game code?
 Left person: Oh! I inlined a sprite editor into the code, check it out here!
 Now there is the first panel again, but the fish drawing is immaculate.
 Right person: I edited the sprite IN THE CODE!
 Left person: Beautiful :')
A drawing consisting of many overlapping and containing boxes following some rules: boxes in red boxes are vertically juxtaposed, boxes in blue boxes are horizontally juxtaposed, green boxes are for grouping, cyan boxes are either empty or unrelated to any boxes inside or overlapping them.
A video showing various diagram with outlines around them and handles on the outline and in parts of the diagrams. The user starts by typing to create a textual diagram. They then drag one handle on another to attach them. Then they drag things around and parts of the diagrams stay attached.
A configuration of orange boxes in rows and columns with gaps. There are arrows between the tops of orange boxes in the same row. There is an outline around the configuration. There is a black box connected to the outline.
A video showing a mouse dragging around nodes in a directed acyclic graph. The graph is horizontally rigid, so when the mouse drags a node left and right the entire graph moves left and right. The graph is a bit vertically flexible though, when the mouse drags a node up and down it only moves the nodes above and below that node in the directed acyclic graph.
A video showing an interactive diagram with some boxes and outlined groups of boxes on top of some code. The code reads: ``` // imports and canvas set-up code are not shown in this code const b1 = DraggableBox("yellowgreen"); const b2 = DraggableBox("orangered"); const b3 = DraggableBox("violet"); const b4 = DraggableBox("cornflowerblue"); b2.left = b1.right + 5; //one-time set b4.left = b3.right + 5; //one-time set const g1 = Outline(Group2(b1, b2)); const g2 = Outline(Group2(b3, b4)); g2.top = g1.bottom.plus(15); //set and create relationship g1.top = 20; //one-time set g1.left = 20; //one-time set Line(g1.centerBottom, g2.centerTop); ```
A diagram with code on top and a graph on bottom. The code reads `const +(2,-(3,x)) = 3`. The graph has four "leaf nodes": 2, 3, 3, and x. One 3 and x are connected to a minus symbol node, and the other 3 and the 2 are connected to a plus symbol. The minus symbol has an equals sign shaped edge coming out of it that turns into and edge into the plus node.
A fast-cut video showing parts of interactive and visual things I've worked on over the past couple years, including: Droste's Lair (with Josh Horowitz), a bezier curve editor (with Aria Minaei and Andrew Prifer for Theatre.js), a spherical color picker, A function gradient plotter, a vis of split monomorphisms, a vis of a strongly connected components algorithm, a data point selection tool, a fluid-like particle mixing tool, a 3D vis of part of the 2-category of posets, an implicit curve scrubber, a 2D grid-based quantum circuit drawing game, a 3D point selector and editor, a nested text editor selection system, a shape changing as it moves along a wire in a node-and-wire programming prototype, a visualization of the nth derivative, a way of drawing wires between properties in "Neutoys" (with Philippa Markovics) to control a cute 2D turtle drawing, a 3D grid-drawing tool, a blobby 2D drawing tool, a triangulation drawing tool, and finally a music notation editor in Polytope.
A video with code on the left and an animated diagram on the right. The code reads `Outline(Group2(cornflowerblueBox, b3)) eq(centerX(cornflowerblueBox), mouse.x) eq(centerY(cornflowerblueBox), oscillator)` The diagram shows a light blue box oscillating up and down and horizontally moving with the mouse. There are a few other boxes. Between two of the other boxes is an arrow. There is an arrow going into that middle of that arrow and an arrow coming out of the middle of that arrow and pointing towars the light blue box.
A diagram showing two large node-and-wire mechanism above and to the left of a smaller diagram showing boxes stacked in a tree configuration.
A video showing an animated and interactive diagram consisting of a mechanism on the y axis, a mechanism on the x axis, and some boxes in the center. The mechanisms consist of points and lines between them. As the user clicks, a focused part of a mechanism changes, and follows the mouse. It appears that the positions of the boxes in the middle correspond with the positions of parts of the mechanisms.
A video with a white background, about 10 black points in various horizontal positions but vertically stacked, various blue lines between the points, a few black lines between close by points, and one selected point in orange. In the video the selected point changes and is moved back and forth, as it does, any points connected by black lines maintain their exact distance to eachother. If a point "A" has blue lines connected to points above it, A aligns itself with the rightmost of those points. The video shows this mechanism in action. It looks like a sort of linkage mechanism.
A graph with nodes and edges. Some edges have a green outline, some have an orange outline, others have no outline. The nodes have numbers on them from 0 through 12. Two nodes don't have a number. The edges out of those nodes aren't colored. The strongly connected components (SCCs) of the graph have a light purple background around them. All the SCCs are a single node except for the SCC with nodes 0, 1, 2, 3, and 4 which have edges going both ways between nodes with successive numbers.
The video shows a graph with nodes and edges. A red edge moves through the graph and visits all its edges. When the red edges visits a node, the node is assigned a number. The number increments at each node visited. So the first node is given 0, the next 1, next 2, and so on... When the the red edge visits and edge between two nodes that have numbers, it assigns the minimum number of the two nodes to the tail node. In the video we see the numbers propagate, and nodes in the same strongly connected component end up having the same number. After a section of the graph is visited, it may be put into a highlighted region which contains the nodes and edges of a strongly connected component of the graph. See Tarjan's strongly connected component algorithm for more details.
The video shows a graph with nodes and edges. A red edge moves through the graph and visits all its edges. After a section of the graph is visited, it may be put into a highlighted region which contains the nodes and edges of a strongly connected component of the graph. See Tarjan's strongly connected component algorithm for more details.
A video showing a graph consisting of a bunch of nodes with edges between them. In the video, a single edge is coloured red at each time to indicate which edge is currently being viewed by the DFT algorithm. As edges, are viewed, they turn green if the DFT traverses across them, yellow if they are a "forward edge", and are left uncoloured if they are a "back edge". At the end of the video, the green edges form a directed acyclic sub-graph.
Visualization of two waves: one on a circle and one on a line. The waves are synchronized and have 3 harmonics in them: the 2nd, 3rd, and 5th in equal proportion.
A diagram showing a pentagonal commutative diagram on the left, and its associated string diagram on the right
A video showing a two-pane editor. On the left is a text editor with a JavaScript canvas program, on the right is the interactive program. When I scroll up, a history tree is revealed. I click on nodes in the history tree to jump to different programs. The js in the text editor changes, is evaluated, and the interactive result shows up in the canvas on the right.
A bizarre piece of pseudo-mathematical notation. There is something that looks like a few matrices stuck together added to (with the plus sign) something that resembles the symbol for the natural numbers.
A sequence of small outlined images of arrangements of colorful boxes. Each image is connected to the next by a line.
A strange mixture of warped grid patterns in black sand on a white background.
a digram consisting of three colored boxes and arrows. One arrow points between corners of the boxes, another arrow points from a corner of a box to the middle of the other arrow, and the last arrow points between the previously mentioned arrows. It doesn't depict anything in particular. Its funky to have arrows pointing at eachother like this.
A screenshot of a two pane page: in the left pain is a code editor containing code relationally describing a diagram consisting of boxes placed above and beside eachother; in the right pane is an instance of that diagram. There are four boxes, each a different color; two of the boxes are placed next to eachother; those two are grouped and the group has a dotted outline around it; one box is centered below the group ; another is only below it, and its x position is explicitely set in the code.
A screenshot of a two pane page: in the left pain is a code editor with a for loop that repeatedly draws an image that is (notably) inlined in the code; in the right pane is the drawn image.
An animation of a sierpinski triangle fractal forming out of a bunch of randomly distributed particles
a video showing a 2D geometry app with an interactive linkage mechanism. The linkage starts with 3 points and the user drags the three points around. The three points are constrained to have a fixed distance between them. The three points define a circle which is drawn approximately using linear edge segments in black and shorter segments in blue. After moving the three points around a bit, the user clicks to add a fourth point. Now the four points define an euler spiral that is drawn in black; a smaller blue spiral also appears, but it unfortunately does not match up with the black spiral.
The alphabet, formed by black sand scattered on a white surface
a few nodes and edges arranged into a tree. When I drag a node, the tree shape stays the same. Debug information consisting of numbers and colors are displayed beside the nodes. The numbers change depending on which node is being dragged.
A video that starts with a sin curve, a mouse cursor, and a point on the sin curve close the mouse cursor with a tangent line. As the video goes on, the mouse and point and the curve move, and the tangent line (1st derivative) morphs into an osculating circle (2nd derivative), osculating euler spiral (3rd derivative), and osculating double spiral (4th derivative, sorry I don't know the name of this curve).
a video that start with just a grainy black and white texture, a mouse cursor is moved into frame and it "rakes" the black and white pixels near it in the direction of the mouse movement.
selection is working :) yahoo
Hi I am doing Polytope again! but now it has Caretope! Yahoo and... it... has History! History! History!
A charcoal drawing depicting a butterfly, a hand drawing, a dancer, an eye looking at itself
true≢false : true ≢ false true≢false true≡false = subst (λ { true → ⊤ ; false → ⊥ }) true≡false tt