I have been working with Keavon and TrueDoctor to integrate the node graph with Graphite, an open source web based graphics editor. Modifying images with the node graph (seen in the bottom of the screenshot) allows the user to try out different image operations, and easily modify them later, or to reorder them. This is in contrast to destructive image editors such as Photoshop, which directly modify the image data, meaning that in order to change an operation you have to undo it and then reapply it. Some of my changes are listed below:

• Integrate the node graph as a Node Graph Frame layer type - this allows the node graph to be stored in the editor and run.
• Add a basic API and rudimentary frontend for node graph layers - this integrated the rust data types with the frontend that Keavon had designed.
• Add some additional image effect nodes - some simple image effects such as the brightness and contrast node and the exposure node were added. These have later been improved by a number of contributors.
• Node code cleanup for vector data, and add node creation guide - this PR added some support for vector data in the node graph, and also improved documentation of the node creation process, allowing new contributors to more easily add a new node, which I've updated in Update node guide.
• Migrate vector data and tools to use nodes - This modified all of the vector tools like the rectangle tool to produce a node graph.

I'm continuing to work on improving the node graph in Graphite. These current changes can be seen in the live preview at editor.graphite.rs/

I recently worked with Orlp and TrueDoctor to add a brush tool to Graphite, an open source web based graphics editor being built in Rust. Some of my contributions include:

• Brush tool live preview - this built on the existing brush tool to allow users to preview as they were drawing, rather than having to wait until they had released the mouse button. This involved a lot of work getting the transforms to properly align. I also added left and right square bracket to change the size of the brush, and some linear interpolation when the mouse moved a long way in a single update.
  
• Make Brush tool use per-stroke options and improve its performance - I helped by fixing issues with the position of the stroke relative to the mouse pointer
  
• Allow drawing on top of an image when a layer containing a bitmap image is selected.
• Fix brush layers growing hugely when resizing transforms with Select tool - this fixed an issue where the brush layers would become extremely large because a transform node would square the size of the brush strokes. Fixing this involved some careful sketching of the order in which the affine matrices were applied.
  

I have recently made several contributions to Vizia, an open source desktop UI framework built in Rust, which aims to be easy to set up and declarative (meaning that the developer can declare that a value will always be equal to a variable, so when the variable changes, the UI automatically updates). My changes related mostly to the keyboard navigation, making the later integration of the AccessKit screen reader API easier. I've listed some of my changes below:

• Focus improvements - this PR added support for styling the focused widgets with an outline.
• Trigger buttons with keyboard navigation - which allowed the user to activate a button that was focused by pressing space. I discussed with geom3trik (the main developer) about if this should use the existing mouse down event or a new, more general TriggerDown event.
• Add lock focus to subtree - prevents the user from navigating to outside a dialogue menu, similar to the behaviour with the new HTML <dialog> element.
• Add arrow key support for Slider - this allows users to change the value in the slider with the arrow keys, with a configurable speed.
• Improvements to debug tree (i key) - added a debug utility for displaying the tree of widgets.
• Textbox improvements - added support for double clicking to select a word, and fixed some faulty behaviour when dragging to select a range of text. I discussed the desired behaviour with geom3trik and improved it appropriately before merging.

I have recently made several improvements to Graphite, a vector (drawing with shapes instead of pixels) editor written in rust and available at editor.graphite.design/
​
Features

• Add font menu previews and virtual scrolling #650 - Expanding on some previous work to add a font dropdown, this allows users to see the name of the font in the font so they can see what the font looks like without clicking to select it
• Add the File > Export dialog and PNG/JPG downloading #629 - Allows the svg to be exported to a bitmap file by displaying it onto a canvas.
• https://github.com/GraphiteEditor/Graphite/pull/720 - JPEG exports have a white background and embedded bitmap images no longer use deprecated xlink:href attribute.
• Snapping system improvements and refactor #621 -  Add snapping to points of a shape as well as the existing snapping to bounding boxes
• Improvements to the layer transform cage UX #589 -  Right click to abort whilst still dragging - required changes to the input system. Also aspect ratio is preserved at the start of a drag.
• Migrate dialogs to Rust and add a New File dialog #623 - Generating the dialogs in rust code reduces the number different places needed to add a new dialog. The new file dialog allows users to choose a document size and a file name using this new system.
• Draw the outlines of shapes on hover and selection #609 - This allows users to more easily see which layer they are about to select based on user feedback

Debugging tools

• Improve message ordering to use a stack #707  -  The message ordering now uses a tree like structure
• Log message tree #728 - use ASCII art to improve debuggability of previous code change (as shown below)
• Prevent subsequent panics for already borrowed editor #689 - When part of the editor panicked (crashed) it would then cause other panics leading to people becoming confused over the source of the crash.

