the nature of code
chapter 1 - vectors
- Date: 2025-03-27
- Time: 6.15-8.15pm
- Place: Borough Road Gallery, London South Bank University, 103 Borough Road, SE1 0AA
polls ✅
Connect to the LSBU public Wifi
While you wait you can go to C3S discord and answer some polls in the '#creativecodingbookclub' channel!
intro 👋
Welcome! Thanks for coming 🙏⭐
We likely don't have enough chairs 🪑🪑🪑 in the space today to fit everyone. If that's the case please be kind and leave the available chairs to whoever needs them most. Feel free to sit in the floor, stand and move around the room to keep the blood in your legs flowing!
This event is for anyone who is curious about creative coding - whether you are a beginner or a seasoned developer.
This 2025 we started "The Nature of Code" (2024) by Daniel Shiffman.
Last time we talk about chapter 0 which was about Randomness. Today we're talking about chapter 1, which teaches how to work with vectors.
Today we will use Etherpad during the meetup to collect ideas, notes, feedback and anything that you want to communicate publicly by text. The link for today's shared environment is here. The document will vanish 60 days after the meetup.
You can also raise your hand 🙋 and share anything at any point during the meeting. Don't be shy! (or be shy! whatever you want!)
A couple more things before we begin
- Keep an eye on #pastagang 's curated London coding scene list, to find out about other events.
-
Remember to check out the C3S meetup #5
April 5th @The Cave (Hackney)
lets talk vectors 🏹
If you bumped into any resources that complemented your reading of the chapter, please share them!
What were the main takeaways for you from reading this chapter? What things did you struggle with? What things did you learn?
Here is a 10min video about vectors that I think is worth sharing:
"Think about an arrow inside a coordinate system, with its tail sitting at the origin" (3Blue1Brown)
"Each vector represents a certain movement, a step with a certain distance (magnitude) and direction in space."
Vector Addition
Can be visualized as simply moving through each of the vectors, after placing the tail of the latter sitting on the tip of the former.
Scalar multiplication
Can be visualized as stretching (*2) or compressing (*0.5) a vector. Multiplying by a negative number (*-1.8) can be visualized as flipping the vector first, and then scaling it in the new direction by that number
Multiplying a vector by a scalar means multiplying each of its component by that scalar. (e.g. [3, 4] * 2 = [6, 8])
lil break ⌛
Go mingle!
sketches! 🎨
Share the links to your sketches in the shared environment. Feel free to also paste them in C3S discord if you want people who are not here today to see them as well!
get involve! ✏️
Our website is open-source, besides uploading your sketches, you can also contribute to it in github
Pull requests on Github are not everything. There are many ways you can collaborate!
Here are some ideas:
- MONTHLY POSTER: Every month we do a custom poster for our Luma event. If you're interested in making the poster some month send us a mail before the end of the previous month and we'll have a think about how to facilitate this!
- SITE FONTS: If you are a designer and you like typography, it would be very cool to
have custom fonts for the headings (
h1 ,h2 ,h3 ). At the moment these fonts are placeholder. Our main requirement would be that the fonts are readable and ideally monospace. - HOMEPAGE LOGO: The logo in our homepage is also placeholder! It would be cool to randomize this to include logos made by different people. It should read 'creative coding bookclub' and use our current main brand color. Lets also use svg as the export format so we can dynamically change the brand color color in the future, or even randomize it!
- HOMEPAGE SKETCH: . We have a placeholder sketch as the background of the homepage.
Get in touch if you like the idea of making more sketches for the homepage. Main
constraints here are that the sketch draws something from left to right, spanning the
whole width of the screen, and that it is monocrome (to keep the brand color in the logo
above standing out). Also this sketch should not be animated (only P5's
`setup()` function should be used)
Remember we're in Bluesky and Mastodon (Mickey also in Instagram). Feel free to reach to us and keep in touch in there!
q&a / coding time / pub 💻
If you have any questions about this or previous chapters, the website, or the bookclub in general, please ask them!
If you're feeling inspired. Go to the P5JS WebEditor and try making something now. If you are sitting next to a stranger maybe say 'hi' and try some pair-programming.
We need to leave by 8.15pm, but some people like hanging at a nearby pub afterwards, feel free to join!