Dividing and Colliding

Dividing and Colliding

generative art by Ike Moore- 3178573

The Video
Video Link: VIDEO LINK

Screenshot of Work
One of the 4 palettes

View Generative Art Link
Artist Statement:
“I was inspired by cellular automata examples like Conway’s game of life. I wanted to make a generative piece where different elements were interacting with each other in unforeseeable ways. After having success with an earlier activity I decided to work off of it to create a bunch of constantly dividing and colliding circles to create the piece.”

The Rules:

  • Colors palettes are randomly selected from 4 types
  • Circles collide on contact
  • Circles split in half after leaving each circumference of the center circles
  • The center of the center circles can be changed by clicking anywhere
  • Circles are deleted after leaving the boundaries of the screen

The Process:

Setup Code

    • First in the setup I added all the circles to an array as objects using a for loop. I passed all the information I may need about each one: x-position ,y-position ,size ,color and one more color variant that I tried to make the circle switch to but didn’t end up making any notable difference.

Functions

  • I used the draw function to loop through and update the circles(using another for loop going through the array).
  • A lot of the functions I didn’t end up using because they didn’t really fit or ended up not working at all(combine shapes, draw lines) but for the ones I did use I did in a very similar process to what I did instancing all the circles in the setup.
  • The Update function loops through the circle’s array, the collide function loops through the array again but compares it to the circle called in the update function, the move function is the only one that doesn’t loop as it just moves the circles and checks if they have gotten out of bounds and if so sends it to the remove function which destroys the circle(AKA it just splices it from the array).
  • The last important functions just check for the radii of the center circles and if any circle leaves any center circle radius(of which can be changed by clicking via the mouse Pressed function) and if they have, send it to the split shape function which halves its size and instances a circle of the same size in the same spot.

wavy

video: https://ocadu.techsmithrelay.com/iyyY
code: https://codepen.io/99christina/full/VwjyOwK

group-6

what did i make?
i made generative art using the p5.js library. it’s a bunch of wavy lines that move and squiggle together.

why did i make it?
i wanted to make something that flowed and moved in a relaxing and chill way. i was interested in using lines because from the previous practice we did in class, i liked that we could use something simple to make lots of different creations. i wanted to explore the idea of using few elements and basic rules to form unique pieces.

group-3

how did i make it?
i was specifically inspired by sol lewitt’s wall drawing 797 and creations on p5.js made by users “venbszhou” and “rapley”. i liked the imperfection of the semi-horizontal lines in sol lewitt’s wall drawing, and the calming movements that the artists created with p5.js.

group-4

my rules and explorations
there were a few elements i played around with before settling with the “final” one. i like that with code, i can comment out a line, or change a number, and the whole piece can look different. so, i experimented a bit with strokes, gradients, colours, window width in the process.

to recreate your own version, here are my rules:
1. start with some lines, more than 8
2. in a loop, slightly change the lines’ position and curve
3. feel free to play with fills and transparency to see shapes overlap as they move

group-5

 

Serenity

 

art2-copy

For this Assignment, I wanted to make an interactive piece, by creating generative art using Touch Designer and the app Touch OSC.  I wanted to focus on something peaceful, abstract which is why I called this piece Serenity. I want to allow the user to explore their Serenity through Touch OSC.

Serenity is the tranquil balance of heart and mind.

– Harold W. Becker

-Process-


Touch OSC simple panel
Touch OSC simple panel

I used one slide panel to enable audio and the rest of the slide panels to alter the features in the art piece that will change its forms and textures. The reason I chose Touch OSC it is because you can simultaneously blend other attributes within a parameter using the faders and buttons. Inside Touch Designer, you can drag the faders into an attribute. For example, dragging 1/fader2 to the Brightness in the Level Parameter. 

osc

This piece only uses 4 faders and 3 buttons.  At first, I wanted to do to use all of the features, but I was not satisfied with the way my piece came out. I did not use a lot of components,  just a few, and played around with the attributes in some of the parameters.

Overall map

overallmap

Part 1- OSC Component

