https://dcmp.moalkaf.com

The animation works excellent with user interaction. I think it complements the Space theme of the narrative.

I would Like to have had more time to work more on a narrative. Rather than just re-using information. and forwarding people to a website. I would like to experiment and create something nearer to what MISSING as made. Using more animation (multiple layers of javascript canvases that interact together) and image and video. Possibly to use video in the website to see what option there are. i did not look further into this side of web making.

I am not 100% happy with the colours of the font. If i were to change something I would fix the colour pallet used. I thought bright colours (Black, Blue, Yellow, White, Purple) all seem to be of space, especially when looking at images of the different solar system those are the colours that showed up a lot.

Possible if i had worked in a group, splitting the work load. I think it would have been possible to create a deeper interactive experience.

When i start this course I had pruchased my own hosting for my personal use and to show case my work. I also have my own domain name, I find it much easier to have one domain that is my name: www.moalkaf.com that i can create different subdomain for different section and create different websites. For example this DCMP blog is hosted on my university section of my sub domain. https://uow.moalkaf.com the website is separated to different modules.

For this website i created a new subdomain.

https://dcmp.moalkaf.com

i forwarded the website to a specific folder within my hosting. Now my website is live and working. Using FTP access application i can copy the files created, the HTML doc and all the .js files into the folder for the url.

I had noticed that when scrolling with the mouse wheel the whole canvas would move slightly. i thought this did not like nice on the website. The scrolling was enabled on the webpage. I read in the reference there was an option to lock scrolling when the event is called.

however, when enabling this option you could not scroll the text box. i searched for available options to add a button to toggle this option.

I can create a button in P5.js that can use to toggle this event. i used this following code:

buttonfly = createButton("Start Flying"); buttonfly.position(windowWidth - 150, 110);

Using windowWidth I can responsively position the button to be in the same place at any window width. I also added this code in the windowResize to the button are redrawn anytime teh visitor changed the window size. This made the website more responsive to size adjustment.

function windowResized() { resizeCanvas(windowWidth, windowHeight); buttonfly.position(windowWidth - 150, 110); }

To add interactivity to the button i added a function to toggle the scrolling so the event can be called when the user clicks on the button:

let flying = true; function toggleFlying () { flying = !flying; if (flying == true) { buttonfly.html("Start Flying"); } else { buttonfly.html("Stop Flying")} }

so anytime the user clicked on the button the scrolling would be enabled or disabled. buttonfly = createButton("Start Flying"); buttonfly.mousePressed(toggleFlying);

this worked nicely as if the visitor wanted to "fly" at a faster speed they could lock the scroll and scroll freely with the stars.

When i tested this out I thought maybe some music would help the atmosphere of flying through the stars. However, I noticed that many of the web browsers block audio media without any user interaction. I thought to add another button to toggle playing and pausing of the music at the discretion of the user.

