Making Simple Patterns in p5.js

Просмотров 22 тыс.

% 801

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.gg/FSW6zzU
Follow me on Twitter: SteveMakerspace
Projects in no particular order:
Simple squares pattern:
editor.p5js.org/StevesMakerspace/sketches/wufGqZ2gZ
Flower pedals curve vertex with sliders:
editor.p5js.org/StevesMakerspace/sketches/_hayYBAFC
Colored rectangles:
editor.p5js.org/StevesMakerspace/sketches/7CKMIdr13
Another version of colored rectangles with rotation:
editor.p5js.org/StevesMakerspace/sketches/n6LXd17o6
10 PRINT (angled lines - regular randomness):
editor.p5js.org/StevesMakerspace/sketches/OncD1oQY3
Perlin noise 10 PRINT (angled lines):
editor.p5js.org/StevesMakerspace/sketches/EqPCvWdxa
Perlin noise rectangles:
editor.p5js.org/StevesMakerspace/sketches/UhU4O7vVh
Diamond pattern - little triangles:
editor.p5js.org/StevesMakerspace/sketches/8H_SKnAVO
Perlin noise colored triangles:
editor.p5js.org/StevesMakerspace/sketches/1LtXBGXlg
Advanced version of colored triangles:
editor.p5js.org/StevesMakerspace/sketches/2CYhFiZot
Fabric-looking pattern using ASCII text:
editor.p5js.org/StevesMakerspace/sketches/5-h73eCDT
ASCII Codes:
theasciicode.com
Music:
Funk Down (Sting) by MK2 (theme)

Опубликовано:

10 июл 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 34

@Lucas-se1ho Год назад

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.

@StevesMakerspace Год назад

You're welcome! Glad to help.

@Nothing-cx4jt 2 года назад

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.

@StevesMakerspace 2 года назад

Thank you! If you find a good one on shadows, let me know.

@alvarobyrne 2 года назад

nice user name! @Nothing, what do you mean by shadows?

@juanpenagos 2 года назад

Steve very nice to see how you conducted your video and becomes a tutorial + showcase. Already subscribed and hoping to see more videos!!

@StevesMakerspace 2 года назад

Thanks!

@JohnMitchellCalif 9 месяцев назад

very useful and clear! Subscribed.

@StevesMakerspace 9 месяцев назад

Thank you!

@salinadress 2 года назад

Excellent. Cant wait to play with. You gave me about a dozen ideas . Will check out your other videos .

@StevesMakerspace 2 года назад

Glad to be of service!

@sebcuadros 2 года назад

Great examples, thanks Steve

@StevesMakerspace 2 года назад

Thank you!

@imajeenyus42 Год назад

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.

@StevesMakerspace Год назад

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.

@wanderwithdaniel Год назад

Nice work, Thank you for sharing !

@StevesMakerspace Год назад

Thanks and you're welcome!

@musmurstarcraft1083 Год назад

ooh steve. I LOVE YOU. good lesson.

@StevesMakerspace Год назад

Glad you liked it!

@nztuber 2 года назад

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!

@StevesMakerspace 2 года назад

Glad you liked it!

@lanenaamorcita Год назад

Thanks you! This is helpful a lot .

@StevesMakerspace Год назад

You're welcome!

@HerSheKiss Год назад

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!

@StevesMakerspace Год назад

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.