Spatial Design I - Weekly Journal

Jump Link:

• Week 1 - Introduction to Blogspot
• Week 2 - Creativity
• Week 3 - Conceptual Elements
• Week 4 - Visual and Relational Elements
• Week 5 - Adobe Illustrator
• Week 6 - Building Structure and Poly haven
• Week 7 - Feedback on Assignment
• Week 8 - Independent Learning Week
• Week 9 - Consultation 
• Week 10 - Sittable Chair Tutorial
• Week 11 - Busy with Assignments
• Week 12 - HDRI Haven, Reduce Wireframe, Bake
• Week 13 - Final Presentation
• Week 14 - Online Consultation

Lectures 

Week 1 (27.09.2023)

In our first class, we were introduced to the captivating world of spatial design and began our journey into e-portfolios. We explored the basics of spatial design and got to grips with Blogspot, a platform to upload our journals and assignments.

Figure 1: Ten Sze Ching's Blogspot

< back

Week 2 (04.10.2023)

In this session, we explored the concepts of creativity and its significance. We delved into the definition of creativity, the importance and how does it catch audience's eyeball. Additionally, we examined the elements that make artwork captivating, focusing on the qualities that draw an audience's attention. 

Lecture Notes

• Creativity - think out of the box, a good observer is a good story teller
• Art - an artist can convey a message or expression
• Fine Art - visual art that appeals to the sense of beauty
• Commercial Art - Creation or design with commercial purposes
• Design - A planning with clear aim/target, must fulfill practical needs
• Design is about noticing what ordinary people cannot notice
• Positive and negative space are both important in design

Figure 2.1 Optical Illusion

Figure 2.2 Illusion Oil Painting

Figure 2.3 "Word within Word" Illusion

Group Activity

We were required to find an empty, unnoticeable area in our campus and use our creativity to utilise the space with educational and interactive elements

Groupmate: Lam Rou Xuan

Figure 2.4 Presentation

Our idea is to utilise the space by creating a metaverse, inspired by miniature world and "Pokemon Go". Since it was meant to be educational, we intended to achieve awareness of environment sustainability among students by adding interactive educational games. Players are required to answer some general questions while playing the games, and the winners will get a secret prize. Players are required to scan the QR code found on the wall to play the games. Then, there will be a live navigation to lead players to the gaming spot. One of the example is given in the PDF, players are required to remove the debris trapped in the drain. Meanwhile, students are able to understand the importance of cleaning the drainage. Education and entertainment are both achieved by students.

< back

Week 3 (11.10.2023)

Today's lecture, we were introduced to elements of design. There are three main components, which are conceptual elements, visual elements, and relational elements. In this class, we were focusing on the most fundamental and mandatory element of design, which is conceptual elements. On the conceptual front, we have fundamental elements like points, lines, planes, and volumes, which underpin the structural and abstract aspects of design. 

Lecture Notes

Conceptual Elements:

• Not visible
• Do not actually exist but seem to be present
• Point - only have position, with no length or breadth, seen as tiny element. Small size and simple. Example: •, ‣, ′
• Line - combination of points and with direction, length, but has no breadth. conveys the feeling of thickness, which is relative. Example: parallel, free curve, arc, spiral, helix 
• Plane - enlarge point or line will obtain plane. has length and breadth but no thickness. Plane forms has variety of geometric, organic, rectilinear and irregular shapes. 
• Volume - path of plane in motion becomes a volume. 

Figure 3.1 Points/Dots

Figure 3.2 Lines

Figure 3.3 Planes

Figure 3.4 Volumes

Individual Activity

We are required to take photos which have conceptual element like points, lines, planes and volumes around the campus. Here are some pictures that I have taken around the campus.

Figure 3.5 Function of Dots

Figure 3.6 Function of Lines

Figure 3.7 Function of Planes

Figure 3.8 Function of Volumes

Throughout this engaging session, I have gained a deeper insight into the roles of dots, lines, planes, and volume, and their impact on design. This experience has provided me with a more profound understanding of how these elements collaborate within design.

< back

Week 4 (18.10.2023)

In today's class, we learned more about design principles, particularly the visual and relational elements. Thanks to some interesting examples, I got a better grasp of these design concepts. At the end of the lecture, we got a task – we have to use these design principles to create designs based on both natural and abstract images.

Lecture Notes

Figure 4.1 Elements of Art

Conceptual Elements

• Point/Dot - focus point, catch people attention
• Line - movement, rhythm, direct people eyes to see thing
• Plane - the path of a line in motion, forms a variety of shapes
• Volume - path of plane

Visual Elements - what we can actually see

• Shape - outline outward appearance of a form/design
• Size - bigness and smallness
• Colour - shape can be distinguished from its surroundings because of colour
• Texture - surface characteristic of a shape. Example plain or decorated, smooth or rough

Figure 4.2 Shape

Figure 4.3 Size

Figure 4.4 Colour

Figure 4.5 Texture

Relational Elements - governs the placement and interrelationship of the shapes in a design

• Direction - how is it related to observant
• Position - judge by the relationship of subject matters
• Space - suggest depth
• Gravity - not visual but psychological, attribute heaviness to lightness, stability to instability
• Form - character of object in this world that captured by our eyes, point, line, or plane, when visible becomes form. Representational form, non-representational/ abstract form
• Representational form - natural form and artificial form

Figure 4.6 Direction

Figure 4.7 Position

Figure 4.8 Space

Figure 4.9 Gravity

Task

For this assignment, we have to create a total of 10 designs. Half of these designs should be inspired by natural forms, and the other half by artificial forms. The key requirement is that all of these designs must incorporate the design principles we've been studying.

Requirements:

1. Artwork size: A3 (Layout Pad / Art Block)
2. Box: 7cm × 7cm
3. Note: Keep your work clean and tidy. You need to use black pigment pen start from this assignment

For examples:

Figure 4.10 Example of Design of Natural Form 

Figure 4.11 Example of Design of Natural Form

Figure 4.12 Sketches

I've attempted converting images into straightforward black and white graphics, focusing on keeping them clean and easy to comprehend while maintaining an appealing look.

< back

Week 5 (25.10.2023)

In this lesson, we covered the fundamental concepts of Adobe Illustrator. Our primary goal in mastering Adobe Illustrator is to eventually employ Blender for our final project, where we'll be transforming a two-dimensional plane into a three-dimensional object or volume.

Lecture Notes

• Top - main menu bar
• Left - tool bar
• black arrow - select
• white arrow - select certain point
• change vertex into curve - long click "pen tool". click "anchor point tool" 
• show measurements - click "view", click "ruler", click "show ruler"
• guidelines - drag ruler to canvas
• lock guidelines - click "view", click "guidelines", click "lock guidelines"
• make a flower - select the object, choose "rotate" tool, hold alt key and click on the point to duplicate, click "copy", ctrl + d to duplicate
• select object, choose "rotate" tool, click an edge, alt and hold

Figure 5.1 Shapes and Patterns

Figure 5.4 Natural

Figure 5.3 Artificial

My lecturer provided feedback suggesting adjustments to my graphic design, such as refining the scale and perspective, reducing the line stroke, and so on. The images above are my modified graphic design.

< back

Week 6 (replaced on 28.10.2023)

In this class, we opted to continue our focus on 3D modeling instead of spatial design due to the need for additional tutorials on constructing buildings for our metaverse project. Specifically, we were continuing to work on the second floor of our project, which we had previously paused during our last lesson.

Lecture Notes

• inset - in edit mode, select "face", "inset face"
• boolean - overlapped area can be cancelled

Figure 6.1 Interior

Figure 6.2 Exterior

Figure 6.3 Polyhaven

Poly haven - online resource known for offering a wide variety of high-quality 3D models and textures 

How to Use Poly Haven in Blender:

1. Go to polyhaven.com.
2. Find and download 3D models or textures you want.
3. Open Blender.
4. Use "File" > "Open" to load downloaded .blend files with 3D models.
5. Select your 3D object in Blender.
6. Go to the "Materials" tab in the "Properties" panel.
7. Create a new material, and set "Principled BSDF" as the shader.
8. Add your Polyhaven texture in the "Base Color" slot.
9. Adjust lighting, camera, and other settings to get the look you want.
10. Click "Render" to see your final project.

< back

Week 7 (8.11.2023)

Today, we gained some valuable feedback from our lecturer regarding to our upcoming assignment, which is Assignment 2: Concept Development. After some discussion between lecturer, Renee and I, we made some changes on our proposal, and we also resolved some confusion about the assignment brief. We enhanced our proposal by coming out with more concept ideas for our art gallery. I have created a new page to keep track and update my progress of my assignment, the link is below:

https://szeching0119.blogspot.com/2023/10/spatial-design-assignment.html

Our lecturer also covered the process of exporting designs from Adobe Illustrator to Blender, as well as how to create simple animations within Blender for use in Spatial.io. However, I had difficulty keeping up with the lesson and plan to seek assistance soon. We were also introduced another platform for us to build our metaverse, which is framevr.io. 

Figure 7.1 Frame

We also learned the process of exporting designs from Adobe Illustrator to Blender, enabling us to create signage in Blender for use in the metaverse.

How to export from Adobe Illustrator to Blender:

1. In Adobe Illustrator, select vector and right click to create outline.
2. Save your design in Illustrator as an SVG file.
3. Open Blender.
4. In Blender, go to "File" > "Import" and choose "Scalable Vector Graphics (.svg)."
5. Locate and select your SVG file.
6. Adjust import settings if needed.
7. Click "Import."

< back

Week 9 (23.11.2023)

Today, we shared our metaverse project progress with the lecturer and got feedback. We added furniture to Spatial.io to see how it looks and made improvements for a better appearance. We also gained a basic understanding of using ZBrush, another 3D modeling software specifically designed for sculpting, which is better suited for creating sculptures.

Problem

1. The blender file is too large which makes the metaverse laggy
2. The furniture cannot be set as environment
3. The furniture keeps repeating

Figure 9.1 Kids workshop

Figure 9.2 Adult workshop

Solution

1. Make some minor changes on the arrangement 
2. Decrease the lines of the model to lower the size of the file
3. Remember to apply modifier 
4. Add portal which links to another level to decrease the size of the file

< back

Week 10 (29.11.2023)

Today, we had a brief consultation with our lecturer and received feedback after presenting our nearly finished second floor to him. He suggested that introducing lighting to the space would enhance its appeal. Additionally, he also taught us to create chairs that can be seated in Spatial.io, which was pretty cool!

How to make sittable chair in Spatial.io

1. put the chair above z-axis
2. go to "add", "empty", "sphere"
3. move on top of the cube (hemisphere)
4. name it as ( -hotspot)
5. go to "add", "empty", "cube"
6. put exactly the same place of the chair
7. name it as (3DSMeshMetrix)
8. go to "add", "empty", "cube"
9. put exactly the same place of the chair again
10. name it as (RootNode)
11. go to the orange box at the right panel
12. go to "parents"
13. 3DSMeshMatrix pick the RootNode
14. -hotspot pick the 3DSMeshMatrix
15. move the empty back to the original place
16. export to glb

Figure 10.1 Arrangement of element

Figure 10.2 Sittable chair

< back

Week 11 (6.12.2023)

In the lecture, we worked really hard on our assignments and didn't ask the lecturer for help. Luckily, our assignments are going well and on track. hehe

< back

Week 12 (13.12.2023)

Today, we learned how to solve problems while building the metaverse, like dealing with big Blender files and using baking. We still have 7 days before our presentation, and we're hoping to make our art gallery look better.

How to set custom skybox

1. go to HDRI Haven
2. go to "skies"
3. download as hdr or exr
4. add a sphere in blender
5. smooth the surface
6. change material to image texture
7. open the exr file
8. export as glb

How to reduce wireframe

1. go to modifier
2. choose "decimate" or "remesh"
3. OR go to the green triangle at the right panel
4. go to "remesh"

How to bake

1. add image texture on the material
2. go to "shading" on the top panel
3. go to "add" and add a image texture
4. add "new image"
5. change render system to "cycle"
6. go to "bake"

Due to the big Blender file, we decided to use our lecturer's method to reduce the wireframe size. This is to avoid any issues with our metaverse being slow or crashing due to the file being too large. We're also having some trouble with baking and plan to ask for help in the next class.

< back

Week 13 (24.12.2023)

Today, we presented our metaverse to the lecturer, Mr. Yusri, Mr. Max, and Mr. Zeon. We put in a lot of preparation to stay within the 15-minute time limit, as per the rules. However, in order to meet the time constraint, we had to reduce some points, resulting in a presentation that lacked a bit of information. Nevertheless, we received valuable feedback from our lecturer to enhance and refine our metaverse further.

Feedback on Presentation

• Our explanation is not detailed enough
• There are a few information which is not clarified

Feedback on UI design

• The "purchase successful" page should be added with more design and code

Feedback on Metaverse

• Our metaverse is not creative enough, common building structure
• Our gallery is not informative enough

In general, we received positive feedback for our minimalist presentation slides. Although we feel somewhat disappointed with our performance, we're determined to make improvements and enhancements to elevate it. We are grateful for the valuable feedback provided to us!

< back

Week 14 (30.12.2023)

Today, we engaged in an online consultation with our lecturer to discuss the progress of our art gallery metaverse project. Following the feedback received during the last presentation, we worked on enhancing the floorplan. We made some changes on the structure of the floor plan and added initial furniture elements into our metaverse. The feedback received during the session will be instrumental in further refining our project and aiming for higher marks in the final assignment.

Feedback from lecturer

1. Create contrast for the wall of EuroVision room, to allow the sculpture to stand out
2. The title of the room should be placed higher
3. The leaves should be more vibrant
4. The center pillar is too outstanding
5. Add some colours to the lower floor of the Digital Horizons room
6. Add some information about the digital immersive art
7. Try to avoid black colour
8. Create a frame at the entrance to create perspective and lead visitors to enter our art gallery
9. Try to connect the floor and wall together

How to shade two sides plane

1. go to "shading"
2. duplicate the image texture
3. go to "add", "shader", "mix shader"
4. go to "add", "shader", "principled bsdf"
5. go to "add", "input", "geometry"

Figure 14.1 Arrangement

Due to the images appearing dark in spatial.io, we attempted a method on our PNG images to prevent them from looking dull. Unfortunately, we were unable to resolve the issue, possibly due to the lighting conditions within spatial.io.

< back