Add the “select” component based on how many faders/button you want then connect it to a null, or math if you want to adjust the values. I dragged 1/fader5″ onto “volume” and 1/toggle3″ into the play button. I used Foxwood-Lavender as my audio.

screenshot-410

screenshot-411

Part 2- Building the object

I added a “Sphere” and a “Sort” that allows you to sort points. Add a “Particle” and either add/change the values in it. I added “1/toggle1” in the “Tub Period” in order to be able to increase movement. Proceed by adding a “Geometry”, “Camera”, and a “Constant” and drag the “Constant” into the “Geometry” to give it a color. Connect it to a Render.”

screenshot-412

Part 3- Adding effects

I added and dragged faders into these effects such as levels, blur, edge, and proceed to connect all of these into “composite”.  I then added “Lookup” with a “Ramp” to give it a background color. Lastly, I connected it to a “Level” because I added “1/fader5” to the opacity (the same fader used for the audio), and that lets the whole art piece show up along with the audio.

screenshot-414

– Gallery –


art2-copyscreenshot-415_edited

art1-copy

screenshot-417_edited

screenshot-416_edited

Today, I am choosing Serenity.

 

Generative art

Zhiwei Luan

3173288

d89d97fdeaf8bd95d866611dcc22eb8

https://pan.baidu.com/s/1sfG6AsMdpKzq3vppVQdbtA

Extraction code: 3t98

My generative art is inspired by the movie Matrix. I watched this movie when I was very young. At that time, I saw that one shot in the movie was a rain of letters on the screen. I thought it was so cool. I want to accomplish the same screen effects by myself. This artistic generation can be regarded as fulfilling my childhood wish. I changed it to raindrops to make it more artistic and make the whole look more like rain. But if you look closely, you will find that every raindrop is a letter. It is like a raining sky in the dark night. The green color represents the vitality that rain brings to the earth. Staring at it will bring people a kind of tranquility, just like lying on the grass in the wild at night and watching the raining night sky.

 

Rules:

  1. Draw a canvas and fill it in with a background
  2. A row of letters falling from the top of the canvas
  3.  The letters began to fall irregularly from the top of the canvas
  4. Need visual impact and sense of technology

 

Trial process:

b649c6f24facff7490dcab552c90fc0

4719e2c4d1b58f84cda3962987e52ae

aa23a1a7b734fb196e7ee202e32de60

92fea72bedf90e37699139f466bd800

fa865aa19e8be409ad082edbf572dff

546613b477bf7ce60f4708bef0d38f9

I cannot generate a link because of internet censorship, so I paste my code here.

<!doctype html>

<html>

<head>

<meta charset=”ZL”>

<meta name=”ZhiweiLuan”/>

<title>DIGF</title>

<style>

body {

margin: 0px auto;

}

#q {

width: 100%;

height: 100%;

margin: 0px auto;

}

</style>

</head>

<body>

<div class=”img”>

</div>

<canvas id=”canvas”></canvas>

</body>

<script type=”text/javascript”>
var canvas=document.getElementById(“canvas”);
var context=canvas.getContext(“2d”);
var w=window.innerWidth;
var h=window.innerHeight;
canvas.width=w;

canvas.height=h;
context.beginPath();
var fontsize=4;

var count=Math.floor(w/fontsize);

var str=”ABCDEFGHIGKLMNOPQRSTUVWXYZ”;

var arr=[];

for(var i=0;i<count;i++){

arr.push(0);

}
var show=function(){
context.fillStyle=”rgba(0,0,0,0.05)”;

context.fillRect(0,0,w,h);

context.fillStyle=”greenyellow”;

context.font=’700 ‘+fontsize+’newroman’;

for (var i = 0; i <count; i++) {

 

var index=Math.floor(Math.random()*str.length);

var x=i*fontsize;

var y=arr[i]*fontsize;

context.fillText(str[index],x,y);

if(y>h&& Math.random()>0.99){

arr[i]=0;

}

arr[i]++;

}

}

 

setInterval(show,30);

