The Joy of Creating Art with Code.
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 130 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/50107 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EuroPython 2020102 / 130
2
4
7
8
13
16
21
23
25
26
27
30
33
36
39
46
50
53
54
56
60
61
62
65
68
73
82
85
86
95
100
101
102
106
108
109
113
118
119
120
125
00:00
Student's t-testGoodness of fitRight angleShared memoryTouchscreenMathematical financeCodeElectric generatorMultiplication signSoftware developerComputer scienceAlgorithmUniverse (mathematics)Computer animationMeeting/Interview
01:05
Student's t-testSoftwarePoint (geometry)CodeNeuroinformatikUniverse (mathematics)Point (geometry)Software developerElectric generatorStudent's t-testBitMathematical financeSoftwareInternational Date LineObject (grammar)Frame problemAsynchronous Transfer ModeRandomizationGeometryProcess (computing)PiAlgorithmComputer animation
01:56
Order of magnitudeRow (database)TouchscreenPlotterMathematicsUniform resource locatorRotationNeuroinformatikDigitizingShape (magazine)Electric generatorGraph coloringMultiplication signAutonomous system (mathematics)DatenausgabegerätScaling (geometry)Complex (psychology)AnalogyoutputLimit (category theory)UsabilitySource codeForm (programming)Similarity (geometry)Computer configurationRandomizationVector spaceComputer animationEngineering drawing
04:09
Process (computing)Android (robot)Process (computing)Binary fileProgramming languageNeuroinformatikSoftwareIntegrated development environmentHypermediaSeries (mathematics)Context awarenessComputer programmingComputer animation
04:44
Process (computing)AlgorithmMathematicsRandom numberPixelLine (geometry)Asynchronous Transfer ModeFunctional (mathematics)Module (mathematics)Function (mathematics)Computer programmingProcess (computing)Point (geometry)Integrated development environmentGraph coloringAlgorithmTouchscreenCircleEllipseLoop (music)Different (Kate Ryan album)NumberCASE <Informatik>SequenceRandom number generationStatement (computer science)Sound effectTrigonometryNoise (electronics)ProgrammschleifeRange (statistics)Physical systemElectronic program guideObservational studyPoisson processMaxima and minimaProgramming languageComputer animation
07:06
Point (geometry)Line (geometry)DistanceLine (geometry)Vector spaceOperator (mathematics)Data storage deviceProcess (computing)Graph coloringPixelPoint (geometry)Linear algebraSubstitute goodCartesian coordinate systemWeightPosition operatorFunctional (mathematics)Coordinate systemLinearizationRotationInformationRight angleAdditionLinear mapComputer animation
08:54
Line (geometry)Line (geometry)Point (geometry)LengthGraph coloringSet (mathematics)Right angleDifferent (Kate Ryan album)Vertex (graph theory)Variable (mathematics)RandomizationFunctional (mathematics)Computer animation
09:28
Vertex (graph theory)CurveVortexCurveType theoryShape (magazine)Spline (mathematics)Functional (mathematics)QuicksortVector spaceForm (programming)Point (geometry)ImplementationVector graphicsSeries (mathematics)Musical ensembleVertex (graph theory)LengthVariable (mathematics)Game controllerCartesian coordinate system
10:48
WaveCurveNumberVariable (mathematics)Functional (mathematics)CurveMultiplication signPoint (geometry)DistancePosition operatorDivisorRandom number generationLine (geometry)Loop (music)Computer animation
11:58
WaveCurveDifferenz <Mathematik>CurveProcess (computing)Functional (mathematics)TouchscreenPoint (geometry)Vertex (graph theory)Computer animation
12:22
Loop (music)Right angleComputer programmingSingle-precision floating-point formatProgrammschleifeSubject indexingLine (geometry)CurvePoint (geometry)Functional (mathematics)Vertex (graph theory)Sound effectType theoryJSON
13:05
CountingClique-widthFrame problemParameter (computer programming)Multiplication signRectangleNumberEllipseSquare numberShape (magazine)RadiusTouchscreenVariable (mathematics)Functional (mathematics)VideoconferencingPoint (geometry)Length
14:03
Hill differential equationRectangleShape (magazine)Graph coloringRectangleShape (magazine)Greatest elementClique-widthPosition operatorRandomizationRight angleFunctional (mathematics)Subject indexingComputer animation
15:21
Function (mathematics)InterpolationLatent heatInterior (topology)Functional (mathematics)Graph coloringSmoothingNumberInitial value problemNoise (electronics)GradientSinc functionProcess (computing)LinearizationInterpolationRectangleVariable (mathematics)Execution unitPoint (geometry)Line (geometry)Subject indexingRight angleStructural loadParameter (computer programming)Multiplication signLoginBuildingComputer animation
17:08
NoiseSimplex algorithmGradientSlide rulePseudozufallszahlenLine (geometry)NumberGraph (mathematics)Form (programming)Random number generationPoint (geometry)SequenceNatural number
18:00
Simplex algorithmNoiseNoise (electronics)Module (mathematics)Physical systemFunctional (mathematics)Integrated development environmentNumberProcess (computing)Plastikkarte
18:39
PixelNoiseSubject indexingPixelSound effectPoint cloudGraph coloringMedical imagingNoise (electronics)Functional (mathematics)Right angleGreatest elementComputer animation
19:40
PixelRandom numberNoise (electronics)Point (geometry)PixelNumberRandomizationSound effectPattern languageComputer animation
20:27
NoiseTrigonometryRadiusTrigonometric functionsSlide ruleDifferent (Kate Ryan album)Direction (geometry)Computer programmingCurvePoint (geometry)Data structureMultiplication signVertex (graph theory)Functional (mathematics)WaveNoise (electronics)SineLoop (music)Coordinate system
22:24
Texture mappingNoiseField (computer science)GeometryFraktalgeometrieTriangleObject (grammar)Vector spaceParticle systemVariable (mathematics)Multiplication signComputer programmingDirection (geometry)NumberParameter (computer programming)FluxChaos theoryTrianglePattern languageGeometryPoint (geometry)RandomizationField (computer science)Right angleNoise (electronics)Functional (mathematics)DivisorSound effectSierpinski triangleLine (geometry)VelocityComputer animation
24:47
TriangleFraktalgeometrieMandelbrot setRotationTriangleLinear mapSierpinski triangleVertex (graph theory)CurveFraktalgeometriePattern languageMandelbrot setSquare numberDivisorPoint (geometry)Cursor (computers)Graph coloringNichtlineares GleichungssystemPlanningMereologyComplex numberSet (mathematics)Computer animation
25:46
Logistic distributionSource codeTheoryChaos (cosmogony)Boundary value problemInfinityFatou-MengeMandelbrot setPoint (geometry)Set (mathematics)Bifurcation theoryMathematicsChaos (cosmogony)Line (geometry)DiagramNeuroinformatikElectric generatorAttractorState of matterMarginal distributionNichtlineares GleichungssystemMereologyLevel (video gaming)Chaos theoryRandom number generationReal numberCartesian coordinate systemBlock (periodic table)Medical imagingComputer animation
26:53
Interior (topology)SimulationPolygonDivision (mathematics)Random numberVertex (graph theory)MathematicsPolygonShape (magazine)Process (computing)Arithmetic meanPoint (geometry)Object (grammar)Sound effectFitness functionVariable (mathematics)Parameter (computer programming)Vertex (graph theory)RandomizationGAUSS (software)Functional (mathematics)Vector spaceAttractorFiber (mathematics)Library (computing)DemoscenePosition operatorGaussian eliminationCartesian coordinate systemFunction (mathematics)Water vaporRandom number generationZustandsgrößeStandard deviationMedical imagingLengthRange (statistics)WebsiteComputer animation
29:44
PixelAlgorithmPixelFunctional (mathematics)CodeVertex (graph theory)Link (knot theory)Sound effectPosition operatorNumberLine (geometry)Medical imagingDirection (geometry)MathematicsSign (mathematics)AlgorithmShader <Informatik>ImplementationComputer animation
30:37
ImplementationPixelImplementationFunctional (mathematics)System callComputer animationMeeting/Interview
Transcript: English(auto-generated)
00:06
We have Niraj Pandey. I hope I pronounced your name correctly. That's correct. He's a student at Ashoka University and he's studying computer science. He's interested in generative arts, software development and quantitative finance.
00:21
And he's going to talk about creating art with code. So how to use algorithms to create very nice looking things, I suppose. Well, this is going to be exciting, so let's see what you have to present. By the way, where are you joining from? I'm joining from India.
00:40
And where in India? New Delhi. Ah, right. Nice. Very nice. How's the weather in New Delhi? What time is it now? It's pretty good. It's 2.30 p.m. in the afternoon. Good. Comfortable time, right. Excellent. So let's start the screen sharing and then you can go ahead and give the talk.
01:01
Right. Shall I start the screen? Yes, please. OK. So the talk is The Joy of Creating Art with Code. And I'm Neeraj. Hi, everyone. And a little bit about myself. I'm currently a sophomore student at Ashoka University. And my interest lies in software development, generative art, distributed computing and quantitative finance.
01:23
So these are the points for discussion of the talk. So we'll be talking about generative art, the history behind generative art. We'll see a quick overview of how processing.py mode works. And then we'll see how we can use the geometry, algorithms and randomness that frames our generative art.
01:40
And we'll be seeing some quick examples using processing.py. So the main objective or the main goal of that talk is to look at Python as an artistic tool with the simplicity of generative art using processing and pychiral. So what is a generative art? So an art created through the use of an autonomous system is simply generative art.
02:03
That's like the simplest definition you will see. So it uses iterative commands to draw vector based shapes on the screen. And most of the art created draws inspiration from modern art and especially the pop art. And usually an autonomous system is required because without it, it will mostly be a digital art and randomness can be one form of that autonomous system.
02:24
So before we go forward, so let's see how all this came from. So when you talk about the analog art, which is the art which is manipulated by hand, the complexity and scale requires exponentially more effort and time. And when you talk about computers, they excel at repeating processes for like endlessly without exhaustion.
02:45
As you will see, the ease at which we computers can create these art forms contributes greatly to the aesthetic of generative art. In the past, one major challenge which was faced by the early generative artists was the limitation of an output device.
03:04
So the primary source of that time was using a plotter, which is a mechanical device holding a pen whose movements were controlled by the instructions that were programmed into the computer. And one of the first artists to produce a plotter color drawing was Fred and Nick.
03:23
And the painting, the art has been shown on the screen. It's called Homage. And this is one of the earliest best known pieces of generative art. It's called Shkorte by George Neese and Shkorte starts with the standard 12 by 12 rows and it increases in magnitude as we go down the row.
03:43
And it changes the rotation, the magnitude of location change. So generative art is one of the best options when you're working on similar art pieces because maybe you want to create a similar art piece using your hand on a pen and paper. And it might take you hours to produce one.
04:01
So instead, you can just input some simple commands from the computer and you can create thousands of such art pieces in a couple of minutes. So after the creation of Processing, it became much, much easier for artists and creators to design and make computer art. So it was created by Ben Fry and Casey Rees, who worked on the Processing Foundation from the last like 19, 20 years now.
04:26
And Processing is a programming language and environment built with media art communities, you can say. It's created to teach individuals the intro of programming within the media arts context and so as a software sketchbook.
04:45
So the examples we'll be seeing in this talk will be using Python mode in Processing mostly. So it's a good practice to quickly get an overview of how Processing mode actually works with Python. So this is exactly how any function will look like in processing in Python mode in Processing.
05:04
So we have two major functions. One is a setup and the other is a draw. And the setup function is basically it runs once the program is executed and mostly the methods which are called inside the setup function are the creating the size of the canvas, adding a background color and maybe adding noise, adding some blur effects, etc.
05:25
And the draw function runs until the program is stopped, which means it is running in loops. So each statement is executed in sequence. As you can see, if you don't want the draw function to run again and again, you can simply use no loop.
05:42
And otherwise, after the last line is executed, the first line will be executed back again. And if you run this program, you'll simply get a black canvas with a small ellipse or a circle on the screen or the canvas. So most of the art pieces are using mathematical functions like noise, trigonometry, filter methods like
06:01
blur, and we use various algorithms such as L-systems, pixel sorting, Poisson dis-sampling, etc. So we'll be discussing a few in these slides and see how we can incorporate all these mathematical functions and algorithms and create some simple aesthetic art pieces.
06:21
Okay, so we have the random function, which is like one of the most important functions which art is used pretty often. So the use case is pretty simple. It just provides you with a random floating point number between 0 and 1. And random function differs in different programming languages, so it's not like going to be the same how we are going to be using in processing.
06:42
So in processing, random function is used by directly calling random and it returns a random floating point between 0 and 1. And if you want a random number between a range, you have to provide a min and max range. And if you're not using processing, if you're using some other environment like PyChiral, you can simply use the random module which is available in Python.
07:06
Okay, so before we move forward and start exploring art pieces that uses vector operations, shapes, and other methods, we should understand how exactly an artist's canvas looks like when you're working on a generative art. Okay, so the canvas is like a 2D Cartesian plane where each point can be considered as a vector,
07:26
which is a vector in a 2D Cartesian plane that's basically the distance between two points. So as you can see on the right-hand side, we have our Cartesian plane and each point is denoted by x comma y, which basically stores the information on how to get to that point from the previous point or here we're using origin.
07:46
And we can further use operations or linear algebra operations like linear transformation, rotation, to add some instructions to the vectors. And creating a point and a line is again pretty straightforward.
08:01
So if you want to go through all these again, so you can directly go to the processing official documentation and all these stuff is already being mentioned there. So I'll just quickly go through it. So a point can be created by passing an xy coordinate and the processing will add a point to that pixel position in the canvas.
08:20
And if you want a line, you can simply add the coordinates of those two points, x1 comma y1, x2 comma y2, and the processing will add a line in between two points. And if you want to change the thickness, you can use stroke weight. And if you want to change the color, you can add the color by using stroke. And similarly, if you're working with pychiral, you can use set line width,
08:45
which is a substitute of stroke weight. And similarly, you can create a line by using line two and other functions. And these are the very basic examples of how you can use those straight lines and points on a canvas to create some very simple art pieces.
09:04
Like on the left hand side, there are vertical lines of different length and opacity, and they're using some points of random points with various variable opacity. And on the right hand side, we have just lines, but they're using a large set of colors palettes
09:22
and are randomly using those to fill the stroke fill. And the next is OK. So this is a very important function and we use it pretty often. It's called curve vertex and Bezier curves. So curve vertex is an implementation of catalom spline, which is a type of interpolating spline.
09:42
It basically goes through the points. In processing, it specifies the vector coordinate for curves. So this function can only be called in between begin shape and end shape method so that it can create some sort of stroke curves. And these functions allow creating complex forms on a Cartesian plane.
10:04
And on the other hand, we have Bezier curve, which is a versatile mathematical curve in vector graphics. Basically, these are the vector graphics that could be scaled indefinitely and has a series of anchor points and control points. So for Bezier curve, you need at least three points, which is the initial point,
10:26
the final point and one control point or the anchor point. And you can simply call Bezier by providing the three point coordinates and it will create a Bezier curve on this canvas. And similarly, you can use curve two to create a curve on the canvas if you're using PyChiral, which draws a curve from the point A to B
10:44
and it has B and C as the anchor points. So this is how curves of variable opacity and lengths look like when we let the draw function run for a number of times.
11:01
And to implement this, what we are doing here is we are basically, inside the canvas, we are creating a follow which is going from zero to three, so zero to four. So we are creating four points here. So we have X and Y array initialized and on line 17 and 18, we are adding the noise value.
11:21
So for now, I'm not going to tell you what exactly is noise. So for now, you can think of it as a random number generating function. So once we have those X and Y values, we are incrementing the M and N factors and once we are done with the loop, we are creating a Bezier curve with all those four values
11:42
and we are increasing the offset values so that once the draw function is done with one loop, the next Bezier curve should not be formed on the same position there should be a distance in between. And when we let it run for some time, you get some cool looking curves and all these things.
12:04
Similarly, there is another inbuilt function in processing which is curve vertex and it's like we need at least four points to create a simple curve on the screen and you can call this function by simply calling curve vertex and providing the point coordinates, X and Y.
12:22
And here what we're doing on line 13, we are calling the curve vertex and we are going from top left of the canvas to the bottom right and we are also using a line 15 no loop which means we just want the draw function to execute once and on line 13, we are using curve vertex
12:40
which is taking the i and j index of the loops and we are adding the random value between minus 10 and 10 to those i and j index but if we would have run the program with a single curve vertex function, we would have got just a single point on the canvas but we want some curves so we added four, five, six, I think six more points
13:03
so when we run this program, we get these scribble type effects on the canvas and if you add more points, it will make more curves and if you let the function run for more number of times by using frame count check, then it might cover the entire screen. And the next is, okay,
13:22
so we can also create some basic shapes like ellipse, rectangles and squares and in the further videos, we will see how we can implement them actually to create art pieces so ellipses can be created by providing four parameters which is a, b stands for the x and y coordinates and c and d are basically the width and height
13:42
and a rectangle takes four required parameters which is a and b are again the x, y coordinates and c and d are the width and the height and the other four variables are basically the border radius of the rectangle and square takes x and y coordinates and the side length of the square. Similarly, we can create the same shapes in pychile.
14:03
Okay, so one best example is by creating some art pieces which were already been created by artists. So this is an art piece called composition two in red, blue and yellow. It was created by Piet Mondrian. So this is not the actual painting. This is like created randomly with random fills and random shapes.
14:22
It looks similar. It's using just rectangles and stroke colors and on the right hand side, it's the same sketch that we created on the left side but instead of creating a single sketch on the canvas, we are adding multiple sketches and this is one simple example
14:42
where we can just use rectangles. This is very simple and using just rectangles and some random color fill, we can create some cool looking sketch. So to create this, what we're doing is like we are going from top to bottom of the canvas and at each index,
15:00
we are dividing the width of the canvas by a random midpoint and then we are creating a rectangle from the initial position to that midpoint and from that midpoint to the final one. So once we are done creating the rectangles, we are filling them with a random color between zero and 255. So it can be a shade of black to gray, black to white. So once we run the function,
15:21
we get something like this on the left hand side and on the right hand side, instead of using just random colors, we are also using our color palette and then we're choosing colors from there. And okay, linear interpolation. So the load function or the linear interpolation function
15:40
is very convenient for creating motion along a straight path and for drawing dotted lines. So it basically calculates the number between two numbers at a specific increment or a specific increment of time. So the AMT or the amount parameter is the amount to interpolate between the two values and we can say the zero value
16:02
will be the first value, zero point will be the immediate next value and so on. So to understand the linear interpolation in a better way, we can think of something like a gradient fill in a canvas. So there isn't very easy to use inbuilt function in processing called color. So what we're doing here is we are going from left to right of the canvas
16:21
and we are adding a variable linear int value, which is basically mapping the value of index i to zero and one because we want the int value to be very small between zero and one, just like the noise value and then we're using this linear int value to add a color fill. So we are using the color fill as linear int color,
16:43
which is basically using the lerp color function and this lerp color function is taking the initial value of the color and the final color value and it's adding the specific increment of unit point that we created above on line 11
17:00
and once we have this color fill, we are just filling the rectangle we are creating and once we let the function run, we get this smooth gradient fill on the canvas. And okay, so by now we talked a lot about how we can use random numbers or random generated stuff to create these art pieces.
17:22
So unlike random numbers generated that has no relationship between the previous number generated and the next number, like we saw in the previous slides when we draw random points and the graph was pretty much like zigzag form and here instead of that, the graph lines are pretty much smooth.
17:42
So in Perlin noise, the numbers generated are pretty much close to each other and has a relationship with each other and it's more organic in nature and that's because these numbers generated are naturally ordered sequence of pseudo random numbers. So what it means is we can see here,
18:00
okay, after this, so implementing a noise, generating a noise number is pretty straightforward, just like random, we just pass the XYZ coordinate or if you're working on XY coordinate system, then just use noise and pass the coordinates value and it returns some Perlin noise at that value. And sometimes we want that noise value to be constant
18:21
whenever the draw function runs again and again. So we can just fix the noise value to a constant value by using noise seed. And similarly, if you're not using Python processing, you can use the noise module in Python for Python and other environments. Okay, we can see this example
18:41
to understand noise in a better way. So what we're doing here is we are loading all the pixels from the image and what you're doing is like we are trying to add a variable, initialize a variable R and we are using it to fill all those pixels back. So you're creating a variable R. So basically we're looping from top left of the canvas
19:01
and to the bottom right. So we are covering all the pixel values and at each index, we are creating a variable R which is generating a noise value at X offset and Y offset and as noise value is between zero and one only so this value is pretty small and to fill a color value, we want the color to be between zero and 255
19:20
to maintain the RGB index. So we're basically multiplying it by 255 so that we get a color shade between black and white and not just black and once we have all these value, we are updating the pixel index with this color and eventually we are updating all the pixels and once we run this function, you get this cloud-like effect.
19:42
So basically this is just like small, small points but as we are using noise values, all the pixel values are pretty much close to each other so that the noise values are close to each other and to understand this in a better way, we can say if you have a canvas and if you have two points on the canvas
20:00
and those two points are pretty close to each other, then if we try to generate some random points on the, sorry, noise points on those two points, then the numbers will be pretty close to each other and if we would have used random instead of noise, we would have got a canvas with just random points and this doesn't show any discernible pattern also.
20:22
Okay, just a second. All right. Okay, so we can also use noise and some trigonometric functions like sine and cosine waves to create these waves-like structure with radion structures and to implement this, we're basically doing, like we are making a while loop
20:42
and it starts from zero to two pi so we want our points to be aligned in a circular manner so we are adding an X offset and a Y offset which is basically mapping the cosine value and the sine value between zero and 10 because initially these values are between minus one and one and once we have these offset values,
21:01
we are creating a noise factor which we'll be using to create our X and Y coordinates so in a noise factor, what we are doing is we are basically mapping those X offset and the Y offset values and we're also using a Z offset because we want the curves to go in other detection as well so we are mapping those values between zero and 150.
21:24
That's because we don't want our curves to be very small so we want them to spread out across the canvas and once we have the noise factor, we are changing the X and Y coordinates and once we have changed those coordinate values and we are just creating curve vertex
21:40
that we saw in the previous slides and once we are done with this, we are decrementing the radius that we used in the X and Y coordinates. That's because at each time the draw function is executing, we want the next curves to be created at a distance
22:01
different from the initial one and we can also change the RGB values or opacity, whatever you want to do and you can also add other instructions and if you run the program, you get something like this
22:21
so I'll just quickly go through the other slides because we are left with not much time. Okay, so Perlin noise, so it's like a very important function for adding movement to your art pieces and you can also add some noise functions to add grain-like effect on this canvas and this is an example of how you can use Perlin noise fields
22:42
so these fields are basically the 2D fields or vectors each pointing in a similar but different direction as its neighboring vectors and the velocities of these vectors depends on the other vectors only so depending on how we draw these particles, we can generate some pretty cool stuff and as these are used for adding a movement in your art piece,
23:04
you can see that we are creating a noise field where all particles are moving from the right hand side to the top left and to implement this, we are just basically creating some random vector points on the canvas and just appending those vector points to the points object and once you have those points object
23:21
inside the draw function, we are taking the values of that object one by one and storing it inside vector object and we are looping from 0 to 20 and what we are doing is we are creating a noise value which is like we are mapping the x and y coordinates of that point between 0 and 2 pi
23:41
because we are getting the radiance value over here because by radiance value, we can change the x2 and y2 parameters on line number 21 and 22 and once we have created x1, y1, x2, y2 variables, we can add the vertex value at x1, y1 and we then have to update the vector object
24:00
according to the x2 and y2 values that's because once we have a point added to the canvas, we want the next point to have a slightly different direction but as these are using noise values, they will all be directing to a similar direction eventually and eventually if you let the program run for some time, you will get something like this
24:21
and we use heavy use of geometrical patterns and factors and chaotic, like chaos theory when we are working in generative art. A very simple example of a geometrical pattern would be the Sierpinski triangle. So this is a very basic and one of the famous examples of geometric pattern and where we are recursively dividing the triangle
24:42
into smaller triangles and adding a stroke to it and we can also modify the Sierpinski triangle by not just adding a stroke, we can also add some fill inside and we can use linear transformation that we talked about earlier and we can use rotations, we can rotate these triangles, we can use curve vertex to shed the sides of it
25:02
and we can also use recursive approach to create fractals by using vertex and curve vertex. And when you talk about the fractals, the first thing that comes to mind is a Mandelbrot set. So the more you zoom inside the Mandelbrot set, the more similar patterns you are able to see
25:20
and that's the most fascinating part about fractals. And this is being represented on a complex plane where X, Y axis represents a real and the Z axis represents the imaginary part. So we pick a point in the coordinate plane and iterate it and pass it through the equation, Zn plus one, Zn squared plus C.
25:41
And we can also add some instructions of changing the colors and everything accordingly. And similarly, we can create Julia sets, which are pretty much similar to Mandelbrot set and these are basically the boundary points that tends to infinity and then tends to infinity. Okay, when you go deeper inside the Mandelbrot set, we see that the Mandelbrot set
26:01
is extending outwards on the XY plane and creates a bifurcation diagram. And this logistic map is basically a part of the Mandelbrot set. And this bifurcation diagram is created only on a real line because we put only real numbers into the equation. And one fascinating thing about this bifurcation diagram
26:21
is that this method was the first method to generate random numbers on computers and gives rise to a very famous topic called chaotic behavior or chaos theory, which is basically deterministic chaos, something which is unpredictable. So where the small change in the initial state can bring drastically different changes in the final outcome.
26:40
And so we can change an initial change by some margin and we think the final outcome will be slightly different, like you can see the four images, but what we actually got in the end is our deterministic chaos. And the best example to see chaos theory is attractors and which are basically mathematical functions that tends to evolve over time.
27:01
And if you're using processing, you can just use points to create these attractors. And if you're not using processing, there's a very cool library called PyWiz, which has great examples of attractors and you can experiment with them like Swenson attractors, bed-headed attractors and more. Okay, so this is like the second last topic. So we'll see how we can simulate
27:20
the water paint effects or the oil paint effects on the canvas. So the second image shows how we can use the water paint effects on a canvas on a 2D Cartesian plane. So to give you an overview, what I'm basically doing is like, I'm basically creating a shape such as polygon and then starting extending its edges outwards and by doing so recursively,
27:42
I'm passing it through a deformation technique and eventually we will be getting some fine details and fine vertexes on the outer layer, which eventually gives us this cool watercolor effect and further you can also create, use some blur effects or et cetera to add some more features. And so how to do it?
28:01
So I'll quickly take two to three minutes to finish this thing. So first we divide the polygon in, firstly we create a polygon of say 20 sites and append those values to the polygon object. Then we initialized a mid range of 50 and we tried to divide those sites. So we call the function getMid
28:21
and by passing the parameters as the polygon object and the mid variable these are the values we passed are basically the mean and standard deviation in our function. So inside the getMid function, as we pass the two values as mean and the standard deviation, we are looping over
28:41
and we're just taking the previous value and the current value of the polygon and we are just passing them to the getCenterPoint function, which is returning a random number fitting the Gaussian distribution and once we had that value, we can append the previous value and the newly generated midpoint value
29:01
to the new vector object and we can just directly return it and now what I'm doing is like I'm looping from zero to the length of the newly updated polygon. So initially we had some 20 sites of the polygon, now we have thousands of sites and once we have those points, we can simply create the XY coordinates by passing that value of side X and side Y
29:21
with a random value between zero and 25. Right, just give me one minute, I'm done. Okay, so we just pass it, just we are sending the values back to the random Gauss values and once we have those coordinates, we are just creating vertex at X and Y position and this is a random Gaussian method for the scene
29:42
and eventually we'll get something like this and this is the last thing where, okay, this is using shaders for creating oil paint effects and you can check the link for a better understanding or a better approach, which is an essay by Tyler Hobbs. This is the last thing, which is like pixel sorting algorithms,
30:00
which is, I won't be going to the code, I'll just give you a quick overview, I'll just take one more minute. So what we do in the pixel sorting is, it's basically isolating the horizontal and vertical lines of pixel in an image and we are sorting their positions based on a number of criteria. So basically we load the pixels,
30:21
we then pick the original pixel with some excess function, we then pick the next pixel position, change the number of signs and maybe you can also see a change in the direction of pixels, we just compare it and swap the pixels. So, and this is a very simple implementation of it and eventually if you just run the function
30:42
with these values, you'll get something like this and this is, I'm sorry to have to cut you short, it was a very nice talk, thank you very much. If you have some questions, you can go back to the talk call back and just chat with me. Thank you so much. Yes, thank you very much and let me play your applause,
31:02
so let me just do this like this. Thank you, thank you.