Creating Website from Scratch

During the group project of the module, I was assigned to the marketing team to present our final product to the audience in an interesting way. While brainstorming we thought it would be a great idea to have a website that people could visit and view or progress on. I wanted to take on this task because in year one for our portfolio site we had the option to create a site from scratch yourself or use a template with WordPress. At the time I chose the latter because creating a website from scratch got me intimidated. Now I have developed a different thought process where I take on a challenge instead of backing down and sticking to the comfort zone. This creation process has made me aware of my technical capabilities and definitely boosted my confidence when entering unknown territory.

I had to do some research on how to make a website from scratch, and asked my fellow peers for help. They recommended me to work in Jetbrains Webstorm IDE, which is a development environment that will allow me to work in HTML and CSS with ease thanks to intelligent code completion and the IDE running dozens of inspections as you type detecting potential errors pretty much instantly. I think that a lot of time has been saved thanks to its advanced features.

Together with the marketing team we already defined a color palette that would be used for the project. In addition I designed the logos and wave pattern that can be seen on the web page

In order to have the website work on all kinds of devices it had to be responsive. Bootstrap is a popular HTML, CSS and JS library that allows you to divide your site up into sections with rows and columns. When the window size is adjusted, bootstrap will adjust the contents respectively keeping everything inside its boxes nicely ordered(and scaled if you added the correct class and CSS to it).

During the creation process I noticed that if you would look for creating a website, a vast amount of the search results will be paid services that offer templates and hosting plans. There is quite a lack of video tutorials out there but luckily there were alternatives to obtaining knowledge. There are a lot of questions of those who came before about HTML and CSS using Bootstrap with various possible solutions given on websites like Stack Overflow. Also w3schools.com and the official bootstrap site itself offered very detailed information regarding the coding of the web page. Something that was challenging at times was formulating my search query correctly. I was not familiar with the terminology in the beginning but as time went by I quickly adapted to the jargon and managed to search for answers more effectively.

The total creation process took 3-4 days, working from early morning till afternoon. Creating a website is a process of trial and error. You add a new piece of code, save the file and refresh the browser to see if the code gave the result you were hoping to achieve. One source that was the most helpful was a man going through the process of creating a simple web page with bootstrap 4. This gave me great insight in syntax, semantics, the various elements and the overall structure that the code should be in.

The only thing that I didn’t manage was getting the website online. I don’t have the hardware to run a server on and hosting plans were not something I wanted to purchase. Creating your own server for hosting does seem like a fun project to follow up on in the future. You are still able to view the website by downloading the .zip from the link and then opening the “index.html” file in google chrome.

***Note that the contact information on the website is fake and should not be used for contacting me.***

See me going through the website here:

Download the .zip here

Theory of Knowledge

This essay was a philosophical task in which students had to discuss a statement with reference to two areas of knowledge. I chose to include this in my portfolio because it made for an interesting discussion.

the statement was: “We know with confidence only when we know little; with knowledge doubt increases” – adapted from JW von Goethe

The essay can be viewed and downloaded from HERE

A Firefly’s worst enemy- interactive java script project

As final project for the Algorithms course, a colleague and I were tasked to create a program that featured (almost) all of the material that was taught during the module. In the end we came up with a game where the player is able to drag a lamp over the screen, which is attached to a rope. By letting go of the rope a mass-spring-damper system takes care of the transient bouncing animation. If any of the firefly’s are caught in its path, they will explode and make a satisfying electrical sound. The fireflies are programmed such that they will be attracted by the lamp, fly in flocks over an ever-changing vector path that provides them the direction they should be going in. the vector path is defined by Perlin Noise, which is a gradual randomization creating the flowing animation of the firefly flocks.

However, Processing (the program you need to run the interaction) can’t handle too many sounds at once so if the sound starts to act unexpected, simply close and reopen the program. Instructions for the program are: left mouse button to displace the lamp, and letting go of the left mouse button will make it oscillate to its equilibrium position. The right mouse button is to spawn fireflies but take it easy. The program can be downloaded from HERE, but below is a screenshot if you don’t want to.

image of interactive program

Fake Art Installation

We were tasked to create a vice-styled article about an art installation that didn’t exist, which we ourselves supposedly created. in addition the article had to be written from the perspective of an Art-installation maker. This was simply a fun creative writing task but i found it worth sharing.