context.closePath();

</script>

</html>

 

(Generative Art Project) “Life of Camellia (2020)” Installation Artwork

 

capture

Tae Nim 3170229

Exp2_Assignment 3: Generative Art

“ Life of camellia” (2020) is a Mixed-media Installation Artwork under an exhibition manner that used generative and algorithm artwork. Media art: video, used cellular automata, to generate the imagery of snow flake and camellia by using the ‘Conway’s Game of Life;’ and, a three-dimensional sculpture created under specific algorithm that inspired by “triangle discovery (2020)” by Tae Nim. “

capture  

Sculpture

  • Sculpture design inspired by “Triangle Discovery(2020),” Algorithm art that is created by Tae Nim. I thought it would be interesting if I did two-dimensional work into a three-dimensional volume. •The algorithm focus on using various colour and randomness. I thought everyone has different views and colours, so I thought it would be interesting if I can express those two keywords with the work of art.
  • I wanted to create an interactive artwork where people can interpret their personal experiences and have a freedom to come up with their thought by showing my definition of the life: Overcoming hardships to bloom the flower, result. Instead of colouring the triangle, I purposely used the different texture of clear plastic to fill the triangle so people can also focus on the “variety” of the colour that I used instead of just watching the video that I made. Likewise, I wanted to make a sculpture so people can see my lens in a different perspective and various way.
  • , I wanted the audience to interact with the sculpture by using their multiple sensory to enjoy the video in various ways. I did not intentionally give a straight message since I wanted them to explore the work and come up with their answer from their lens.
  • I also focused on communication, the thesis that I am currently working in OCAD university. I just showed my personal view on life, and I wanted them to watch it and come up with their answer instead of me answering. I wanted to share thought and communicate through art.

Technical Aspect

For me to create a generative artwork, I had to go through many practices, tutorials, and trial. Game of life is a generative art that goes under the absolute rule. Each row and column, there are cells. Although, other cells that are around another section is called neighbour. If they have a total of more than three cells, they generate a new section, and it called “birth.” If there is a birth, and there is a death of the cell. Understanding of this mathematical algorithm was hard to learn.

However, it was exciting that he tried to express our human life into a different form. Therefore, I also tried hard to change the pattern to represent the imagery of the life I thought. The timeline of the video goes backwards, and the patter also goes upward. It means I wanted people to flashback their personal experience and come up with their conclusion of life.

Final Work

 capture

Video of Art of Work, “Life of Camellia. (2020)” is a video that shows the view of audience who participating installation art work.

Video of Installation  is a video of the work that I presented through the computer screen as a component of an installation art.

Video of Generative Art is a cellular automat based on Conway’s Game of Life. I upgraded from the work that I did from the last practice.

There are also a link for code.

Process

capturecapturecapturecapture

Technical Process

There is a presentation video of the technical process.

-It is an upgraded version of the practice that I worked for the last activity.

-Last time I was able to put the randomness and variety, which is the concept that I practice on the “Triangle Discovery” which is the algorithm that I worked at the very first activity.

-However, I had some challenge to change the pattern, so I focused on changing algorithm and create a pattern that could symbolize snowflake and camellia.

-After a few failures, I produced an idea what if I am deleting some let function so it cannot generate a cell in a specific direction and cause of developing circular pattern of the “birth” and “death.” It was successful, and I was able to generate the diagonally moving design.

-The reason that I did not do three-dimensional cellular meta or cam movement is that I was creating the installation art, and people already seeing the video in many directions and different kinds of lens, and if I am making the video in 3-D and rotating the view, it would make the audience more complicate to view the work of art.

-Therefore, I am happy that I accomplish the goal that I made at the beginning. Even though it might look simply, I wanted you to know that it takes much time and process to produce the idea of making the change of existing code.

 

{Cellular Shadow}

CELL DIVISION

screenshot-2020-10-27-at-7-57-12-pm

Screenshot of a single cell dividing from my project ^

