Skip to content

JA1. Learning Journal 1

Answer

Discuss the week’s activities and your observations

1. Did anything surprise you?

I was surprised of how powerful Three.js is. I have never worked with it seriously before, but I have touched it on occasions and I though it is just another simple chart library, but it is much more than that. It is a powerful graphics library that allows for creating and consuming computer graphics as it forms a bridge between programmers/users and browser/graphics hardware.

I was also surprised that the course chose JavaScript as its main language, especially as such courses are usually taught in C++ or Java. I now appreciate the decision as browsers are very common, easy to use and share, and uniform across devices; while setting up a C++ or Java environment is not as easy. I think sharing the working final output is more useful than sharing the code, and the fact that JavaScript works everywhere makes this even easier.

2. Did you face any challenges in this Unit? If so, how did you overcome them?

The amount of reading required for this week was very challenging; I spent the entire week reading and only read 50-60% of the material in quick reading mode. My notes for the week surpassed 6000 words, with another 6000 expected when I finish my reading. The content of this week was all new to me and seems essential for the coming weeks, so I decided to divide the left material in the coming few weeks.

I think of this week as an introduction to the entire field, and while I may not have understood everything I read; I still think the coming weeks will build upon this knowledge and fill in the gaps in my understanding. I also think that the field of computer graphics is vast and creative; all courses teach the basics and it is up to the student to take it as far as they want.

Reflect on Programming Assignment Unit 1 and using the Repl.it IDE as you answer the following questions

1. Did you find Repl.it easy to use?

Yes, I used to work with Repl.it long time ago, when it was free. We even used it for past courses like CS 1101 - Programming Fundamentals and CS 1102 - Programming 1. It was easy to use to share code written in Python and Java. Repl.it is a powerful tool as it is capable of sharing and executing code in multiple languages, multiple environments such as server or client-side, and it is capable of easily integrating with source control systems like GitHub and Git.

2. Did you face any problems running your programming assignment?

The base code mentioned in the assignment prompt was not available in this week’s handouts. However, when the second week’s handouts were released, the base code was available, I used it as the base to my first assignment. The links for the script tags were all not working as the domain http://uopeopleweb.com was not available, nor the link https://threejs.org/build/three.js.

I used Three.js version 0.170 (current version) in my assignment which was not compatible with the OrbitControls.js file imported through the link https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js; I looked online and found this as a solution:

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
        }
    }
</script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.170/examples/jsm/controls/OrbitControls.js";
</script>

The importmap feature was used to map the imports to the official Content Delivery Network (CDN) for Three.js (Eck, 2018). The OrbitControls was imported from the jsm directory which is the new way of importing modules in Three.js (Three.js, 2021).

3. Was it easy to share the required links for your assignment?

Using Repl.it was not possible for me as I have exceeded the free tier usage. I will be using my local development environment and Github for sharing code and output. The code is all on the client side thanks to the decision to use JavaScript and Three.js in this course, hence, easier to share. Below is the screenshot of the output of the assignment, and the code (only my additions to the base assignment):

const sphereMaterial = new THREE.MeshNormalMaterial();
const sphereGeometry = new THREE.SphereGeometry(50, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

Output

4. Did you experience difficulty creating an account?

I had no problems creating an account. Unfortunately, I have long exceeded my free tier usage and I am not able to use it anymore as it requires substantial payment. I will be using my local development environment for assignments and maybe using Github to share code, and GitHub Pages to share the output.

Repl.it requires payment

References

‌