Making Simple Patterns in p5.js
Vložit
- čas přidán 9. 07. 2022
- In this video, I go over different types of patterns you can make in p5.js, using regular randomness or Perlin noise, translating and rotating shapes, and different ways to make monochrome color palettes. 10 PRINT, generative art, creative coding.
Join my Discord: / discord
Follow me on Twitter: / stevemakerspace
Projects in no particular order:
Simple squares pattern:
editor.p5js.org/StevesMakersp...
Flower pedals curve vertex with sliders:
editor.p5js.org/StevesMakersp...
Colored rectangles:
editor.p5js.org/StevesMakersp...
Another version of colored rectangles with rotation:
editor.p5js.org/StevesMakersp...
10 PRINT (angled lines - regular randomness):
editor.p5js.org/StevesMakersp...
Perlin noise 10 PRINT (angled lines):
editor.p5js.org/StevesMakersp...
Perlin noise rectangles:
editor.p5js.org/StevesMakersp...
Diamond pattern - little triangles:
editor.p5js.org/StevesMakersp...
Perlin noise colored triangles:
editor.p5js.org/StevesMakersp...
Advanced version of colored triangles:
editor.p5js.org/StevesMakersp...
Fabric-looking pattern using ASCII text:
editor.p5js.org/StevesMakersp...
ASCII Codes:
theasciicode.com
Music:
Funk Down (Sting) by MK2 (theme)
Steve very nice to see how you conducted your video and becomes a tutorial + showcase. Already subscribed and hoping to see more videos!!
Thanks!
Excellent. Cant wait to play with. You gave me about a dozen ideas . Will check out your other videos .
Glad to be of service!
Another very good tutorial covering various patterns in one. Nice idea. Thank you so much! It helps a lot. I was looking for good tutorial on light and shadows using p5js.
Thank you! If you find a good one on shadows, let me know.
nice user name! @Nothing, what do you mean by shadows?
I'm very much new to generative art and P5js and when I look through the code of cool stuff I find, I'm often discouraged by how complicated it looks.
Thank you so much for showing clear examples with such excellent explanations.
You're welcome! Glad to help.
Great examples, thanks Steve
Thank you!
Nice work, Thank you for sharing !
Thanks and you're welcome!
very useful and clear! Subscribed.
Thank you!
Thanks you! This is helpful a lot
.
You're welcome!
ooh steve. I LOVE YOU. good lesson.
Glad you liked it!
This is awesome! I've seen a lot of generative art, but this is the first time I've actually got a feel for how they're generated. Often people will describe the process in making a particular design, but are a bit short on code - do I start attacking it in Processing, Python, or p5.
I’m glad it helped! I know there’s a lot of gen art and code tutorials using p5, but I’m biased since that’s what I use.
obrigado mestre
You're welcome!
Great! Perhaps random([0, 1]) * 45 instead of floor(random(0, 2)) * 45 for beginner readability?
Tomayto tomahto!
Nice selection of ideas, well presented, Ty!
Glad you liked it!
💎✨👌
well done sir! would you step into animating (the) things? ha, ha
Thanks! Interesting idea. I'll think about it.
Hello Steve, I'm not sure if you'll ever see this, but my school used your video as an example for a project we're doing and I am super interested in learning more about all this. I'm reading through your code and messing around with it a bit to really understand the ins and outs of how it all works. Problem is, the complicated triangles one you made uses that colors.csv file and I can't really figure out how that program works, because I don't have access to the file. Is there any chance you could share that file in the description under the link as well? It would be greatly appreciated!
I'm not really asking for an explaination, I like to mess around with it so I can get a deeper understanding of it. With documentation and experimentation I should be able to figure it all out and I'll probably learn a lot from it as well.
Thanks!
That's cool that a teacher is using it to teach. 🙂 What level / grade is that? If you're in the p5 online editor, there's a ">" above the numbers on the left. Click on that ">" and you'll see that are actually several files, one being the csv, and you can click on that name to see the csv data. Each line is a palette with 5 colors. So on line 2, that's actually palette #0, and the first color in the palette (color #0) is R 105, G 210, B 231. That's RGB color mode, which is red-green-blue. In a lot of my other code I use HSB color mode, which stands for hue, saturation, brightness. That mode is better for controlling what colors you want to use. There are websites where you can find the numbers for color palettes. I like to use coolors.co.
Nice video! Anyway in the future are you planning to do some kinetic typography tutorials in processing?
I might do processing in the future, but probably not on typography. Thanks!