This past summer, I worked with two undergraduate students (Alyssa Zhang and Maya Newman-Toker) and one software engineer (John Mancini) on a research project that investigates computer generated artwork. During this investigation, we designed and implemented nine algorithms that generate visual designs. Our algorithms, coded in JavaScript, are built from procedural processes that draw lines and basic shapes onto a digital canvas. These procedural processes were inspired by mathematical concepts, natural phenomena, and artistic trends, but contain many parameters to allow for image variation. We used our algorithms to build a dataset of over 1,000 algorithmically generated artworks, which we recruited reviewers to compare and rate. We plan to analyze the reviewers’ ratings to find associations between different parameterizations of our algorithms and the response of reviewers to the resulting images.

- Make a real time feedback into the behavior of your distributed systems. Errors in real time allows you to not only experiment with confidence, but respond instantly to get things working. Close this talk is on algorithmically generated visual designs.
- Michael Wehar: We investigated how computer algorithms can be used to generate visual designs and artworks. We did this by designing and implementing nine algorithms. Each algorithm generates a different type of design or a different types of artwork. Next to it, we actually have a blog article about each of the nine algorithms, and we encourage you to take a look.
- So now we're going to show you a video that'll demonstrate the drawing processes. Each of the algorithms can be varied based on these parameters. This is called the wrapping paper algorithms. Also, we have a full length video showing six of our algorithms running.
- framework allows you to design drawing algorithms in JavaScript. It'll actually draw them onto an HTML canvas. Our drawing program will take in one of these algorithms, it'll run it, and it'll display the resulting images in real time.

