This weeks class was all about preparation and getting further help with our code for weeks 6 exhibition. Tim sat down with me and helped with adding another mesh texture onto another as I was finding that it would glitch. It turns out to be very easy and I just had to make the top mesh slightly larger than the bottom mesh.
Since I was going with the space theme with Earth and having done it with Erikas code I thought adding particles would be a nice touch. Wanting to make the code more my own I decided to find a png of clouds to add on top of Earth and to follow the idea of making the code my own I wanted to play with getting the two meshes to rotate at different speeds. This meant playing around with the different parameters of the rotation snippet which each control a different aspect. Once this was worked out it made it easy to control further rotations of other meshes that I added.
Code can be seen here
Above is the first variation which has everything rotating at the same speed and at the same time. Once the cloud mesh worked how I wanted it to, I wanted to next be able to make sure that it is clear that there are two meshes and it isn’t just one image/texture. So I wanted to have them spin at different speeds. This meant playing with the different rotation elements to get to rotate the way Earth would spin rather than have it rotate like a ball rolling.
My next step was to have them spin at different speeds. I had the clouds spin faster than the Earth Click here to see Earth and the clouds spin at different speeds. I decided that visually would work better. I also wanted to add in another spinning element and I decided that having the moon sit diagonal to Earth would be a nice touch. Getting the correct positioning right took me a little bit of time but once I got it right it was easy to then get it to spin how I wanted it to. Click here to see it.
Tim then showed us how we can take our code offline. For some reason my code didn’t like that so Tim made a few adjustments and then it worked later on. The moon URL that has the link embedded to it stopped working and we struggled to work it out but I found that some URLs work and others don’t. This I am unsure as to why that is but I am glad that some work.
Then I decided that I didn’t want the stars to spin and just wanted to stay in one spot as everything else spins. I then later decided that I didn’t want it to change colours but instead fade out and then fade back in and brighten making it appear to slowly flash or slowly shine/twinkle. Click here to see the code. In the code you can see that the stars work but the moon has decided not to show but you can see how the particle stars are smaller, stay in one location and flash. This took sometime to work out but with Tims math skills he was able to come up with some code that would create this effect.
Below is some forks that others have made using my code. I thought this was pretty cool due to not knowing the people so they made an effort to fork it.
Link to image if the moon URL in the code stops working – https://lh3.googleusercontent.com/proxy/35x1P6Mm87LIgTse7twOj9tH0l8pdhyGJmiDmXmzB9jSDog_ycmLNB5NMKGlj5wwZlkvO7yv3piO2HPTpp404zqb
In order to load the image in remove the text in italics below and replace it with the link above. Do this in the code.
map = THREE.ImageUtils.loadTexture(‘https://lh3.googleusercontent.com/proxy/35x1P6Mm87LIgTse7twOj9tH0l8pdhyGJmiDmXmzB9jSDog_ycmLNB5NMKGlj5wwZlkvO7yv3piO2HPTpp404zqb‘);
Above is what I will show in week 6, I would input a threejs link but everytime I upload the code that works in Brackets and then insert it into threejs the moon disappears.
Homework
I had a lot to do to be ready for week . I had my threejs code ready and that left processing which I like as I feel that there is more possibilities but I am not good at and the conditional design which I wasn’t sure what I wanted to do yet.
“Noise flow field painter” by Jason Labbehttp://www.openprocessing.org/sketch/472966Licensed under Creative Commons Attribution ShareAlikehttps://creativecommons.org/licenses/by-sa/3.0https://creativecommons.org/licenses/GPL/2.0/ https://www.openprocessing.org/sketch/472966#
I absolutely loved this code outcome. Using lines Jason Labbe was able to create a range of images, it was beautiful to watch. When you click the mouse it restarts making up another image using lines.
I was in love with this and wanted to be able to create something like it. Since I am not the best with processing i started with going back to the basics.
As much as the colours are pretty in the video, it didn’t move smoothly when changing colour or shape. The cursor had to be at certain points in order for anything to happen.
I quite like this outcome because the flashing isn’t to overwhelming, the colours are pretty and I like that it the ellipses stop and that it is clear that they are individual ellipses and it doesn’t look like a total mess or an overload. The ellipses moved smoothly and I quite like this design. I could also make the circles smaller and use them to write or draw with. Having a way to restart the drawing so that it doesn’t appear to be to chaotic would be good too.
I wanted to be able to eventually change the cursor shape so I played with mouseX and mouseY and making sure that it follows the cursor location without leaving a trail. This only seemed to work when background was in the draw section.
I found that in order for the cursor to not leave a trail of shapes the background layer had to be included in the draw section of the code. Here I am seeing if I can control the background colour with the cursor. I like that the ellipses moves with the cursor, it is fun to play with and the colour changing background made it interactive.
Like my inspiration I wanted to be able to make my own image so I had to learn how to load and view an image so I watched a lynda.com tutorial by Barton Poulson Process:Interactive Data Visulization (https://www.lynda.com/Processing-tutorials/Interactive-Data-Visualization-Processing/97578-2.html). Here he showed how to insert and load images to be able to view them in my code. He also had videos on Variables which provided me a with a further understanding. Videos on incorporating randomness, exploring color, creating conditionals and mouse tracking. It pretty much had everything that I needed to be able to create what I did. First I made in an image in Procreate. I decided that I would continue with the space theme. I also decided that I wanted to make my own cursor so I started with creating that first. I decided that a rocket would be a good choice here so I started to code one but trying to work out the different parameters was driving me nutty and at the end of it, after spending hours I didn’t like how it looks and couldn’t work out how to use the mouseX and mouseY to make it eventually become the cursor so I scrapped it. So originally I decided to scrap this idea and move on.
My next thought was maybe I could something with more planets. I started out with with placing ellipses where I would want the planets to go and then I added in Earth. In the images below, you can see my trying to place Earth in the middle circle. The images don’t show because I keep forgetting to document and then didn’t save the code but I did manage to place Earth in the right place. The reason it took some fiddling with was the image had a different set of location parameters to the ellipses. I believe it was off by about 15.
Again, I didn’t love this idea and I didn’t know what I would do once all the planets were placed. So again I went back to my inspiration. I started with playing with randomly placing the ellipses.
Next I inserted the image. I then played the sketch and left it running to see what would happen.
When I decided that I wanted it to be fullscreen getting the size of the image to fit just right became a nightmare. It was always to big or to small and size I didn’t know what the full size of my screen was I was constantly trying to fiddle around with it, eventually I got it to work. When I first ran into the problem I couldn’t work out why the ellipses were white despite the colour being taken from the image and then I realised that because of the screen size it was only taking colour from the corner of the image which of course is white once I realised that, I knew to make adjustments.
Below I combined a few different videos of my progress as I didn’t want to have to keep uploading videos so I thought that this might be easier.
Video 1- 00:00-00:55
The ellipses are small in this one which makes the image appear to be more detailed. I played with the alpha which made the whole thing appear blurry.
Video 2- 00:56-01:22
The ellipses are larger here and alpha makes out the image but it has a fuzz to it and is super blurry but you can still
Video 3- 01:23-01:41
The ellipses are bigger again and the blurriness has increased but it has a clearer twinkle effect as the ellipses get layered on top of one another.
Video 4- 01:42-02:30
This time the ellipses are super small, making the blurriness disappear and the image becomes super clear and detailed.
Video 5- 02:31-4:03
This time the ellipses are super small, making the blurriness almost disappear. The blurriness can be seen once the whole image is made but still appears detailed.
As you can see I managed to work out the screen size after ages of trying to get it to fit. I then decided that actually there is to much white so I decided to make the image take up the whole space.
Again a combined video of the image being full screen. The whole video shows the image being created but with different sized ellipses. The same results appeared since I still had the alpha on the bigger the ellipses the more blurry it appeared, the littler the ellipse the more detailed it appears.
I finally turned off alpha which made the whole image brighter and so much better. Below is another combined video. Each of the elements have a white outline which I liked when the image was flat and not made out of ellipses.
Here I slowly took away the outline of the images. I decided that I liked having no white outline. This also gave me my next idea. I wanted there to be something that was interactive and since I tested with playing with the cursor I decided to try and do something with that as well as the if variable.
So my idea was to have the mouse pressed and when it was to have the cursor become the rocket ship which meant taking away the space ship from the first image so that you could then fly the rocket. This meant having to change the background and then when the mouse is released the whole code would start again.
Here is the final code. It took a bit of adjusting to get it to restart correctly but we got there. I decided to leave the ellipses slightly larger just so that there was a bit more of a sense of stars twinkling and then having the mousePressed function allowed the user to see the whole image without there being ellipses and can play with the rocket.
Before I decided on my final, I wanted to try play with making it with lines which I really struggle with but I sort of got it to work, not as well as I would have hoped, it still made some cool outcomes.
I decided that I didn’t want an abstract piece and that I liked the ellipses more.
My next step was to do the conditional design. Making it space related took a bit of thinking but I decided that star constellations could work and is possibly something that would work.
To continue with the space theme I originally decided that black paper would be good. Sadly the sharpies didn’t show well and didn’t show the different users colours.
I then decided just to do it one white which worked great.
Below are the instructions that I created. The blue are edits and feedback that I got from my users and watching them take part. I found that there was a sense of pressure that when drawing the lines paying attention to how many lines were coming off the dot. I also thought that maybe 5 mins was to long but it did produce a good range of dots. Drawing the lines didn’t have a time limit but I did time them and it took them 3:49:09 minutes.
Coding for Creative Practice 