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

 

Colour Battle

  • Video / Process: https://ocadu.techsmithrelay.com/Lwep
  • Working links: https://editor.p5js.org/MichaelSinn/sketches/TeEPR1c4s
  • Artist statement: For this assignment, I wanted to create a pseudo simulation.  What I ended up doing was creating a live representation of growing “civilizations”.  Each civilization is represented by a colour, either white, green, blue or red.  These civilizations are randomly placed throughout the map.  Each turn, each civilization grows and converts tiles around it to their own colour.  This continues until the entire map is one colour.

Metro Cube

Nazheef Rahman

 

Artist statement:

This Generative art is heavily inspired by the DVD screen saver with its diagonal aesthetics. At first, my goals were to have square shapes appear from the middle of the canvas which randomly sets itself to a random x/y towards the edge of the canvas which they are stacked beside each other until the canvas is full or reaches the middle where it resets/refreshes the animation loop. While exploring the code I came to see that while the shapes are moving exponentially it draws a trail, I seem to like the concept/aesthetics so I built onto it where the shape would bounce off the canvases boundaries with different colors and sizes added on to it with each click.

dvd

 

 

HTML: https://pastebin.com/DxqjgMs8

Javascript: https://pastebin.com/W8LYxx3j 

CSS: https://pastebin.com/Z71DSpjM

 

Process:

atprosses2

You will first need your variables, Running which is to follow your mouse cursor, canvas, context, your width and height of the canvas, colors, the initial array + count/er, and finally your shape which in this case is a square. Later on, you will end up adding more variables to your code so this may vary.

atprosses3

This will be your code for the canvas, a touch I did was to apply the border design.

atprosses6

Sometimes you will want to have random variables for many uses such as size or color, this function will help you with choosing its random value.

atprosses5

atprosses4

These functions will be your draw functions, the first one will be for your desired shape or object. The second function will be my core draw function where it basically is telling it to bounce when the square touches the width and height (boundary) of the canvas.

atprosses7

For human interactions, you will need to add ‘listeners’ which in this case is the event listeners. ‘Mousemove’ will be your shape following your mouse cursor and ‘click’ will be your randomly generated shape after everytime you click within the canvas.

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>

 

LIFE movement

 

 

20201028_035145926_ios

 

 

Artist statement:

I was starting to think about what is life?  Can we define what life is? Can we create life?

It’s very hard to answer those questions, every person has their definition of life.

In my opinion, life is not just a creature showing on your face, life is a movement driven by energy. A chemical reaction is a living movement, a figure’s animation is a living movement, anything that makes people think it’s moving in a certain pattern is a lively movement.

My classmates Ryan and Kyle’s work inspired me that life can be a certain form or a pattern.

So, my work is based on the basic rule. I created an animation that looks like a new creature with different colours and different shapes flying like a bird into a dark sky.   The work was made on my iPad pro, which was not created by any coding software. I want to create it by my hand, I don’t want to make it too randomized and too complex.  Every frame has been drawing by my hand.

Rules

1 Find a blank space, you need to draw various triangles, the size can vary, the quantity is unlimited.  

2 You have to make sure those triangles can form as different shapes. 

3 You may not able to make too many random triangles, because that will be hard for you to make them organized. 

4 You have to fill the same colour, but you need to make a colour brightness gradient from the brightness to the darkness. Ex: Top to the bottom, the brightness goes down. 

5  Make different colours based on the same brightness role and combine them to create an animation.

Working process

step 1 

Using iPad pro sketchbook software to Create a symmetric figure with different sizes of triangles. This figure looks like a bird mixed with a snake,   it has two wings and a big forehead.  

 

20201026_154326000_ios

 

Step 2 

Adding more small triangles to illustrate small feathers falling from the wings. However, those small feathers have to be arranged as a triangular shape.  

20201026_165513000_ios

 

Step 3

Adding straight lines inside those two wings also creates different sizes of triangles.

20201026_201725401_ios

 

 

Step 4

I filled a red colour into those triangles; each colour brightness is different;  the colour brightness has been decreasing due to the order; up to bottom, left to right on the left-wing; And the right to the left on the right-wing. Compare with Each colour brightness,  the difference should less than 10. Ex; The very bright colour red’s brightness is 100, the other red colour beside it should be less than 90.

 

20201026_201717978_ios

 

Step5

Changing different colours but using the same brightness rule.

20201026_201708317_ios 20201026_201701647_ios 20201026_201651262_ios 20201026_201618481_ios 20201026_201633986_ios 20201026_201642767_ios

Step 6

Making an animation; combining different pictures with different colours and different wings positions; Each pair wing has been rotated in different angles. In order to make it looks more specific, here is the whole image that include multiple layers that stacking together. 

20201027_213311000_ios

20201028_013443828_ios

 

Step 7

Create an animation by using procreate

Adding each layers, transform them into each frame. Using Animation Assist to create a ping-pong video; a video can be played forward and backwards.

20201028_013934000_ios

 

Final work 

20201028_014645537_ios

 

 

(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.

 

The Expansion Of The Mind

The Expansion Of The Mind

Artist Statement

Elijah Silverman

 3178871

The Project Is Available For View At:

https://editor.p5js.org/3178871/sketches/G4vkAl00_R

I have struggled with anxiety and depression for many years. In the past year, I have made some significant personal development and have been focusing only on positivity and growth. After being fed up with the lingering anxiety, I recently embarked on a spiritual unblocking. It was a ten hour-long appointment with a professional “Vision Therapist”. The therapist used techniques including but not limited to hypnosis, shadow work, and auditory triggers to put me in what can only be described as a state of higher consciousness. The process allowed me to eliminate the block between the subconscious and conscious.

 

With the therapist’s assistance, I was put into a state that allowed me to see the first time I ever experienced a negative emotion.  I “hallucinated” and saw my past self from a range of perspectives, such as peering within my body, levitating above my own body, watching myself, and seeing the first-person perspective of my eyes as a child. Each of these different perspectives offered a new learning moment. I learned why I feel anxious, sad, or fearful. I saw the weeds in my mind, and I decided to pull them out, and planted beautiful flowers.

 

I began to believe in myself, and see growth as the only option. We are all moving through life, we are all constantly changing, but not all of us choose to grow. Mental barriers constantly stop people from growing. You can choose to start the cycle of growth at any time, just as you can refresh the page at any time.

 

I believe that we must set rules for ourselves to grow, and I wanted to do the same in code. With that, I wanted to represent consistent personal growth in my rule-based art. Each circle represents a different lens of perspective. Each lens is growing in their own way, alone, but they all still inevitably merge together as one. The individual growth in recurring circles is also aesthetically representative of a Kaleidoscopic Mandala, a Sanskrit word that translates to balance and wholeness. Wholeness is of utmost importance during this journey, and achieving mental wholeness is part of my long term goals.

 

The final art piece also acts as a visual stimulus to aid in meditation. I have struggled with staying focused while meditating, and have always desired calming motion graphics that work synonymously with my breathing. My piece allows for just for that. 
page3 page2 page1

 

References:

{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 🙂