DigiCraft Studio

Web development has always been my favorite part of Computer Science. Recently, I completed an internship where I learnt CSS, and ever since, I have been yearning to create a website. The opportunity presented itself to me through Autodesk’s First Time Author Contest. Reviewing the previous Instructables on Pinterest, an idea sparked in my head to combine two of my favorite things: crafting and coding.

Thus, the website DigiCraft Studio came to life. Throughout this project, I have used HTML, CSS and JavaScript to code. The result: A website where users can learn some origami, create a collage and try out fun and engaging digital craft games. In this Instructable, I will be sharing screenshots of my website and code step-by-step. You can follow the steps to develop your digital crafting website. I have attached a video of my website in the last step, which is under the file name "final.mp4".

Here's a helpful link for learning the basics of CSS: https://www.w3schools.com/css/default.asp

For HTML: https://www.w3schools.com/html/default.asp

For JavaScript: https://www.w3schools.com/js/default.asp

The first step in creating a website is to design the homepage. We need to plan what the homepage must include: a header, a footer, and so on. On my homepage, I have a header, banner, footer and some buttons. I broke this step into 4 accordingly.

1>Creating the header and footer: I used nav tags under the body in HTML and CSS to style them (see file header&footer.pdf for the code, the output is picture 1, the space between header and footer increases as we add text and banner in the body). Download the logo (or design it, I used Cava) in the same folder as the HTML and CSS files. Can replace the # with different webpages' links after creating them.

2>Adding the banner: For this, add the HTML code under a section so it is easier to style. I added a background image to the banner, but a background color can be added instead. I used inline CSS for styling the paragraph, but it can be added to the CSS file instead. One thing to remember is that if you have inline CSS code and external CSS code, the inline one is preferred. (Check the 3rd image for the HTML code, which is added after the header code and before the footer code and the 4th image for the CSS code. The 5th image is the output.) Again, remember to save the downloaded image in the same folder.

3>Adding containers and buttons: For this part, we add a section tag within which exist div tags for each container and button. All the containers have the same CSS code, so you can rename the classes to have the same name. Check the 6th image for the HTML code and the 7th image for the CSS code, and the output is shown in the 8th image. You can add additional CSS code when the cursor is placed on the button. (That is the color changes or the button gets highlighted.)

After the Homepage, I worked on the learn page. Here, since we need a footer and header again, we can copy and paste the code to the HTML file (learn page HTML) and link it to the same CSS file (one used for the home page). We link it to the same CSS file to avoid repeating the code. Don't forget to link the new CSS file as well! (Check previous step for that code, first picture for the additional HTML code added to the learn page, 2nd picture for the CSS code and 3rd picture for the output)

After the header and footer, it's time for the heading and content. For the heading, I created a section and used CSS to align it to the center and for bold text. You can use the <b> tag instead in HTML code for bold text. I have margin-bottom:-18px; to decrease the distance between the heading and the content after. And instead of background color, you can add an image.

For the content, I wanted it aligned to the center, but two videos to be aligned side-by-side. Side-by-side feature is the result of display: flex; but since this causes all the content under the class, including the text, to be aligned side-by-side, I used a div tag to group two videos and another div tag within for each video. (If the inner div tag is excluded, then the text will also be aligned side-by-side.) Now, simply adding display: flex; to the outer div tag is sufficient.

Since I downloaded the videos, I also added the link for each video below, which users can click to see a clearer one. (This was done using the "a" tag.) I added 10 videos in total. Remember to close the section tag after linking all the videos and br tags to add space between the videos and the footer.

Same as above, the first thing is to copy and paste the header and footer code and link the homepage CSS file to the Craft Games HTML file. Don't forget to link the craft games CSS file as well to the HTML page.

First, I began with the stencil maker game. I first wrote the instructions for it using the HTML code shown in the first picture and the CSS code shown in the 2nd picture. The output is shown in the 3rd picture. Again, instead of the background color, you can add an image. Now, it's time to add the canvas and paper on which we can create the stencil. We do this using JavaScript. Refer to this link for learning JavaScript: https://www.w3schools.com/js/default.asp (JS HTML DOM section). For JavaScript, we link the file at the end of the BODY (after the footer code) and not in the HEAD. We add it using this code: <script src="script.js"></script> where script.js is the JavaScript file name. For the canvas and paper:

HTML~

<div class="craft-box">

<canvas id = "paperCanvas" width="800", height="700"></canvas>

</div>

CSS~

.craft-box {

width:800px;

height:700px;

margin: 0;

background-color: #ffffff;

position: relative;

margin-left:10px;

}

The Canvas ID is used in the JS file. The width and height within the div class are just for the canvas. The canvas's width and height are added in the CSS file as well. We need both the HTML and CSS attributes. Before we add buttons to edit the paper, we should add JS code that adjusts the size and position of the paper. The code is in the 5th picture.

In the ctx.fillRect(23, 24, 750, 650); 23, 24 are the x and y positions and 750, 650 are the width and height. You can change them up based on how you would like the canvas and paper to be. The list of drawlines will come in handy when we introduce cuts and want to add the undo button, as the drawn lines are stored. The 6th image shows that when we click on the paper, a dot is visible, and when we click again on any other point on the paper, a line is formed. The 3rd click again produces the dot, so we can draw a different line at a different start point.

Now we need to add buttons in HTML so that when we click them, the cut, erase or undo modes are activated. For that, we add the code shown in the 7th image in the HTML file, the code shown in the 8th image in the CSS file and the output is shown in the 9th image. The background color and box shadow can differ. Now it's time to add the code in the JS file for all the buttons.

Check the file uploaded for the full code. Starting with the cut button, we will begin with the horizontal cut. Under the event listener click, we add a condition for horizontal mode, and within that, we have if (!startpoint), so that if we haven't clicked yet, it defines the start point. On the second click, it goes to the else condition and performs the cut. We also have a redraw function so that after every cut, any lines drawn or other cuts will be visible. The document. get...code block is to be added for every button we have in HTML. Vertical and Slant cuts are done in the same way. Curved cut is different because the shape varies from the line. We have to trace cursor movements, store them and then cut them. So, for that, we create new listeners called mouseup, mousemove, mousedown and a function that traces the cursor path. Under mousedown, we add an event listener (mousemove, tracecurve). Under mouseup, we push the traced path to the curved path list. The difference between curved cut and others is that for other cuts, we click on the button, click on the paper for the start point and then click on the end point to perform the cut. For a curved cut, after clicking the button, we must drag the cursor and the cut is made. If we click on the canvas, the curved cut mode is deactivated.

After the cut button, I worked on the erase button that erases the area where the cursor is dragged. To deactivate it, we must click on the button again, or it is still active. For this, like the curved cut, we have to create event listeners, mouseup, mousemove and mousedown. Under the mousedown listener, we add a (mousemove, handleEraser) listener. Under the function handleEraser, we call the function getCursorPosition. To give an illusion of the paper being erased, we simply use an "eraser" and fill the area it is clicked on or dragged on with white color (we do this under the performErase function). We again store the erased paths in a list for undo functions.

Now we work on the final button: the Undo button. For this, what we simply do is define a new list and push all the drawn lines, cuts and erased areas to it. Then we create a function with a switch, so based on the case (the type found in the items in the list), the undo button removes the last change and previous changes if pressed multiple times.

Now the canvas is all done for the game! Additionally, I placed some stencil pictures so that users can get inspiration from them. Check the 10th and 11th pictures for the HTML and CSS code, and the 12th picture for the final output. Remember to download the image to the same folder as the other HTML, CSS and JS files are in!

The second game is the Triwizard Cup. For this, we need a canvas again. So, all we do is copy and paste the code in script.js to a new JS file. We also need to change the button IDs (and the div ID = "paperCanvas") as HTML doesn't allow two same IDs. In the CSS code, we only make slight changes, check the 1st image. Also in HTML, we add <script src="script.js"></script> and <script src="maze.js"></script> (the new JS file) after the buttons and not after the footer. If we don't do that, on the first canvas, the paper is not visible.

But since in this game we want to drag the pictures from the row (the maze in Harry Potter had obstacles and the cup), we need to add JS code for that. Also, I made an additional change for the curved cut; it remains active until the user presses the curved option in the Cut Button. The attached file has the full JS code. The 2nd picture has the full HTML code, the 3rd picture has the full CSS code, and the 4th picture has the output. Although for this canvas and buttons, it is easier to make a maze with lines than curves.