Jamaica. Make a real
time feedback into the behavior of your distributed systems
and observing changes exceptions. Errors in
real time allows you to not only experiment with confidence,
but respond instantly to get things working. Again.
Close this
talk is on algorithmically generated visual designs.
So again, my name is Michael Wehar, and you'll see my collaborators,
John, Maya and Alyssa, and each of us introduced
our own algorithms to generate artwork, and were
going to tell you a little bit about our motivation and how we started
doing this. So we
wanted to bring together artists and computer scientists to develop a
better understanding of drawing processes. And we also
wanted to explore how programming can be used as a tool for generating
visual designs and artworks. And we had several questions.
We weren't sure what the answers were, and we wanted to investigate these.
What kinds of designs and artworks can algorithms generate?
Can generated artworks be appealing? And how can drawing processes
be improved based on user feedback?
So this is what we actually did. We investigated how computer algorithms
can be used to generate visual designs and artworks. We did this
by designing and implementing nine algorithms.
Each algorithm generates a different type of design or a different type
of artwork. We coded these algorithms in JavaScript,
and these algorithms basically just draw lines and
shapes onto a digital canvas following a certain procedural
process. And these procedural processes were inspired
by mathematical concepts, natural phenomena and artistic trends.
So here are the nine algorithms that we implemented,
and you'll see who the author was of each of them. Next to it,
we actually have a blog article about each of the nine algorithms, and we
encourage you to take a look. So if you see an algorithm that's interesting
to you, please do read more about it.
So now we're going to show you a video that'll demonstrate the
drawing processes.
So this is our first algorithms, called geometric patterns.
And on the left you can see it actually drawing the image step
by step. And on the right, you can see a list of parameters
that were used to actually generate this image.
Each of the algorithms can be varied based on
these parameters. So this is the final image
here on the left. Now I'm going
two show you a different image that was generated with the same algorithm,
but it was given different parameters.
Okay, now I'm going to show you one more algorithm. This is called
the wrapping paper algorithms. This was done by Alyssa,
were you can see the parameters on the left, and hopefully
you notice that these designs that were generated with wrapping
paper, they just show a lot of different shapes
drawn in a systematic way, overlapping with each other.
And it kind of looks like some wrapping paper designs.
Now, if you want to see the rest of our algorithms. I just showed you
two. Please take a look at our websites. Also, we have
a full length video showing six of our algorithms running,
which you're welcome to take a look at on YouTube as well.
So now we're going to talk a bit about our drawing program.
So in order to understand how it works, we have to tell you about
this framework that we built. These framework. It's still a work
in progress, but it allows you to design drawing
algorithms in JavaScript, and it'll actually draw them
onto an HTML canvas. Our drawing
program will take in one of these algorithms, it'll run it,
and it'll display the resulting images in real time.
Our drawing algorithms have to be written in this framework
where you have an initialize, start, pause,
reset, and draw one step function.
You can see our public repo@GitHub.com slash
algorithmically generated.
Here's our public repository on GitHub, and you'll see
that there's a lot of files here. There's three different pairs.
There's one for ALG dots,
ALGP lines. Those are
three of the different drawing algorithms. If you're just getting
started and trying to implement your own drawing algorithm,
please start with the ALG js and algorithms
js files. There's also a very extensive readme
file that goes into a lot of detail about what is this
framework, how does it work and how can you get started? So we're going
to take a look at the ALG js and the params associations
with it, and we're going to start manipulating it to produce some interesting
images and visual designs. So you'll see
on the left side of the screen a user interface.
We actually have a front end web application that's going
to display a canvas and have several buttons there. And when we
click start, it's going to load in and execute this
algorithms. On the right hand side you'll see dots.
That's the dots algorithm. And the dots algorithms
is a dictionary that contains various methods
which are going to make it runnable, and you're going to be able to
run it within that front end web application. So if
we take a look at the code, you'll see various methods associated
with the docs algorithm. There's draw, one step,
reset, initialize, pause, and start together.
Those are the methods we need to be able to start creating
these visual designs and artworks. Now,
we also have a params file associated with the dots
algorithms. Let's start modifying these parameters and
see how it affects the images. Say we
adjust it so the transparency is just one.
You'll see that all of the circles are now black.
Now, if we make the radius larger, say,
50,
the circles are much larger. And now almost the full canvas
is filled. We can even adjust the speed.
So if we wanted there to be some delay so that we could see our
drawing happen more slowly, we can make that speed
value larger to increase the number of milliseconds there
are for the delay.
Now, let's adjust the parameters back the way we want. And let's
start manipulating our algorithm and see what kinds of interesting designs
we might be able to create. Now, I decided to make
some changes. I decided to create this new member
variable called x and this new variable
called y. They're going to keep track of
where our paintbrush is located, and I'm going to start them at the
center of the screen. So x is going to be width divided by two,
and y is going to be height divided by two.
And just to show you what this looks like, we're going to increment
Alg dots x and increment alg dots y.
Now, we should have the paintbrush move across the canvas in
a line.
As you can see, we gradually drew a line across the canvas.
Now, I modified it so we're not just incrementing, but we're also wrapping
around. So when we reach these end of the canvas,
it should wrap back around and continue drawing. Let's test
that out.
Great. It worked as we expected. As it was drawing,
it wrapped around the canvas. Now let's try some more complex
things besides just drawing a line. Maybe we want to add
a little bit of noise to it, a little bit of randomness.
Let's try that out. I'm using the math random
function here. Let's see what happens.
But there is some noise there. It's not perfectly
aligned. Let's add a little bit
more to the x coordinate at every step.
Let's see what happens.
Now we're drawing what looks almost like a striped pattern.
Okay, now let's try to incorporate some functions from trigonometry.
And were going to use the number of steps that
have elapsed thus far to help us compute an angle,
which we feed into those trigonometric functions.
So here I'm going to increment x by ten at
each step. And I'm going to increment y by ten times
cosine of this angle. And this angle
is going to move between zero and two PI as the
number of steps increase. So, let's see what
is graphed it.
You can see we have an interesting design that combines different weights.
Now we're going to do something a little bit different. Were going to try to
draw a spiral design, and we're going to adjust the
params and we're going to adjust the algorithm.
And as we adjusted the algorithms, we made these
circle's radius increase a little bit each time and
also the transparency increase. And now
we're no longer wrapping around when we go outside the
image's boundaries and we've adjusted the
functions we use to increment X and
Y. So let's see what happens.
And these we go, it's drawing a spiral pattern.
And now you can see, just writing a few lines
of code were able to create some interesting visual designs.
Now, these ALG dots algorithms is just a simple example
you can play around with. But I do encourage you to take a look at
our other algorithms and some of the videos showing how we generate
these other images and other designs.
If you liked these designs and you liked our
framework, well, we encourage you to contribute. You can contribute
to our project by implementing your own drawing algorithms
following this framework and share it with us. We would love
to see your images and potentially collaborate with you
all. So we are looking for reviewers to review
images that we've generated. And finally,
again, this is an open source repo. There's a lot of improvements
we can make to our drawing program, and we would love
for any users to submit pull requests,
submit issues, and you can contact us anytime.
Thank you so much.

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways