Week 4

We made it to class this week! The class started with us being introduced to the different places where we could make our assignment 2 projects. We explored the fashion lab which was overwhelming but is something that I have always found to be an impressive skill. We also got to go look into Fab Lab which is what I am leaning towards for doing my assignment 2 and in particular the digital embroidery. I had a go at embroidery during lockdown and would love to have a go at doing it digital.

In class we next looked at how you can fork code which is when you take code and then build on it.

This image has an empty alt attribute; its file name is screen-shot-2020-08-17-at-2.53.58-pm.png
Taken from http://threejsplaygnd.brangerbriz.net/archive/
This image has an empty alt attribute; its file name is screen-shot-2020-08-17-at-2.53.33-pm.png
Taken from http://threejsplaygnd.brangerbriz.net/archive/

My partner for this task was also away last week so we helped each other where we could to create and fork each others designs. I also had a couple of questions for Tim where I was unsure as to why something wasn’t working and to confirm how the code works from what I didn’t understand last week, working on it from home.

Partners Work Part 1

Created by Erika Y

My partners code –

You can see her code by clicking here . This was her first time playing with threejs but I love the simplicity of the colours. It was a relaxing loop to watch.

My Work Part 1

Using Erika Ys code I was able to create this

You can see what I created by forking her code by clicking here . She named her code Linen World and that inspired me to create stary linen world. This was created by changing the background colour and adding particles. It reminds me off the Death Star.

My Work Part 2

This is what I created that Tim and Erika forked off which can be seen by clicking here it was cool to see what other people can do when branching off each others ideas. Tims code (can be seen clicking here) helped me answer my question about text. I managed to add text without paying to much attention to where I was writing it and when I had tried to add a snippet that had text it didn’t work for me so he helped me answer my questions. Erikas code can be seen here I liked that she changed the perspective and made it a lot closer to the screen making it look like it could come out of the screen in any moment.

Tims Code

Erikas code

Class

One of the questions I had was how to import an image for material. When I tried to add an image it didn’t work but with Tims help and slight adjustment in the code I was able to create a moon that spins. The only trouble was that it didn’t fill the whole ellipse. So I decided to find another image which did a better job but still had the same problem. I was silly and didn’t share them to the archive. I loved the idea which was inspired by Erikas original design Linen World. Despite the moon not filling the whole mesh and spinning to fast I like this idea and could take it in different directions once I work out the fiddly bits. I like how threeJs has snippets it gives you an idea of how the code works but some of it I don’t understand, hopefully this understanding will come with time.

The second moon image was found here – https://sservi.nasa.gov/articles/3d-moon/ I can’t remember where I got the first moon image from.

Slightly larger moon takes up more of the mesh

Example

For this weeks example I chose the gif below. What I like about is the use of depth and movement. The repetitiveness and smoothness of the movement makes it relaxing to watch. It has a sense of going from 2D to 3D. The colours make it impactful as the contrast grabs your attention.

Homework

Since I was now able to add new textures to the different meshes I had learnt in class that the previous shapes I had used didn’t work I found that using flat maps worked wonders and were exactly what I wanted as are more able to be wrapped around the mesh shape. Picture URL

Using a texture that is usually of a round shape such as planets and in this case Earth made the mesh really stand out and logically made sense to me. I was thrilled that it wrapped around the shape as intended. 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. Once I had decided that this was what I wanted to do having different speed rotations I then struggled with the mesh being layered correctly. Again my bad photo taking of my processes failed me again so I didn’t show how it doesn’t work but it would glitch so you could the bottom mesh but not the top one. When played one at a time the meshes would play individually so I couldn’t work out why it wasn’t working.

The code can be seen here

It was exciting to see the texture finally wrap around the whole mesh.

The image I used for Earth