Perlin noise vector flow field

For this module I decided to improve my coding skills by watching and reading countless tutorials and informational sites about JavaScript. JavaScript is used a lot in the Creative Technology course and when it was reintroduced in the start of module 4 I found myself lacking the essential basics to start writing programs for the class Algorithms for Create. I wanted to improve my overall understanding and skills of programming so that in the future I would never run into the issue again.

In the end i believe that a better understanding of JavaScript will help me understand other programming languages much quicker as well, as they all feature some similar structure.

The most fun part of this learning process is that you can practice and aren’t obligated to only studying other sources. By practicing coding myself and solving my own problems, my overall understanding has exceptionally expanded. It is satisfying to watch a program do what it is supposed to do and when i accomplished that, i want to add more functionality to that program. That loop keeps going on and on now and programming has become quite addicting.

Thus, for this module i decided to code my own art work with a sophisticated algorithm called Perlin noise. The method is used in procedural content generation but is different from a random number generator. random numbers can be 1 9 4 3 5 7 where as Perlin noise would me more procedural like 4 5 6 5 4 3 4 which is great for creating smooth random motion.

The code is animated but I will show screenshots of my work below.

Screenshot of code in action

The coloured particles move over the screen by following a vector field that passes the vector heading values into each particle. In combination with Perlin noise it creates the illusion as if the particles are flocking/staying together and move in a very flowing and natural way. It was great to be able to create this piece and it was surely worth the effort.

You can download the folder with the classes HERE. In addition you will also need Processing for your system. when you open any of the classes in the zip file, click on run in the top left corner and then press space bar to see the flow animation in action yourself.

3D Modeling – Maya

During the course of Module 3 we were tasked to create the scenes below using Autodesk Maya, a 3D modeling software. This was the first time i got to work with such software and it instantly got my attention. Being able to think of a creation in your head and then realizing it using 3D modeling software is extremely satisfying. I would love to create more for personal use in the future and perhaps create a little business out of it too.

Below is the gallery of creations up to now, of which the last 2 were performed with Python instead of modeling each cube by hand. For full-quality images click HERE

Data on transport during COVID-19

During the semi-lock down period in the Netherlands a series of datasets regarding the transportation sector were analyzed and converted to comprehensible graphics. The data includes that of the Public Transport (OV), Schiphol (airport), a road traffic related visualization and search term inquiries related to travel. The file should be downloadable from the icon above and it that’s not the case you could try the link to Drive below.

If the above link did not work, you can try to view the workbook on Drive by clicking HERE

Extra Lazy Susan

I like the word ‘indolence’. It makes my laziness seem classy.

Bernard Williams

First First off: This is an ongoing project, tools required for finishing the project are on university grounds which can’t be accessed due to COVID-19.

Second First off: A lazy susan is a turntable placed on a table to act as a food distributing aid. Food can be placed on top and be rotated around the table, so that you don’t need to lean over the entire table to grab something of a plate. The extra lazy susan is a personal project, that will allow you to turn the table without touching it, like magic.

It started off with research, finding the right components for the job that could be delivered in the desired time frame and would not cost a fortune to acquire. Light Dependent Resistors (LDR) are able to vary resistance based on light intensity. The resistance decreases when incident light intensity increases. So, the voltage over the LDR drops to a certain number (between 0 and 1023) depending on the amount of light that is blocked. Two LDR’s will be used to sense if the user wants to turn left or right. If both LDR’s are blocked at the same time, the system will stop and flash an LED, giving feedback to the user to only use one direction at the time.

To control the motor it is easiest to use either a stepper motor or DC motor in combination with an H-bridge, to easily switch polarities for going left or right. An H-bridge will supply the necessary power for the motor from an external power source relieving strain on the Arduino’s power supply, who’s current source probably wouldn’t be up for the task. The task requires high-torque, low to medium speed as the table can be quite heavy and it is not desired to spin all the food onto the surrounding users. The ideal H-Bridge to use is a DRV8871 dc motor driver but cost a fortune to ship(from adafruit), which resulted with having to use a (much cheaper) L298N. A less efficient Dual H-Bridge but it will suffice for the prototype. In the mean-time, a DRV8871 from Aliexpress has been ordered and will be used in the final build.

Stage 1: prototyping

Prototype ELS.

