lythraecreativecoding - Tumblr blog

[lythraecreativecoding]

Evaluation

Sonic Pi was a very interesting program that allowed me to make music pieces by coding which made me understand much better the concept of loop, thread, variables and others. It was in a way that it was actually fun and you could instantly hear what you was coding. At the beginning I made a lot of mistakes that where shown in the log. Whenever it was shown it also will tell you the line you made your mistake on and what it could be. Thanks to this, I fixed my mistakes and by the end of the trimester I was able to live code without making any mistakes and with a complete understanding of the basic program syntax.

When we moved from Sonic Pi to Processing I found the way of coding different and this is because it was using a language called Java. At the beginning I found it quite challenging, now I understand much better the language, but still I find it quite challenging to make some sketches that I have seen in other people’s websites.

Unity was also another challenging program but really useful because you could make not only visuals, but also games with it. I would love to continue using unity in the future with new projects.

I chose Processing because I thought it will go better with Sonic pi in the way of making visuals and because I was already getting into learning the language and the program.

[lythraecreativecoding]

Music was live coded by Catarina Ross.

Code can be found in her blog:

www.crossartcoding.tumblr.com

[lythraecreativecoding]

Screen Recording of the performance

[lythraecreativecoding]

Performance

We had a task to get into groups and prepare a song and some visuals for a performance taking place in May.

My teammate did the music based on some tracks of the TV show Mr. Robot. I did some visuals in Processing to go with it based on the experiments I have been doing over the weeks.

I found the code on how to do a rainbow wave in https://www.openprocessing.org/sketch/100832

(Although the code there now is changed into a simple one)

CODE:

https://gist.github.com/Lythrae/c4fef8be305228df47c4c3cdf5672e81

[lythraecreativecoding]

Experimenting with PGraphics v2

I increased the size of the cubes  so what I can see its the intersection of the points that I found very visually attractive.

CODE

https://gist.github.com/Lythrae/3b1d087d91893b1dc9cb2bf420494d10

Version 3

In this version I made the cubes smaller and had 3 cubes mixed together with the multiply blend mode.

https://gist.github.com/Lythrae/b2299c7efd10a2c7b7311f1a8a260b39

[lythraecreativecoding]

Experimenting with PGraphics

I alter one of the codes that I found in the official processing website where you can find here https://processing.org/tutorials/rendering/

I changed the colour of the cube, removed the stroke and also added another cube.

CODE

https://gist.github.com/Lythrae/5342f6fd363244bc2360b120f241aef7

[lythraecreativecoding]

Night full of stars v3

This time I removed the stroke of both, stars and moon but I prefer the other result as it looks like it’s getting darker.

CODE

https://gist.github.com/Lythrae/8b77cd24950950b8366b06f490869599

[lythraecreativecoding]

Night full of stars v2

In this version a moon is incorporated making the night go darker sooner due to the stroke of the moon.

CODE

https://gist.github.com/Lythrae/429e0e8dd3f5da7f29b8c3975d3cc79a

[lythraecreativecoding]

Night full of stars

This is a representation of a night sky with stars.

I just created tiny rectangles that keeps redrawing in random position with a blur filter.

It starts in the middle, and the range where they appear keeps getting bigger as time passes. 

Thanks to the stroke of the rectangles the background colour gets darker.

CODE

https://gist.github.com/Lythrae/8b9a6d956a72a31591757444b2c086ae

[lythraecreativecoding]

Test 3

This is a circle without fill and with random stroke colour that follows the mouse position and becomes bigger with time.

CODE

https://gist.github.com/Lythrae/cad3c5c0463b5ed3a7b87bbaf99d4ac4

[lythraecreativecoding]

Test 2 v4

In this version of the code there is text constantly being redrawn in random positions of the screen. It uses a blur filter and the colours are as well randomize. 

Every time the mouse is clicked the colour will invert thanks to the invert filter.

CODE + EXPLANATION

https://gist.github.com/Lythrae/bd7e1c22e2d8c81bcee42daf880d0402

[lythraecreativecoding]

Test 2

In this test I started with 3 boxes in the middle, one that goes up and the other two down in a diagonal direction.

As they move they leave a black path due to the stroke of the boxes, and as they reach the bottom of the screen they stay there but new boxes appear again in the middle following the same path.

CODE + EXPLANATION

https://gist.github.com/Lythrae/90411d0a1e8ead114e95dec40cf1fcd0

Version 2

Due to the repetition of the code that is outside the if condition, the box keeps creating more boxes and leaving these as a trail.

