Points and Lines

art

https://editor.p5js.org/msrobot0/embed/4Nv9jd6b0

I have never had a good relationship with creative code. It is the one place where the blank page intimidates me. However, recently I listened to a lecture on coding and meditation and found a way in.

The first prompt was imagine a point and two lines and then all the different ways you can connect between the two lines, straight, curved, squiggly, zig zag. Squiggly and zigzag in programming means you are also adding other points, but lets not go there yet.

I found this very generative. How many signs and symbols are drawn like this: constellations, the alphabet and numbers, stars, hearts, even … sigils.

I decided I wanted to have a user type in and transform the letters into essentially sigils. I had an idea of how I would do this with Bezier Curves, and possibly with python, but when I got into the weeds things changed. 

I decided to use p5js, a javascript library for processing. I have never really used p5js but all the kids are doing it and so I will do that instead of do something else like use TikTok. 

The next thing I did was throw out bezier curves. Maybe I will return to bezier curves but for now I am using CurveVertex

What I am doing? Well when I started out I wanted to get an intuition for how the lines curved. So I drew two random points and then connected them with a curve. It was a line. Then I drew three lines, and so forth. Then I wanted to add dynamic points so I added points a list. I wanted to add constraints (like events and constraints), so when the lists got too long I’d remove the first point – this makes the lines appear to move continuously. Then I wanted then lines to appear to have richness, so I added additional curve vertices. In one version I added key press events so you can toggle between random or 0-9 vertices, speed up and slow down the framerate, and add additional vertices. 

How does CurveVertex work?

Well it uses a spline method called Catmull-Rom. I have zero idea what this means. I am super tired right now. But I am interested to try this method out with bezier and other curving algorithms.  Tomorrow – when I am not completely exhausted maybe I can talk about how to use CurveVertex

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.