Bug fixes

• Fix desynced UI #727 - The radiobuttons where not being triggered properly thanks to the new message sequencing
• Fix IndexedDb in Firefox private browsing mode #721 - IndexDb which mfish is using for autosaving documents is not available in firefox private browsing mode and so was causing the editor to crash. This stops the crash and adds a dialog box warning users that their work will not be autosaved
• Fix path overlays and pen tool click #720 - The path overlays were not being updated on selection change
• Fix ctrl enter to commit text #675 - The ctrl enter shortcut was being sent to the textbox instead of to the text tool meaning that the shortcut no longer worked (thanks to Keavon for spotting this)
• Fix hover outline #673 - The outline when hovering over a shape did not update when the document was moved and only when the mouse was moved
• Restore the zoom to fit behaviour #641 - When zooming on an empty document a division by zero occurred
• Keyboard menu/widget navigation #628 - Users can more easily tab through different menus as well as using the up and down arrows to use dropdown menus.

I have implemented embedding bitmap images into the svg for Graphite, a work in progress vector editor written in the Rust programming language with Web Assembly. The system allows you to drag and drop a PNG or JPEG file from your file manager and then load it into the editor for use as a reference. View the code on GitHub.


Challenges with this MR included handling the file dropping, as well as making the svg performant when a large (several megabytes) image is being transformed around. This was achieved through blob urls so the image data is not stored in the svg node but seperatly in the browser, greatly increasing performance. However this meant I had to load all the blob urls for the images when loading a graphite document.

I came second in the final round of the OUCC in my age category.  I would like to thank Mr Cronk for his support in organising this.

I have implemented colour gradients for Graphite, a work in progress vector editor written in the Rust programming language with Web Assembly.  The colour gradient tool is a new tool based on the new overlays system by @Truedoctor that allow users to draw in gradients, edit the start and and points by dragging the handles and edit the colours by using the new properties panel on the right hand side which has been added by @mfish33. View the code on GitHub.


Challenges for this MR included mapping the graident start and end points correctly into gradient units as well as making it so all of the gradients went into one `<defs>` tag at the top of the svg.

I have implemented the transformation cage for Graphite, a work in progress vector editor written in the Rust programming language with Web Assembly. The transformation cage expanded on TrueDoctor's work adding a bounding box for selected layers whilst in select mode to allow the edges of the box to be draggable to scale the selection; and to add some blue squares on the corners and the edges to provide visual hints.  I also added the ability to rotate the selection by dragging 40px from the edges, as requested by Keavon.

I have implemented the text tool for Graphite, a work in progress vector editor written in the Rust programming language with Web Assembly. Text is stored as a new type of layer that contains a string. When the user is editing the text, the string is rendered as an editable HTML div element for proper OS input handling. This was challenging as the behaviour for these editable DIVs changes in different browsers, with Chromium based browsers inserting extra new lines and not showing an insertion mark when the text input was empty, however Keavon helped me to debug these issues.

​When the text is not editable, it is rendered as a spline so that it can be edited. In order to do this, I used ttf-parser, the standard in Rust for parsing font files, which provides a query for glyphs as well as enabling you to get at their raw curve data,  as bezier curves so no work was needed to convert them to Graphite's svg based paths. I also used used RustyBuzz, a Rust port of HarfBuzz, in order to shape the text. Shaping involves finding the correct glyphs, including any ligatures specified by the font, common examples including 'ff' and 'fi', as well as computing the positions and advances of each glyph, taking into account kerning, which subtly moves glyphs, for example putting a V and A closer together - 'VA'. 

I have recently made several improvements to Graphite, a vector (drawing with shapes instead of pixels) editor written in rust and available at editor.graphite.design/