CODE

https://gist.github.com/Lythrae/2bf999f1187573a16124666778bcd939

I also tried with removing the stroke and redrawing the background.

Version 3

This time the colours are being randomly chosen.

CODE

https://gist.github.com/Lythrae/89e8b4b93f8724d3fc8220f8a00cb569

[lythraecreativecoding]

Experimenting with Processing

Version 4

This time I used an If condition so every time the circle disappear of the screen it will appear on the right of its original position.

The values will change to green slowly but when the mouse is click, the values will be reset to red and the colours will be posterized. 

CODE 

https://gist.github.com/Lythrae/037cd7d01588cc51ac85b8ff357fcaab

[lythraecreativecoding]

Experimenting with Processing

I’m going to be posting some of the experiments I have done with the program and what the outcome is.

Version 1

In this code I have started with three circles in the screen.

I have used some variables to change their position, the middle one goes down in the y axis and the ones in the side goes up.

Every time the mouse is clicked the circle change its width and height transforming into a bigger ellipse.

CODE + EXPLANATION

https://gist.github.com/Lythrae/0d62e9e2607093caf2b5155fa348aeba

Version 2

I added a filter to the mouse clicked function that will invert the colours every time the mouse button is clicked creating this effect.

CODE

https://gist.github.com/Lythrae/c5dbea986704bfd4173466b0ec60c6df

Version 3

I made variables for RGB values to obtain a gradient from blue to white

CODE

https://gist.github.com/Lythrae/fae0d3fb3511e1279a423496fc2e8e8a

[lythraecreativecoding]

Week 3

In this week we have been learning about functions, variables and images. 

For this task I decided to make an animation using an artwork done by the artist Candivase http://candivase.tumblr.com/

I loaded up the image, and set a variable that will change with an ‘if’ condition. I also added a command that saves frame by frame of the sketch while playing so I could make a gif from it.

Code

PImage mercy; void setup() {  size(500, 500);

 mercy = loadImage("mercy1.png"); } int x = 200; void draw() {  background(#A6EDF5);

 image(mercy, x, 100, 300, 290);

 if (x==-300) {    x=500;  } else {    x=x-4;  }  saveFrame("output/mercy_####.png"); }

Result

(Tumblr unfortunately skips frames within the GIF, it runs more smoothly out of tumblr http://gph.is/2phqPSj )

[lythraecreativecoding]

Week 2

For the second week we had to create an avatar. This time following a grid based on the x and y coordinates. I did a full body of myself in pixel art!

Code

void setup(){ size(380,700); background(168,168,168); }

void draw(){  noStroke();  //hair  fill(#4B2A08); rect(140,80,80,20); rect(120,100,120,20); rect(100,120,160,200); rect(80,260,40,20); rect(80,300,40,20); rect(140,320,20,20); //skin fill(#FFF2D8); rect(220,120,20,100); rect(200,140,20,80); rect(180,160,20,100); rect(160,180,20,40); rect(140,180,20,20); rect(140,240,120,40); //arms rect(120,260,20,40); rect(120,260,20,40); rect(100,280,20,60); rect(80,320,20,100);

rect(260,260,20,40); rect(280,280,20,140);

//feet rect(160,580,20,40); rect(220,580,20,40);

//tshirt fill(#D99DDE); rect(160,240,20,40); rect(220,240,20,40); rect(160,260,80,100); //jeans fill(#1F1F1F); rect(160,360,20,220); rect(220,360,20,220); rect(180,360,40,40); }

Result

[lythraecreativecoding]

Week 1

We learnt the basic and they asked us to create an avatar for ourselves using a combination of rectangles and ellipses.

Code:

void setup(){  size (300,300);  background(163,211,227); }

void draw (){  fill(66,37,8);  rect(75,75,150,200);  fill(252,246,204);  ellipse (150,150,130,140);  fill(0);  ellipse (110,160,30,30);  ellipse (190,160,30,30);  noStroke();  //hair  fill (66,37,8);  rect (150,75,75,60);  //skin  fill (252,246,204);  rect (150,120,20,20);  //hair  fill (66,37,8);  rect (150,75,75,60);   //skin  fill (252,246,204);  rect (150,120,20,20);    //hair  fill (66,37,8);  rect (130,75,20,30);  rect (195,125,20,20);  rect (100,60,100,20);

 //blush  fill (255,140,198);  ellipse (100,180,20,10);  ellipse (200,180,20,10);

}

Final result: