javascript

Nature of Code Midterm

For my midterm project, I decided to explore relations between attractors & movers in the code. Fortunately, I had zillion ideas, unfortunately, also had way too less skills to achieve the result what I wanted.

Tried to play with fractals, processing and three.js,

1

Not everything was successful, but I definitely learned a lot

Untitled-2

Finally, I decided to focus on the ‘attractor’ example and modify it to make a nice visual effect.

My goal was have a system of movers, flying randomly  on the screen. Then, slowly, they were supposed to create a hidden image.

To make it happen, I prepared a few png & jpg files, that were about to be presented by movers. After importing them into p5, I wrote a nested loop, that iterates through each pixel of the image. Each one, having the RGB value bigger than 0 and smaller than 254 was meant to attract elements of the particle.

Screen Shot 2016-03-23 at 8.54.34 AM Screen Shot 2016-03-23 at 8.54.38 AM

Screen Shot 2016-03-23 at 8.54.45 AM

Once it finally worked, I decided to add some functions to the mouse and keyboard. I just wanted to totally mess up the drawing and redraw it again when the mouse is pressed.

[gif here]

The key changes the image to another one from the array. Once we reach the last one, we go back to the 1st one.


feel free to play

HERE

Book Cover vol.2

‘For next week you’ll design a cover for a book of your choice. You can use form, color and typography, but not images. The main constraint is that you need to use a grid system to place elements on the page.’

I’ve picked a book about Beata Pawlikowska’s travel to Amazon Jungle. Decided to create colorful geometrical pattern, which reminds me of colors which amazon tribes use to paint their bodies.

Here’s the whole process of my project:

Screen Shot 2016-03-03 at 7.38.23 PMScreen Shot 2016-03-03 at 8.20.50 PMScreen Shot 2016-03-03 at 8.50.02 PMScreen Shot 2016-03-03 at 9.40.24 PMScreen Shot 2016-03-04 at 2.04.23 PM

Screen Shot 2016-03-04 at 2.06.52 PMScreen Shot 2016-03-04 at 6.29.31 AMScreen Shot 2016-03-04 at 8.10.00 AM

And the result:

IMG_8193

IMG_8196

unpublished versions:

lqlq tes

Font design

letters

This week we were supposed to design a font based on word and write the word using this typeface.
I decided to design a font created by multiple random thin lines crossing with each other.

Because I was totally wired in, instead of displaying jus a word, I wrote the whole alphabet.
I have to say that the whole process took me a looooong time, but I was really happy with the result.

I decided to use the ‘Gotham’ font, convert it to poly and randomly connect points of the array. Of course JS wasn’t aware of the letter shape, so the lines between random points created a chaos, not a letter shape:

Screen Shot 2016-02-25 at 7.01.16 PM

Screen Shot 2016-02-25 at 7.09.14 PM Screen Shot 2016-02-25 at 7.12.22 PM

to make it look like a letter, I had to draw a poly converted letter again, draw a rect and using fill path rule display just a rectangular shape, with carved letter inside.  Finally I got the result I was looking for:

Screen Shot 2016-02-25 at 8.40.26 PM

This process was pretty crazy, since I had to do it separately for each letter of the alphabet.

12787299_10204217285912140_1006459235_o

Final Result:

al favie copy aal

and the prints:

IMG_8120.JPG IMG_8121.JPG

Random Walker & Perlin Noise

For our first week assignment, I decided to practice Random Walker and Noise.

Here’s what I came up with :

Noise:

noise

Screen Shot 2016-02-03 at 5.41.56 AM Screen Shot 2016-02-03 at 5.42.00 AM Screen Shot 2016-02-03 at 5.42.05 AM

Later,I tried to experiment with steering walker toward different directions using mouseX and mouseY. Also, to add another feature i set up ‘keyPressed()’ to help centralize random walker in the middle of the screen again.

via GIPHY

Screen Shot 2016-02-03 at 5.20.28 AMScreen Shot 2016-02-03 at 5.20.49 AM At the end, I decided to show ‘fear’ using noise:

bee

 

‘Dandi’ – pComp Midterm Project

Firstly, my Partner Anne and I considered making a physical object – a box of grass that moved as if being blown by the wind when people walked past. Then, after a brainstorm we both agreed to move the project to the screen.

It was a challenging task in terms of programming. That was the first time I had to use particle system.

I started with drawing a dandelion piece in Adobe Illustrator and saving it as a svg file. Then, I tried to loop it in few circles, just to create dandelion shape.

DANDIThen, after consultation with Moon, we decided to form dandelion pieces in one spiral.Screen Shot 2015-11-04 at 1.48.27 PM Screen Shot 2015-11-04 at 1.47.41 PM

While I was working on design and programming, Anne figured out a lot about the sensors.

At first, we purchased a PIR motion sensor, but it turned out to be way to sensitive. Then, we discovered the Distance Measuring Sensor which seemed perfect for our task, though we did not need to measure distance, because we were able to adjust the level of sensitivity.

She did a great job by getting sensors to work.

Also, I laser cut and etched the lid for our ‘sensor box’.

IMG_4838 IMG_4846

Finally, we connected both out works, and ended up with a beautiful final effect.

Screen Shot 2015-11-04 at 2.06.20 PM

Constellations

Screen Shot 2015-09-30 at 5.30.56 AM

This week I continued practicing organizing my code. I had many ideas, of what I could create, but then finally decided to listen to my heart.

There’s one thing I really miss in NYC – I have never see the sky fill with stars at nigh here. I used to see it back in Poland, but unfortunately, the light pollution of the city prevents the stars from being visible. Dreaming about my lovely night, I started creating my own, p5 night sky.

Practicing arrays, loops and functions, I ended up with a nice night sky, full of my beloved stars. To add some magic, I decided to add some movement to the stars, which move in circle.

That was a good opportunity to practice ‘sin’ and ‘cos’.

Moreover, I wanted my project to be more educative, so I singled out stars, which creates constellations. Here, I added a small drawing simulating animation, which one by one, shows constellations on a sky.

I also added 2 hidden features:

mouseDragged – adds more falling stars

keyIsPressed – displays constellations’ names

Link to sketch HERE

Have fun learning!