Unfortunately, it never got past this stage due to the university closing down resulting in the inability to access the materials and equipment needed. This involved 3D printing and laser cutting services, and PCB/wires/soldering stations. I wish i could show more, but this will have to do for now.

Measurements of motor for 3D designed parts.

Final Project Results

Interactive video project

For the final project of We Create Identity, we were tasked to make an interactive video. The group and I decided on making a video about a boy who walked past the wrong alley at the wrong time and witnesses a robbery. At this point the audience gets to make their very first choice, with many more to follow. if you would like to check out the video, download the map from here.

  • INSTRUCTIONS:

When the folder is downloaded, open the “index” file in Microsoft Edge. If all you see is a black screen, zoom out with “Ctrl – ” until you see the pause/play and stop button appear in the bottom left of the window.

Professional Development Module 1

In my portfolio I talked about the Google SketchUp design I made In grade 10, and a physics lab report where I measure the average diameter of a human hair by using a laser. These were projects from the past and I hope to (soon) have projects to post on the showcase portfolio that were made at the UT

 

Workshops

  • Student attends at least one workshop. (Deepening/Widening)
  • What did you think of the workshop? What did it give you/ what did you learn you can take  with you in your further development as CreaTer?

I attended the Javascript workshop where we were given a booklet with step-by-step instructions on how one of the student assistants made their game, and later on we were tasked to create our own game. Unfortunately I haven’t made much time to finish that game since it wasn’t obligatory. I learned some new Processing skills and implemented these skills in the game as well. I learned more about the Processing program and it’s endless possibilities to make your ideas a possible reality, you just need to be willing to go through the entire process of trial and error.

The second workshop I attended was the Photoshop workshop where Carlos and I worked together since I didn’t have photoshop installed on my laptop.

Creation made by Carlos & Cedric

It was a nice workshop to refresh my photoshop skills with since I haven’t touched photoshop in years. The people in charge showed a photoshop feature and tasked us to find an image and use that same feature. This went on for numerous times until the beamer overheated and they had to improvise. This is what lead to our final project of the day; the album cover for our imaginary hardcore band, the Screaming Turtles. I will definitely take the photoshop skills with me for use in the near future because it is a great way of making graphical imagery for future projects.

 

Guest Lectures

  • Student attends at least two lectures of a guest-speaker on Wednesday, the 24th of October (Exploring)
  • What did you think of the guest lectures? What did it give you/ what did you learn you can take with you in your further development as CreaTer?

The guest lectures of Wouter Eggink and Douwe Dresscher were a nice way of introducing us to people with jobs that involved technology. My attention span is too short to be listening to people for that long and since we weren’t allowed to make notes (which is a bit odd) I have forgotten most of it. Luckily one of my fellow peers (who I will not name because he/she might get into trouble) did manage to make some notes and refreshed my memory. I recall Wouter Eggink being a designer and this was a field I was very interested in because of my passion for designing. From Wouter I learned about his life as a designer and the projects that he worked on. His view on design being the element that makes a product successful is a view that I fully support because when it comes to products, it’s the appearance that usually matters the most. This is something I’ll definitely keep in mind when designing a product in the future.

Douwe Dresscher is the Smart tech teacher in module 5 which is something I’m really looking forward to because the information that he gave about the projects that he worked on, such as the 3D point cloud that makes a 3D map of the space that is scanned, sound awesome. The 3D point cloud is something that I’ve been wanting for myself to scan objects and adjust them for 3D printing but unfortunately I haven’t ran into any free-consumer software.

Final words

  • In what direction do you want to grow as a CreaTer? How could you / do you want to describe yourself as a CreaTer? What are your personal motivations, ambitions and expectations as a professional in the field of Creative Technology? How could you take control of your own professional Development?

As of now I am more of a designer when it comes to CreaTe. I would like to grow into more of an electrical engineer so that I can build my own creations and bring my ideas to life, instead of being stuck on the designing part and handing all the fun over to other people. My personal motivation for now is me wanting to get a job I enjoy that pays good money, and CreaTe is a course that is perfect for me, and I hope to find a job that suits my needs too. My expectations are to, in the future, work on various projects with teams to enhance the quality and quantity of my portfolio so that I have a good start when I have to look for jobs. Taking control of my own personal development happens automatically since the university life is mostly about teaching yourself the necessary (and additional) information. I am happy to have chosen this course and can’t wait to find out what my future career as a CreaTe student beholds.