Don't forget to add a new case in the undo function! For the curved cut to have the change we want, all we need to change is in mouseup and document.get("curvedMaze")

if (curvedCutMode) {

canvas.removeEventListener("mousemove", traceCurve);

curvedCuts.push([...currentCurvePath]);

actionHistory.push({ type: "curve", data: [...currentCurvePath] });

// store the full path

currentCurvePath = [];

if (currentCurvePath.length > 0) {

curvedCuts.push([...currentCurvePath]);

actionHistory.push({ type: "curve", data: [...currentCurvePath] });

}

currentCurvePath = [];

blockNextClick = true;

redrawCuts();

}

document.getElementById("curvedMaze").addEventListener("click", () => {

curvedCutMode = !curvedCutMode;

if (curvedCutMode) {

drawMode = false;

canvas.style.cursor = 'crosshair';

console.log("Curved cut mode activated");

} else {

drawMode = true;

canvas.style.cursor = 'default';

console.log("Curved cut mode deactivated");

}

});

document.addEventListener("DOMContentLoaded", () => {

Adding the whole code under this is important for this and the next game; otherwise, the canvases or paper don't load.

Now for the final craft game, Tangram! For this, we use the logic of dragging pictures (or, in this case, shapes) and the Undo button logic from the previous game. We don't need the cut or erase option for this game. So we first create a canvas with a different ID and copy and paste the drag and undo logic from the maze.js file (provided we change the ID for undo). The attached file has the full JS code. The CSS code is the same, so we just say .first-game, .second-game, .third-game. We also say:

#obstacle-palette, #obstacle-panel{ (obstacle-panel is the ID for the new set of pictures and obstacle-palette is the ID for the old set of pictures)

display: flex;

gap:20px;

text-align: center;

margin-top:-25px;

}

.mazes, .final-shapes{

margin-top:20px;

}

The HTML code is also the same, except that the pictures and instructions differ. I also added the answers to the Tangram Puzzles below the Canvas; the HTML code for that is in the last part of the first image. The CSS code:

.ans{

display: flex;

gap:20px;

margin-left:10px;

}

One thing we need to add is rotation. In this game, we should rotate the shapes sometimes to create the final image. For that, we add rotation to placedObjects.push and add drawRotatedImage(img, obj.x, obj.y, obj.width, obj.height, obj.rotation); under performUndo, drop listener and redrawCanvas function. The function drawRotatedImage:

function drawRotatedImage(img, x, y, width, height, rotation) {

ctx.save();

ctx.translate(x, y);

ctx.rotate((rotation * Math.PI) / 180);

ctx.drawImage(img, -width / 2, -height / 2, width, height);

ctx.restore();

}

We also let rotatemode=false so that we can deactivate rotation when the button is clicked. (For deactivation, we add an event listener click and change the button text under it.)

In addition to this, I also wanted to be able to drag the images even when placed on the paper. So for that, we need to track cursor movement and create event listeners, mouseup, mousedown and mousemove.

The output is the last two images attached. (Check the step below for one last addition in the CSS file.)

In any project, it is important to check it for minute errors and usability. If some feature is not easy to use, you can edit it now.

I have made edits in all pages. For example, on the homepage, I changed the paragraph on the banner to include the new craft games. Before making the craft games page, I thought of just including two games, but I got more ideas, like the Triwizard maze and Tangram (instead of the collage, because I thought this would be more fun), and I added more videos on the learn page, so I had to change the description. I further removed the third button, as I now have Tangram instead of the collage on the craft page. I also changed the number of links on the header and footer. (I removed the about link.) Coming to the Learn page, I removed the About link from the header and footer and changed the title from Homepage to Learning (the title in the head tag of the HTML code). On the craft page for the third game, to make the buttons in the same format as the previous games, I added the following CSS code:

<div class="options" style="margin-left:265px; gap:20px;"> (inline in HTML)

.options button {

background-color: #ffffff;

padding: 10px 16px;

font-size: 16px;

border: none;

cursor: pointer;

} (in the CSS file)

I again removed the About link and changed the name Digi Craft to DigiCraft Studio in the header and footer.

I am uploading all the pictures and videos I used in this Step so you can reuse them. I also uploaded a final video of the website; the file name is final.mp4.

I loved doing this project despite the amount of time it took me to do it. I am glad I got to share it with others through this Instructable and enter it into contests!