Tag Archives: shape

Laser engraving a bitmap image using Illustrator

Do you have an image that you’d like to laser engrave on to the surface of a material such as timber or plastic? If it is an image that has a lot of detail and you would rather not just engrave the outlines of the shape (using the image tracing tool), then follow this tutorial!

Step 1

Find the image you would like to use. It should have good contrast. Once you have a suitable image, copy it to the clipboard. For this tutorial, I will use the image show below (left). It will end up looking like the image shown below (right).

it1

Step 2

Open Adobe Illustrator and click File > New to begin working on a new document. Make sure you change the Profile to Basic RGB, then change the document width and height to suit your preferences and click on OK.

it2

Step 3

Click on Edit > Paste to paste in the image that you copied earlier.

it3

The image should appear in your document. Resize the image to suit your preferences.

it3b

Step 4

Grab the Selection tool (the black arrow) and click on the image to make sure it is selected. Then click Image Trace on the top toolbar (if you don’t see this option on the toolbar, click Object > Image Trace > Make). If you see a warning message telling you that image tracing may take a while, just click OK. It may take a few seconds to process the image.

it4

Step 5

After the image has been traced, change the Preset from Default to Shades of Gray. You can do this from the toolbar. Illustrator will take a few seconds to process the image (or longer depending on the size and quality of the image).

it5

And that’s it! The image should look like the one shown below. Now when you send the document to your laser cutter, it should engrave the image using a different laser engraving intensity for the different light and dark parts of the image.

it5b

If you need to do any other editing, such as changing the shape of the image then it is best to do this in a photo-editing program like Photoshop before copying it into Illustrator. Remember, Illustrator is not a photo-editing program – it is a drawing and illustrating program.

Download the PDF file
Download a PDF copy of the instructions.

Rotating objects with keyboard input in PlayCanvas

In this tutorial you will learn how to rotate an object using code in PlayCanvas. This means that you can allow users to spin an object when they press a key on the keyboard. You will also be introduced to variables in JavaScript. Watch the video below and then scroll down to view the sample code.

Sample JavaScript code for the rotate.js script:

pc.script.create('rotate', function (app) {
    // Creates a new Rotate instance
    var Rotate = function (entity) {
        this.entity = entity;
    };

    Rotate.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
            // set the angle to 0
            var angle = 0;
            
            // change the angle of the box when a key is pressed
            if(app.keyboard.isPressed(pc.KEY_LEFT)){
                angle = -2;
            }
            
            else if(app.keyboard.isPressed(pc.KEY_RIGHT)){
                angle = 2;
            }
            
            // update the angle of the box to make it spin on the y axis
            this.entity.rotateLocal(0,angle,0);
        }
    };

    return Rotate;
});

 

Using Adobe Shape CC app to turn sketches into Illustrator drawings

This video tutorial explains how to use the Adobe Shape CC app (on iOS and Android) to take a photo of a hand-drawn sketch and turn it into an SVG vector graphic which can be opened and edited in Adobe Illustrator CC.

Watch the video below or on YouTube.

 

Create a zoom and fade effect in Adobe Flash

This video tutorial explains how to create a zoom and fade effect in Adobe Flash using shape tools, motion tween tool, the free transform tool, and the Alpha colour effect. The animation will look this:

animation

Watch the video below to learn how to apply the zoom and fade effect to your animation. You can also view the video on YouTube by clicking here.

Animating an image using JavaScript

This tutorial shows how to animate (move) an image across the screen. You can combine the code with other code from previous tutorials such as the one on timed image swapping to also get images to swap while they are moving (eg. you could use two images for a character with legs in different positions, so as the images swap it looks like the character is running).

You will need an image to use in your animation. Keep the image file in the same folder as your HTML file. In the sample code below, the image’s file name is image.png (a PNG image file). Start and stop buttons have also been added to start/stop the animation. This is what the animation will look like:

imageanimated

Refer to the comments in the code below to find out what is happening on each line.

<html>
<head>
<title>JavaScript Image Animation</title>
<script type="text/javascript">
<!--
var imgObj ;
var animate ;
function init(){
 imgObj = document.getElementById('myImage');
 imgObj.style.position= 'relative'; 
 imgObj.style.left = '0px'; 
}
function moveRight(){
 imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px'; // move from the left 5 pixels
 animate = setTimeout(moveRight,20); // call moveRight in 20 milliseconds
}
function stop(){
 clearTimeout(animate); // stops the animation
 // add imgObj.style.left = '0px'; if you want to reset the image back to the left side of screen
}
window.onload =init; // starts animation when page loads
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="image.png" width="100" height="100"/>
<p>Click the buttons below to start and stop the animation.</p>
<input type="button" value="Play" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

Next tutorial: Keyboard events in JavaScript

Using the HTML5 canvas to draw shapes

The code below shows how to use the HTML5 canvas and JavaScript in a webpage to draw objects. In this example, the object will be a simple rectangle shape inside a canvas with a grey border. The rectangle will be filled with red and have a blue border. It will look like this:

Screen Shot 2015-05-04 at 7.53.26 pm

You can use the canvas for drawings, animations, and even games. Watch the video below to see how to create a canvas and draw a rectangle shape, then scroll down to see the code.

Check out the sample code below. You can view all the different HTML colour codes that you can use here.

<!DOCTYPE html>
<html>
<head>
 <title>Simple canvas with rectangle drawing</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.fillStyle = "red";
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="200" height="100">
</body>
</html>

Next tutorial: Drawing lines using the HTML5 canvas element