We are aware that cells are the building block of life, they have a lot of complexities and processes that go on inside them that we cannot see in out daily lives, However most of these processes are results of simple rules. For This project I focused on one such process, the process of Cytokinesis or Cell division where after Meiosis or Mitosis(where genetic information is copied or redistributed) the cell properly divides into two identical cells. It is a really fascinating process which allows us to do some wonderful stuff like self healing, reproduction and during the process of zygote formation a very interesting process occurs where a whole variety of complex 3D geometry of life emerges from simple rules with some internal parameters (chromosomes)that govern the division of the base Zygote which is spherical in Humans. Our bodies emerged from a simple sphere!!! now the knowledge of the specific rules that give rise to such complexities like the life we see and are is still obscure and research is going on but we have been successful in finding our own algorithms (Conway’s Game of Life) and even finding some that actually reproduce natures own geometry (Turing Patterns).  This is the main inspiration behind my project.

 

RULES

My project is an interactive project made in TouchDesigner entirely using TOPs(Texture Operators). The rules of my system is a combination of two different types of automata systems, one is Turing Patterns and another one is an edge detection algorithm used in the Edge Top of TouchDesigner. heres a brief explanation of how these two work:

Turing Patterns:

Introduced by the legend of computers himself, Alan Turing proposed a concept that shapes and patterns found in nature can arise naturally and autonomously from a uniform state. It arises from simple rules of reaction and diffusion. where two substances(mostly solutions) will first diffuse(mix into each other) then react due to local differences. the reaction is governed by certain weights, parameters or just chemical in nature.

screenshot-2020-10-27-at-7-36-38-pm

Edge Top

The Edge TOP finds edges in an image and highlights them. For each pixel, it looks at the values at neighbouring pixels, and where differences are greater than a threshold, the output’s value is higher. Add a feedback loop to this operation and you create an automata system.

The addition of these two operations give rise to the cell division like phenomena of my project. This type of phenomena was first observed in the Grey Scott model of reaction diffusion but in this version where the strength of the Edge Top acts like a control for the cell division and therefore allows us to control the overall chaos of the system.

PROCESS

I started by creating a simple reaction diffusion program by simulating the process of reaction and diffusion using a technique that involves blurring and sharpening the image every iteration. this can be done using feedback loops. You can read more about this technique here: https://www.researchgate.net/profile/Andrew_Werth/publication/280626953_Turing_Patterns_in_Photoshop/links/55bfef9908ae092e9666a3ce.pdf

screenshot-2020-10-27-at-7-23-38-pm

 

Then I add an Edge Top, add a few other gradients and control parameters using Ramp and Level Top and eventually I get a system that distributes itself uniformly to stabilise.

screenshot-2020-10-27-at-7-45-25-pm

screenshot-2020-10-01-at-10-46-33-pm

Video: https://ocadu.techsmithrelay.com/Zgzg

Exploring the different parameters of the system reveals different forms and properties of this system like the ability to replicate, send oscillatory information as waves, form a central structure like a nucleus. Here are examples of three behaviours:

screenshot-2020-10-27-at-7-49-14-pm

Video: https://ocadu.techsmithrelay.com/0qG5

Forming hexagonal arrangements and realistic division resembling plant and animal cells.

screenshot-2020-10-27-at-8-10-06-pm

Video: https://ocadu.techsmithrelay.com/wMyx

Individual oscillations seems to create its own automata reaction creating collective wave like oscillations throughout the system which makes them look like they are communicating.

screenshot-2020-10-27-at-8-09-20-pm

Video: https://ocadu.techsmithrelay.com/F5W8

A single cell, oscillates unpredictably and looks like it is visibly struggling to divide like a living organism.

Interactivity

I do not have a kinect or any depth sensors so I just used videoFilein + Level TOP to basically map out the edges using contrast and other adjustments and overlaid the cells directly on this input.

screenshot-2020-10-27-at-9-32-18-pm

The cells take the shape of the organism/human or object in front of the camera. While not exactly like the way cell division works in real life the way seeing these cells arrange themselves given any geometry is fascinating. These cells do behave very much like very simple organisms. What. is life.