• Reverse layer panel entries #489 - Keavon requested that the layer panel show the layer on top (rendered last) at the top of the layer panel. This required reversing the order of the layers when submitting them to the layer panel and resolving the issues with the moving of layers due to the indexes being reversed
• Add cursors and hints to global viewport navigation #487 - extends on the work by Asyncth to add the custom cursors to the global navigation (using Ctrl + MMb for rotate / shift + MMB for zoom and MMB for pan in any tool other than navigate). This also cleared the hints list (at the bottom showing possible inputs for the tool) when using the global navigation as the tool cannot be interacted with whilst navigating. Required refactoring to correctly restore the tool cursor and hints after navigation ended.
• Do not transform layers when transforming a parent folder #481 - Fixes a bug where transformations where not applied when the parent folder and the layer were selected at the same time (gif in MR)
• Fix rotation input #472 - mfish had accidentally caused the display for the document rotation to be clamped between 0 and 1 due to TypeScript silently using default values when undefined is passed to a function.
• Migrate to using MoveSelectedLayersTo #469 - Large refactor to change the way layer movements where specified (previously by giving a new neighbour to the place to insert the layers) to allow inserting layers into empty folders via dragging in the layer tree. I also had to fix the insert index code as the old method was corrupted when moving layers down the tree. I also fixed a bug with some of the layers being moved being deselected as well as the dragging in the tree only applying to one layer.
• Refine navigate tool zoom #461 - As requested by Keavon, zoom with navigate tool is relative to the mouse position and snaps to increments whilst holding ctrl.
• Resize panels #443 - allows the boundaries between panels to be dragged. This taught me a lot about flex boxes and event bubbling (the resize event was not triggered causing black areas and a corrupted ruler).
• Fix one item folders #442 - Fix a typo that caused the layer inside folders with one child not to be displayed.
• Add navigate tool #441 - Expand on my previous work adding global navigation to add a specific navigate tool with similar functionality but more accessable key binds
• Add cut, copy, and paste to the Edit menu #440 - bind the buttons in the dropdown to the relevant messages.
• Remove transformations from LayerData #439 - Move the position, rotation and scale attributes from the layerdata and to the movement handler.
• Populate layer entry cache #437 - Fix a bug where the layer tree would not be loaded when loading a previously saved document.
• Update intoiter syntax #436 - Rust 2021 is stable!
• Remove snap rotate from layerdata #435 - Move the snap rotate for the document navigation away from the layerdata.
• Drag to rearrange layers in the layer panel #434 - Major MR allowing the layers to be dragged in the tree
• Snap while dragging with select tool #433 - Builds on previous work on snapping to snap whilst dragging with the select tool
• Fix console error caused by the Pen Tool #432 - Fix error with overlays when switching documents
• Fix line centering #431 - Centring with alt whilst using the line tool caused incorrect behaviour that required careful planning to resolve to make it also work with snapping.
• Fix Ctrl+scroll wheel zoom point relative to the mouse position #429 - I had accidentally multiplied by 2 when adjusting the translation so that the cursor remained over the same document position when zooming.
• Fix new document position #421

I have implemented snapping for graphite, a work in progress vector editor written in the Rust programming language with Web Assembly. Snapping is quite an important feature of a vector editor as it allows users much more precision when drawing shapes and moving shapes around. One of the main challenges I had was caching the snap targets in a sensible place as TrueDoctor requested the tools did not have mutable access to the document so that they could be multi-threaded later.  I also implemented the toggle functionality with the magnet option in the toolbar at the top. The functionality is available on the master branch build of graphite at editor.graphite.design/ The code changes are available at ​github.com/GraphiteEditor/Graphite/pull/386/files

I have made the rulers functional for graphite, a work in progress vector editor written in the Rust programming language with Web Assembly. This was a smaller MR (merge request) with the main challenge being to dynamically adjust the distance between the major numbered lines so that the increments where round numbers. I achieved this through base 2 logarithms, a function which I had not previously come across. This allows the interval to double or half as many times as necessary for the current zoom, whilst maintaining a sensible gap of 51-100px between each number. I also had some issues with the modulus function not working correctly on negative numbers in javascript which took quite a bit of debugging to track down. This emphasized for me the value of planning things out on paper. The functionality is avaliable on the master branch build of graphite at editor.graphite.design/ The canvas can be moved with the middle mouse button, space plus left mouse button drag or with the scrollbars after drawing a shape.

I added a way to transform layers with the mouse by pressing the 'G', 'R' or 'S' keys to grab, rotate and scale the selected layers in a similar fashion to blender. I made shift slow the transformation speed by a tenth and ctrl to snap the transformation to intervals. I also allowed users to type in the value for the transformation with the number keys if they wanted a specific value and constrain their transformation to one axis with the 'x' and 'y' keys. You can try the build at https://714e13e8.graphite-master.pages.dev. This was one of my bigger PRs (Collaborating with pull requests - GitHub) at about 550 lines of code available at github.com/GraphiteEditor/Graphite/pull/356/files.
​
I worked closely with @Keavon to refine the UX with things like reversing an operation if you switch directly to a new transform operation, removing the negative when all numbers are deleted and ignoring presses to decimal point when there is already a decimal point.

I recently made the scrollbar functional in graphite - an open source drawing program for the web. This built on TrueDoctor's work of finding the bounding box of artwork.

The scrollbars where difficult to implement because they needed to allow users to scroll infinitly far by reserving a space at the end of the scrollbar whilst also not just sharply stopping as they reached a certain point but slowing down the position change as it got further up the track (as specified by Keavon).

