(Year 3 Sem C ) Week 3 Prototyping Preparation(Part 2 )

Today, I continue my process for the technical part. I am facing some problem when working on the prototype. 

As can see from the image above , the heart shape is blocking the sphere. The heart shape will not change the position to backwards no matter how many times I adjust on the CSS or HTML. Therefore, I decided to change to another plan which using coding to draw out the heart shape.

At HTML:
<div class="heart"></div>

At CSS:
.heart {
  width: 100px;
  height: 90px;
  font-size: 50px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  margin:100;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
       border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
     -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
       -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

After that, a heart shape will appear on the screen. After that, I try adjust the size with CSS.

But , I face the problem again. The heart shape keep changing to different kind of shape and  the position will always remain at there.

Therefore, I decided to put this problem aside and focus on the sphere. Below is the step how I create a completed heart shape.

One particles equal to :

    var geometry = new THREE.SphereGeometry( 3, 10, 10 );

    var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );

    sphere = new THREE.Mesh( geometry, material );

     sphere.position.z = -1;

     sphere.position.x = -5

     sphere.position.y = 20

     scene.add( sphere );

The completed heart shape will need 50 more of the coding and each of them is adjusted based on the position math. 

(Year 3 Sem C ) Week 3 Consultation with Mervin

Today I am having consultation with Mervin again.The area that I mostly focus on is at the technical part.

The questions that I have asked are:

• How to move the position of the heart to the center?
• How to change the colour of the sphere?
• Does there anyway to multiply the particles?
• How to make the particles flow randomly instead of flow straight?

Feedback from consultation:

• Play with CSS to adjust the position 
• Refer to the code from Photoshop and apply the code in dreamweaver 
• Better focus on the important part first 
• Apply Greensock GSAP Loop (this.restart)

The image show that the heart has move to center successfully and the the colour of the sphere have changed . From now, the heart shape just need to re-size it and put to the center.

The process is created by using the code:

CSS for heart shape:

  #Heartshape{

 width : 500px;

 height :500px;

 position:absolute;

 z-index:1;

 }

Three js for the colour of the sphere: 

 var material2 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );

(Year 3 Sem C) Week 3 Prototyping Preparation (Part 1)

Today, I decided to do some testing on three js.

First,I decided to apply the image of the heart shape in the website. I decided to apply back three js that I have used before to the website (Reference Link ) .

As you can see that have a heart shape at the left-top side corner of the image. I keep playing with the heart shape with CSS but the process not really went well. Particles is the main interactive element for my assignment. Therefore, I decided to change the cube to sphere.

Before that, I have searched for the tutorials on how to create the sphere .

Here is the code that created a 3D cube:
 var geometry = new THREE.CubeGeometry( 20, 20, 20);  
 var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
cubeMesh = new THREE.Mesh(geometry, material );
cubeMesh.position.z = -100;
cubeMesh.position.x = 100;

Replace  the code with Sphere Code:

var geometry = new THREE.SphereGeometry( 3, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere = new THREE.Mesh( geometry, material );

And will come out something as below:

The size of the circle need to be adjusted at this sentences new THREE.SphereGeometry( 3, 10, 10 );

If the sentence new THREE.MeshBasicMaterial( {color: 0xe62fac,} ); change to new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );the sphere will turn out to be 3D size as below:

But, 3D sphere is not really the design that I am looking for. Therefore, I decide to work on the flat design first.


Reference Link

Solutiondesign.com. (2016). WebGL and Three.js: Particles - Blog - sdg. [online] Available at: https://www.solutiondesign.com/blog/-/blogs/webgl-and-three-js-particles [Accessed 25  Nov. 2016].

npm. (2016). three. [online] Available at: https://www.npmjs.com/package/three [Accessed 25 Nov. 2016].

Threejs.org. (2016). three.js / documentation. [online] Available at: https://threejs.org/docs/#Reference/Geometries/SphereGeometry [Accessed 25 Nov. 2016].

(Year 3 Sem C ) Week 2 Consultation with Mervin

Here is some feedback from the consultation:

Design area:

1) Apply drop shadow to the fonts to make the fonts more attractive
2)Consider about the size website when change from laptop to monitor
3)Try apply semi-transparent to the background.

Technical Area:
1) Using PHP to generate data and apply in to the website.
2) Making prototype as soon as possible.

Based on the feedback, the important part that I need to focus on is the design part and also need to produce a working prototype as soon as possible.Looking back to the gantt chart, week 6 should be the day where the 50% of prototype is done. There is still left 3 weeks for me which is quite intense. Therefore, I need to work harder and speed up my process to complete the work.

(Year 3 Sem C) Week 2: Feedback from E-mail

Here is the feedback from Mervin regarding to the questions I ask from e-mail.

Feedback:

• Provide strong rationale for the design decision.
• Work on designing / creating the actual content of the website because the coding might not suitable for the website.
• Focus on the UI elements and control such as main navigation sound on/off 
• Remove the arrow icon from the mockup.
• Apply gradient to the background instead of solid black 
• Work harder to achieve the design mockup
• 
  
• Welcome page
  • Welcome page > Introduction > Ok button to close and continue (Also write the content for Introduction/Instruction)
• Option screen to choose reading mode or writing mode 
• Writing Mode: Title of the section, labels for the input fields such as name, email etc... and submit button, also back button for user returning to main menu
• Writing Mode: Preview of a submitted message, and also a screen for indicating message has been sent to the site
• Reading mode: Show how messages in particles can be clicked, and how the messages will be displayed, including the poster's name too

(Year 3 Sem C) Week 1 : Back to Project

The feedback from the tutor is useful because I can realize where have I missed and continued to work on. Most of them is quite confuse to the part where how user interact with the website. Perhaps I should focus more on the interaction part.

But at first, I decided to start changed my design for the website.

The first design.

The changed design. 

The reason that I changed is the shard make people feel uncomfortable when looking on it. Therefore, I decided to change to the particles. But the interaction will remain as the same. 

Beside, I have send e-mail to Mervin and ask some questions about the web design.