Back to

CCB meetup #3

the nature of code

chapter 1 - vectors

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!