My initial approach with this caused some strange issues like the going back over the artwork when the scrollbar was dragged very far or when zoomed out very far (thanks to Keavon and TrueDoctor for finding these problems).  My initial implementation also caused the scrollbar to stop when the artwork was inside the viewport which combined poorly with the dragging mechanism.

This taught me about planning things out on paper as well as responding to feedback.

I have recently been learning Rust, a programming language similar to C and C++ in speed and syntax but with an emphasis on memory safety; for example handling if a variable is None. I found Graphite whilst looking on a Rust newsletter (gamedev.rs/news/020/#graphite). Graphite is a new vector editor built using Rust. The master branch can be found on the web thanks to WASM, which is a portable binary-code format for executable programs similar to assembly except it can be run on all architectures.

Above is a screenshot of the current master of graphite (editor.graphite.design/). The source code is available at their GitHub repository github.com/GraphiteEditor/Graphite. I have made several contributions available github.com/GraphiteEditor/Graphite/pulls?q=author%3A0hypercube+is%3Amerged including

• ⬠ Add polygon drawing tool - this allows the user to draw hexagons and other shapes (once the UI is implemented)
• 🎨 Add colours in Rust - This allowed the frontend to specify the current colour which was then stored with any new shapes that where drawn and added into the svg that is displayed for the user.
• Add preview for rectangles / shapes / lines - This build upon TrueDoctor's work on adding a preview when dragging a rectangle and applied it to the other tools
• Add a movable canvas with matrices - This gives all layers a matrix transform and adds the TransformLayer operation. This also allows the user to move the document around with Middle mouse button drag. I found the following guide useful when learning about matrices https://docs.rainmeter.net/tips/transformation-matrix-guide/
• Navigation - This built upon my previous PR in adding the ability to zoom and rotate the viewport with a series of shortcuts as well as the widgets at the top.  This was the first time I'd used the vue framework so I'd like to thank Keavon for the support.
• Allow transforming layers - A bugfix adding the ability to transform layers as well as just folders as I'd used the wrong function in the matrices PR.
• Unmount working on select - Another small bugfix that fixed a problem where when selecting layers with the select tool then layers could not be nudged around or changed visibility until a new shape was drawn

I'm finding that working on a large codebase with other more experienced programmers is helping me mature as a programmer and I'd like to thank TrueDoctor and Keavon for being so supportive.
I was really pleased to receive the following feedback from one of my code reviewers who congratulated me on 'the awesome work you did on this, it's so nicely polished and I hope you're proud of your work on this feature.'

I'm delighted to announce that my game, Runaway Trains, has made it through to the finals of the BAFTA Young Game Designer - Game Making competition.  

The list of finalists is available at: 

And the BAFTA page for Runaway Trains is here:

I have been learning Haskell with the Programming in Haskell book along with an online video course. I chose to learn a functional language because it gives me a different approach to programming which is very valuable. Whilst programs in Haskell can be beautiful and concise, it is very hard to get your head around writing it as it uses some completely different programming paradigms to something like C++.

I have also been learning Rust, a relatively new programming language with a focus on safety and speed. It has no runtime and it can reach speeds of C whilst maintaining type safety. To achieve this safety, it has no Null, it also has variables as non mutable and it only allows one mutable pointer to a data structure. This means it can catch the most common crashes at compile time.

Although to begin with it felt like I was battling the compiler, I now recognise how useful it is. To learn rust I have been using The Book - doc.rust-lang.org/book/

I am very excited to have won the Oxford Computing challenge 2021 (Intermediate). I would like to thank Mr Cronk and the OUCC for continuing to run this competition in these difficult times.

I have now completed runaway trains, a game made in UE4 for the YGD competition. In the game, you control the points to a model railway and have to stop the trains from crashing.

I am really pleased to say that I have qualified for the finals of the OUCC.  I would like to thank my teachers for organising this.

​

I've passed the TensorFlow in Practice course at Coursera that is taught by Andrew Ng and Laurence Moroney.  There were four courses, each of which lasted four weeks, and each week had a coding challenge that I had to pass to progress.  I really enjoyed the course and thought the teaching was excellent.

My artwork for Water the Crops was featured in section 3 of "BAFTA Young Game Designers Initiative Impact Report": https://www.bafta.org/sites/default/files/uploads/ygd19impactreport.pdf.

I've joined the Coursera course "Introduction to TensorFlow for Artificial Intelligence, Machine Learning, and Deep Learning".   I enjoyed the Udemy course on Unreal Engine/C++ and found it a good way to learn.