Sample Part of an Image or Drawing, and Put Samples into Tiles - p5.js Generative Art

Channel:

Steve's Makerspace

Subscribers:

7,360

Published on April 19, 2022 12:00:35 PM ● Video Link: https://www.youtube.com/watch?v=3fUVUS4I3qM

Duration: 15:45

1,259 views

53

In this video, I go over how to grab part of an image (like a jpg) or part of a drawing from the canvas, and put random samples into tiles. You can change the size of the tiles. I also go over the best way to display a jpg on the canvas so the entire image takes up your available screen space. This is part 1 of 2. In part 2 we'll go over rotating tiles and sampling animated drawings. p5.js generative art, creative coding.

Tile Sampling YT (Monet, Van Gogh):
https://editor.p5js.org/StevesMakerspace/sketches/m4esPltCo

Wavy Lines Tiles YT:
https://editor.p5js.org/StevesMakerspace/sketches/kurI2Q4PN

Original Wavy Line Art Maker:
https://editor.p5js.org/StevesMakerspace/sketches/HI1Algi8w

Video about Wavy Lines Art Maker:
https://youtu.be/_9yK32iUHm0

Load, resize, and display image example:
https://editor.p5js.org/StevesMakerspace/sketches/QTxvI18OZ

Jeff Thompson's channel:
https://www.youtube.com/user/jeffkthompson/

Man Destroys Computer clip:
https://www.youtube.com/watch?v=HtTUsOKjWyQ

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

Music:
Funk Down (Sting) by MK2 (theme)

0:00 Intro
0:39 Showing Tile Sampling from images
1:26 Showing Wavy Lines Tile Sampling
2:25 Loading and displaying an image
4:55 Displaying the entire image on the entire available space
6:02 Using "get" to grab a sample
7:14 Code for Tile Sampling (from images / paintings)
12:20 Code for Wavy Lines Tiles
15:01 There's a Part 2!