I have included the TouchDesigner file below for anyone who wants to explore this piece.

https://drive.google.com/file/d/1NDxK0fnxDg5_Uz1Xc5iZzGgIHX96LTyw/view?usp=sharing

THANK YOU 🙂

Variations of Open Paths

The video repeats most of the text on this post.

The work can be found here

The code can be found here (feel free to use)

Dream logic manifests in the feelings, forms, and behaviours of the objects that live within the dream spaces they govern. Like other things, it is compelling because it exists in a place between elusive chaos and predictable order. I think this is what makes it an interesting subject to involve with the generative art process; characteristic of both is the ability to elicit primal feelings through the unexpected expression of an internal logic.

I was interested by the ideas in Sol Lewitt’s Variations of Incomplete Open Cubes. By exposing and hiding different parts of a shape, the mind is given space to fill in the rest of the information. This can lead to imagining a more exciting and freed form than the original structure. I wanted to apply this idea to the unimaginative notion of a room as a box. By using randomness to create variations of suggestive cube structures and compose them together, I was able to see new forms emerge to shape inhabitable dream spaces.

cede378856275afb42733d26ca466699

This work consists of a path made of 100 randomly generated consecutive points, and a series of forms (lines, planes, tunnels) that are derived from the features of this path, accumulating one layer at a time. The expression of this system is inverted in sequence, however. The derived forms are visible from the start, hinting at the eventual journey of the path, but the path itself is slowly revealed over time.

screenshot-2020-10-27-184517

Process

The rules were built on top of each other through experimentation, using three.js as the visualization and coding tool.

1 – First, 100 randomly consecutively generated points. A point must be 1 unit away from the previous point along x, y, or z axis in positive or negative direction.

2 – Lines are drawn at points in the path where the path reverses back onto itself (ex. point A to point B, back to point A).

edit-2

Here are early renders that demonstrate this rule. Below, you can see how the path reversal lines hint at where the path will lead, but cannot reveal it exactly as there are many path possibilities that can cause each line.

rgb-axis

3 – Planes are created at the points where there are two red lines drawn consecutively in the same direction. These are places where there has been a lot of back and forth movement coinciding with each other: a high density of deliberation over which direction the path will take.

Early trials of marking the path reversals (shown below) included various sizes and colours of planes and spheres.

screenshot-2020-10-25-161759

screenshot-2020-10-25-160646

screenshot-2020-10-25-175311

Ultimately I chose to stick with one unit sizes and primary colours due to their simplicity and popular reference to simple units and axis.

screenshot-2020-10-25-193227

4 – Finally, the tunnels are drawn connecting these planes, visualizing a higher order journey through the path’s moments of deliberation and reexamination.

screenshot-2020-10-25-203058

Resulting spaces can vary quite a bit. The exact details on determining placement, colour, and rotation of forms can be found in the code comments.

screenshot-2020-10-27-184332

screenshot-2020-10-27-184019

Sound wave

cover
Link of the presentation

working links

Artist statement

Sol LeWitt’s wall drawing #95: On a wall (paper) divided vertically into fifteen equal parts, vertical lines, (not) straight, using four colours in all one-, two-, three-, and four-part combinations.

  • This is an audio-visualization installation. The inspire of it is from Sol Lewitt’s wall drawing #95 where he used limited lines to create endless forms of art. It makes me believe that the constrained rules in an artwork could be a great starting point of creating endless and born variations. I then make this installation, the constraint is each fixed start and end point of each links and the number of the lines (80). The only variable would be the action of line moving pace and shapes. Those lines will wave based on the sound they “listened.” In my example, I made a gentle audio so the line would move like a flowing creek, that shape of moving enhance the topic of the song and my idea as it states the music in a special way.

  • My initial goal was to find another perspective of audio combining with shapes. However, I prefer not using those closed geometric shapes as they could not show the soft and fine texture of my audio, then I was inspired by the wall drawing #95. Then I made a goal to use limited numbers of lines, not for exploring how the color could be manipulated, but the interactive perform with the group of line acting with the music.
  • The way I used to achieve my goal is to use the data from the audio because audio is shaped by sonic wave, it is just like how the wave influences the line groups. And because the sonic wave of different sound has endless forms, thus I could use data from the sonic wave to create endless sound waves. When I opened the math CHOP I could see their channels with sound frequencies. I then used those data and manipulated them with the shape of those lines.

 