buttonMp3.mousePressed(togglePlaying); function togglePlaying () {

if (!song.isPlaying()) { song.play(); song.setVolume(0.3); buttonMp3.html("Stop Sound") }else{ song.pause(); buttonMp3.html("Start Sound")

I just needed to add the MP3 file to the assets of the webpage on the hosting site.

This where the last things that i added to the website to finish the experience.

I wanted to add a navigation bar. Where the links go to a different section with in the same page.

The only time i wanted a new page to load and open was all the link to the NASA website for more information.

So i noticed i could add an anchor in any place with in the HTML document, and this create a Href link with a # that stays on the same page but change the centered documents. Using the the code below to create different section for the planets that can be navigated too.

<a name="Section name"></a>

<div class="Navi"> <a href="#Section name">name</a> </div>

As I had worked an animation I had created was space related, I had decided to do a documentary style narrative. An informational piece about the planets in our solar system. Where the visitor can scroll through all the information. and read everything about each plane in one go. Or use links from a navigation pane to jump to sections of the information.

Using data and information from, there was no copyright and the information was open to use but not for commercial use:

https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/

All the information on my website was taken from the Solar System Nasa Website. I felt with in the time scale that this would be best to do so i could have more time, learning and trying new things in coding. I also thought to about adding simple images, i didnt want to take away from what i achieved with a javascript sketch as this was the main attraction of the website.

I used the overview section for information for each planet with in the website. I placed links that open a new page that direct the visitor to the Nasa website to read more.

Images

I found assets on Adobe Stock images, as i was able to gain a license to use download images.

The images where in verctor images, so i was able to isolate the single planets convert them to new PNG with transparent background.

Now that i have the information with-in the website. I can work further on refining the code, both HTML and Javascript.

When adding HTML elements I noticed that the canvas was drawn after add the HTML elements such as in the example below.

I search option how to use a canvas as a background I found a another video by Daniel Shiffman explain how to manipulate the position of a canvas with in a browser.

This is done change the CSS style z-index, usually each element has default value of z-index of 1. By change the z-index to -1 that canvas will be drawn in the background. Also i aligned the canvas on the top.

adding the code to the: <head> <style> canvas {vertical-align: top; z-index: -1}

For the full screen effect i had to change this to be the full size of the window. in the p5.js references there is an option to make the canvas the size of the browser window height and width.

createCanvas(windowWidth, windowHeight);

i noticed that when the browser window was change after the canvas was drawn that size was not changed. i wanted the size to be responsive to the size of the browser window even if the visitor changed the window while visiting the site.

P5.js has a function the is searching for an event called window resized:

function windowResized() { resizeCanvas(windowWidth, windowHeight); }

This event always listened if the browser size has changed, and when it noticed this event it redraws the canvas to the new browser window size.

When adding text to the HTML file, I noticed a large block of text would overflow at the bottom of the canvas. and u would be able to scroll pas the canvas.

Using HTML i created a DIV scrollable text box.

Giving the Div element a specific width using a percentage of the browser window. I found 40% to be a sufficient number for the text to in the middle. However for the height using a % would not be responsive to that size. I found after searching online, using 'vh' would be responsive to the drawn page.

<div id="system" class="center" style=" height:85vh;width:40%;border:0px;margin-right: auto; margin-left: auto;font:20px/30px Georgia, Garamond, Serif;overflow:auto">

This would be how the majority of the text would be displayed.

The visitor would need to scroll through the text to read and in turn the scroll would interact with the stars adding some speed to them.

After completing the processing example. I start to look at how I can place this within a website. I found Daniel Shiffman has tutorial videos using P5.js. It uses the javascript language as well but it uses also has an HTML file to draw the canvas in a web browser rather and a Java applet running on its own.

I thought it would be the best way to start.

I downloaded an example, The files needed for this to work, are the javascript p5 libraries to reference the code used within the sketch.

It also included an HTML index file so the web Browser can load the used files.

In the header of the HTML files, it is important to add the sketch file and libraries used. Such as the example files.

You must include the libraries and assets in the folder the website will be hosted so all the javascript sketch and website works.

Converting from processing to P5.js is not straight forward. Below is example from the p5.js website to change from processing syntax to p5.js syntax.

function setup() change from void setup() to function setup() {
createCanvas(640, 360); change from size() stroke(255); is the same noFill(); is the same }

function draw() change from void draw() { background(0); is the same for (var i = 0; i < 200; i += 20) change from int i to var i {
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); is the same } }

Fortunately, there is a website that tries to convert a processing sketch into a P5.sketch which makes this stypes much easier.

I would like the user to manipulate an animation and/or the storyline with the use of just scrolling. Going back and Forward.

Using WebGL and Javascript might be the easiest way to create interactive graphics. Rather than using video files that have an action of click and to play.

As I had played around with ActionScript in adobe animate, and started to look at basic javascript Code in processing as they seem to be similar and thought it would be easier to transition. I had a simple understand if how things should be. I found a Video Tutorial to Create a moving StarField By Daniel Shiffman. I thought to watch the video and type the code out to try to understand the code, rather than copy all the code from his Github repository.

After completing the example, I wanted to try to make two changes to achieve what I was after. Currently, the sketch draws the canvas in the specified pixel size using this code: void setup() { size (800, 800); }

i want the canvas to be full screen. Searching in the references for Processing, i found a a reference called full-screen, i replaced the following code:

size ()

with

fullScreen();

Another option I wanted to change is the speed of the movement of the stars as in the original example it was mapped to the mouse horizontal location:

speed = map(mouseX, 0, width, 0, 20);

the mouseX give a number as large as the screen pixel, such as 0 and canvas width. This number is too large to be used as the speed variable, therefore it is mapped between 0 and 20.

Also, I wanted to change the method of using the mouseX position as the variable to change the speed to me the Mouse wheel scrooling usuing the mouseWheel event:

I created the code to replace the speed variable:

void mouseWheel(MouseEvent event) { float e = event.getCount(); println(e); speed = map(e, -2, 30, 0, 20); }

I used print line of the variable e to see the range that is given from the mouseWheel event. and I noticed it ranges depending on the string the mouse wheel is scrolled. and then mapped it to the appropriate ranges to not be to large to the speed variable is not to large. This gave me the desired effect.

6 - creating a interactive animaation with code - javasript with processing. usuing danial shiffman example of stairflight page. From other classes i know how to create interactive coding with processing as it uses the language process.

how ever he has started with only a small window canvas - and the speed was connect to the mouse movement.

researching how can i place a javascript canvas into a webpage, i found p5.js , build for making web interactive javascript canvas.

I researched reference if there was an option to connect the speed of the stars moving with scroll. as i wanted the animation as a background.

The mouseWheel option gave values for how fast and hard the scrool is used. either with a mouse wheel or scrolling with a touch pad.

i map the the code contrained the criables btween two managable variables i did not use all of the code was the speed was be too large of a number. and it worked.

after - i wanted this to a full size backgounf, doing research for p5.js there was an option in createCavan to say the window height and width, so the back ground can be the same size as the visitors browsers window size.

the next problem i wanted to solve, when changing the szie f the browser after the website had loaded the canvas size would stay the same.

there was a event that listened for broswer resised and redraw te canvas anytime the page was resized. this solved the issue.

that next issue was placing the canvas in a different layer, because when addint html elements to the webate that would not be visbale, they where drawn either below or over the canvas.

I found a video stating, the layer html 5 and ccs is called Z-index, this was learning from this video coding traing but a p5.js canvas as a back ground of website. Changin teh style z-index of the elemnt in the wbesite changed is positon with int he wbesite and i was able to put html elements infront of the canvas that user can interact with can interact with.

in HTMl i search fro an option to but a search box. because i had turnnif othe option to scroll the pagebecause i did not want te user to scrool below the backgorud canvas. there for i had to place text with in a text put to can scrool with in the oage.

and this scroll aided in making the animation work softly in th background.

• Foreshadowing and epiphany.

  • Give hits of whats going to happen.
  • For example the music in jaws.

• Epiphany example, narrative is an individuals perspective of a surrounding landscape”

  • Works same in film and in books
  • Giving prespective.
  • Visual arts decices, 3 piont presentie doreshortinging, giving an idea of where the viewer is standing.
  • The idea of perspective changes because opportunities can be given to change the perspective and angaging them within in the story. Change perspective to read from a different character.

• Th context of the person telling the story.,

• The direction go scroll is important when looking at content on the web,

  • Many graphics option that allow us to engage within a story.

• Plot structure in interactive narrative

  • Different narrative types of structure
    • Linear narrative
    • Parallel narrative
    • Non-linear narrative dynamic narrative
    • Branching narrative

• Story telling is joke telling -

  • confirming some truth

Watching a Video from TedEX

• Make Me Care
  • Making a promise that continue will lead to a better time.
    • Well told promise - promise to have a good time, once upon a time.
    • Storytelling without dialogue
      • They want to work for the meal and they don’t want to know they are doing that
    • Human are born problem solvers - well organised abscise of information.
    • Complete the sentence - naturally want to finish.
    • The invisible application that hold us to the story.
    • Darma is anticipation mingled with confusion.
    • Story had guidlines not hard fast rules.
• Use what you know, express values the deep in the core.

I found it difficult to come up with an idea. I was tasked to re-tell a story in an interactive and non-linear form. There are many different formats to a webpage. 1- linear scrolling on the a single page, all the information is placed into a single page. that the visitor scrolls to reveal more data. http://www.inception-explained.com where scrolling reveals more information and show some animation. The user only interaction with the website with scrolling, In Two direction UP or DOWN. Down progress the story, Up reverse the story.

2 - Links to navigating to different pages with a back button it is possible to reach a different page and ignore where u started. Such as www.wikipedia.com. Links within a page lead to another page and so on.

3 - 3D navigation page. such as https://www.sbs.com.au/missing/ which uses animation/ images/ video to tell a story that that is progressed by the visitor. This website may include an interactive section where the vistor can click on or scroll.

What stood out for me is the Full lengh page, that revealed more information with scrolling.

The original idea.

I had originally planned to show a map of an specifc area, such as oxford street from about. Place points along a route that the visitor can click on to receive more information. To have an experince of a walk down oxford street.

I start looking at Google Maps API to see what is possible but at the current level of my coding, it was difficult for me to understand. I look at other websites.

Looking at MISSING - the true crime story, I found thought the developer section that they were about to achieve this website using Javascript. and they had multiple layers of Canvas to achieve the full effect. To interact you would use the mouse click, the mouse location would pivot and pan the view around, and the scroll would actil like a fast forward or reverse to the storyline.

Starting of Coding

• Coding Basics

  • Started for sharing information - scientific databases.

• Basic webpage

  • HTML
  • CSS
    • Internet is a server with a bunch of links. URL is used to cover up the numbers. How ever website are IP address and DNS is used as a phone book to connect URL and to the Domain IP.
      • DNS = Distributed name Services
        • Maps name to the IP address
      • HTTP
        • HyperTest Transfer Protocol
      • HTML
        • A separate file on the root folder of the domain hosting
        • HyperText Mark-up Language
          • All different content for a webpage. Using tagging for each section of the page content.
            • Giving everything a label to what this contest is even thought content is just plain text. And with < > is its labels *<p> is a paragraph.
              • Inclosed between <p> Paragraphed </p> what ever is inside will be considered as a paragraph.

• CSS

  • A separate file in the domain root folder.
    • Stylistic tools
    • Both are used and related together.

HTML SYNTAX

• Element Name - Identifier for different types of content
  • TAGS include elements in angled brackets and identify (mark-up) different types of content
  • Elements can be nested inside other elements
    • Child Elements and Child Tags

Example for Basic HTML, Using Bracket coding software:

Using this software it includes (by downloading a third-party software extention) an extention to download the basic HTML structure without the need to start from a blank page.

I create our first simple webpage to understand the basics.

In Web, We have been tasked to Create a interactive narrative displayed within a website.

The schedule for the next 4 weeks:

Telling a story with web

• Telling a story with perspective.

• You choose how you navigate. And become a part of making of the story.

• The user can be a character or author in the story.

  • Hyper link
  • HTML

• Web was designed to connect databases together.

• Traditional idea of narrative

  • A leaner process. Serious of action points that link together and climax.

• Canonical storyflow - straightforward story.

  • Non leaner story flow.
    • But have lots of options to add information and to add side stories.
      • And eventually ending with the ending.

• Elements of drama.

  • Six Elements:
    • good plot.
    • Character.
    • Thoughts.
    • Diction.
    • Song.
    • Spectacle.

• Summaries. Difficult to read big block text. So use images animation and story. Or implied story. Reader to do the work.

• Code is like telling a story.

  • It’s like interactive story telling.
    • Such as a flow diagram.

Can use Plot generator. For idea.

Things to think about for the brief:

• Structure of Project.
• Main programme to be used