This is the shared link of the google Drive, which includes the toe file.

 

Operator overview

overview-min

Tutorial
1-1-min
2-1-min

 

Flower of Forms

Link to Project: https://vimeo.com/472052087

Artist Statement

Hello Atelier, this is my final generative art project called Flower of Forms It is created in Blender as an animation that utilizes the array modifier and an object offset to clone and manipulate cubes into rotating spiral forms.

My motivation for this project was my experiences with meditation and astral projection in my early adulthood and their relation to Plato’s philosophy exploring the Theory of Forms, which is an idea dimension of perfect archetypes from which all physical manifestations arise. My experiences lead me to a vision of what I believe exists in this abstract world and I wanted to illustrate that experience through a mandala of primitive forms, representing all the possible states in which these archetypal cubes can manifest in the physical world.

I made this by first starting out with a cube and attaching an array modifier and creating an empty object that was offset from the cube diagonally. I then set the array’s object offset to the empty object and cloned the cube 32 times. Next I rotated the cube on a 45 degree angle. I created a second empty object and offset that by -1m on the y axis, and attached a second array to it, turning the empty object 30 degrees on the x axis I then used keyframe animations to plot out the rotation of the first empty object from 45 degrees to 405 degrees over a period of roughly 16 seconds or 400 frames. I also applied a Noise texture in the background set to 4D and scaled it from 0.1 to 8 over the 400 frames. Finally I added a somewhat reflective material to the cube and added 5 lights(centre white, top green, bottom pink and left/right yellow) to allow a reflective pattern to emerge in the animation that highlighted certain aspects and interactions between the cubes.

 

Tutorial

Rules

Create a cube or any primitive

tutorial1

Create an array of 32 clone primitives offset by an empty object.

tutorial2

Translate the object 1.41m on y axis and 1m on z axis

tutorial3

Rotate 45 degrees on z axis

tutorial4

Create another empty object, translate object -1m on y axis

tutorial5

Create an array of 11 clones on the original array offset by the new empty object

Rotate the new empty object 30 degrees on x axis

tutorial6

Over a period of 16 seconds, rotate the first object from 45 degrees to 405 degrees (or infinitely)

tutorial7 tutorial8

Select animation in Animation Window go to Key > Interpolation Mode > Linear

tutorial9

tutorial10

Set a Noise shader to the background scale it from 0.1 to 8 over a period of 16 seconds

tutorial11 tutorial12

Set the camera at your preferred distance and render the animation.

Thank you for taking the time to view my documentation!

Exp2- Flower Lines

Art Work

Flower Lines

Video

Link to Video: https://youtu.be/_Opn4bUMjDE

 Statment

I used ink, pen, and watercolour paper.

I love drawing flowers and using ink. My goal was to create something with flowers and ink. I liked the idea of using line work to capture the shape of the flowers. I like how each flower has a different shape and the patterns created within the flowers. I also like the effect the pink and purple ink gives to the background and flowers.

After staring at it for a while it looks kinda trippy.

 

Process

I used a black Muji pen in size 0.38 on watercolour paper to draw the flowers and the lines following the shape of the flowers. I used the ink to add colour to the flowers and background. I didn’t have any specific flowers in mind when creating this, I just created a general shape of flowers.

Rule

  1. Use watercolour paper (or any paper) and use a black pen to draw flowers.
  2. Within the flowers draw lines that follow the shape and curves of the flower.
  3. Using ink, add coloured lines (you can add as much as you like)
  4. Continue steps 2 and 3 until you have filled all the flowers
  5. Using one ink colour, outline the flowers and alternate between the two inks until the background is filled. (use the top image under “artwork” if needed)