Getting paper.js to work in an external file rather than the html file
A basic getting started tutorial for Paper.js.
This week for our class project we got to have some fun and choose a library or tool to integrate with JavaScript. I wanted to create something with a small amount of user interaction and a pleasing visual design. Paper.js was recommended as a framework that is easy for beginners to work with. After looking through the examples and showcase pages, I was sold. My favorite examples are âVoronoiâ and âHit Testingâ. The tutorials also seemed pretty straightforward and I was excited to try them out.Â
Paper.js can be thought of as a library or a framework, sort of like jQuery, that you make a reference to before you can use its functions and methods. In order to use it, you need to reference the Paper.js âdictionaryâ from your HTML file, and then either refer to your external JavaScript file with the <src> property âtype=âtext/paperscriptââ (instead of âtype=âtext/javascriptââ) in your HTML, or, import the Paper.js information into your external JavaScript file before you call any of the Paper.js functions or methods.Â
The basic tutorial gives an example with Paper.js code inside of an HTML file. Thatâs okay for a small amount of code, but the more code we write, the more it makes sense to keep things organized and put all of our JavaScript and PaperScript into external .js files, and keep the HTML file to mostly HTML code. To keep things organized, we want to structure our files like so:Â
Structure goes into the HTML file. What order do you want the items on the page to appear in?Â
Styling goes into the CSS file. This is the file that tells us how the items on the page should look.Â
Actions go into the JavaScript file. This is the file that manipulates the page when we interact with it.Â
Unfortunately, when I used the Paper.js tutorial example and removed the Paper.js code out of my HTML file and placed it in an external JS file, things got less beginner-friendly. At first, no browser would load anything at all. Then I added in JQuery and tried the Paper.js tutorialâs suggestion of using âwith (paper)â at the beginning of my code. I was able to view my file in Firefox and Safari, but not Chrome. In Chrome I was getting a console error saying "XMLHttpRequest cannot load file:... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resourceâ.
Here is what I did to get everything working together, with my JavaScript in its own JS file. This worked in all browsers, including Chrome, so I could use the Chrome Developer Tools to help myself debug while building my project.
In my HTML file:Â
Placed my <script> tags at the bottom of the <body>, just before the closing </body> tag.Â
Loaded jQuery, Paper.js, and my script file that I creating, in that order. I used publicly hosted versions of jQuery and Paper.js, also called a CDN, or Content Delivery Network, rather than copies of these libraries on my own computer.Â
Gave my script file a property of "type=âtext/javascriptââ and worked with it as a JavaScript file rather than as a Paper.js file.Â
In my JS file:Â
Placed âpaper.install(window);â at the top of my JS file, per the Paper.js tutorialâs first suggestion on âUsing JavaScript Directly > Setting Up a Scope.âÂ
Added a âwindow.onload = function( )â which wrapped around all of the code I was writing. I also added a âconsole.log( )â message to check that the files were talking to each other as expected.Â
Created the canvas before adding any other code by using  âpaper.setup('myCanvasIDâ);â
Just before the closing bracket for the window.onload function, I included âview.draw( );â - which doesnât seem entirely necessary, but if it is included, it appears to help speed up the drawing of the items when the page loads.Â
One other change I needed to make to the Paper.js tutorials was to create a Tool( ) variable that I could place before any mouse or key events.Â
Thatâs pretty much it for getting started with the basics. I ran into some other challenges with resizing the browser window and using custom fonts in the Paper.js TextItem, which Iâll cover in a later post.
You can check out the project I made using Paper.js over on http://lindsayelia.github.io/etch-a-sketch/.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
â Live Streamingâ Interactive Chatâ Private Showsâ HD Quality
Anya is LIVE right now
FREE
Free to watch ⢠No registration required ⢠HD streaming
We had a guest lecture today by one of the instructors from the Colorado Galvanize campuses. He gave an engaging talk about priming yourself to learn, putting yourself into the best possible state so that you can learn at your optimal self.Â
Some of this Iâve heard before, but I thought it was a nice way to set the stage for the beginning of our learning adventure over the next few months. Now we all have a few more tools to help us get through when things get uncomfortable.
These are my notes from the talk.
Set the Stage
1. Clear the stage, prime your brain.
we have only so much âworking memoryâ space - can process about 4 things at a time
turn off notifications
write down anything that you need to do later that is distracting you, a place that you know youâll check later
2. Clarify the what and the why.
what is the objective, what is this thing that I hope to achieve in this next period of time, and the why
the why is the purpose, we are social creatures, we operate best when we have a mission, a reason to do what weâre doing
take a bit of time at the start of doing my homework, for example, to focus on the why, why weâre doing what weâre doing
if operating from a place of fear, you are not going to be operating in a state of flow
fear literally shuts down your frontal cortex, you are operating at less than your potential, it makes us âsub-humanâ ?
why? not quite sure why this thing is important, but eventually I want to build web apps, or whatever, etc
itâs ok to put small things in context of larger goals, so long as that goal is motivating
3. Prioritize process over product.
itâs the journey, not the destination
sometimes failure is valuable, we can learn from our failures too
pleasure in process, it can be fun to go through the process
quoting Malcolm Gladwell - âfocused practiceâ - all about setting aside time to work on the things you are weak at, the goal is not to become perfect, but rather, to just put in the time
focus on the things you are weak at, not the things you are good at
set aside certain amount of time, I know this is going to be difficult, will spend the next 30 min working on this thing, and Iâm going to have fun goddammit, and THAT is success, not whether or not I finish it
when get good at process, will start to produce like a well-oiled factory, really fast
Play
1. Wrestle with it.
like puppies playing with each other (his analogy was playing with your siblings when youâre a kid, but I never did that haha), you know what to expect when they get that look in their eye
when I learn new info, play with it, turn it, twist it, get to know it
when first learn something, have a 2 dimensional view
if can learn something else about it, start to learn about the other angles
eventually develop a clear picture, a 3 dimensional view
another analogy is to chew on an apple, donât just look at it, bite into it, smell it, taste it, fully experience it
âthis is not college. this is a completely different experience"
âthere is no such thing as intelligence, only familiarity"
people who are experts on a topic are not geniuses, they are experts because they have spent so much time playing/wrestling with it
2. Take risks. Growth mindset.
if you tell kids that they are smart, they will try to maintain that label by doing easy things that will label them as smart
if you congratulate them on effort, they will take on harder challenges/problems because they want to try hard
fixed - crap, iâm only going to learn 20% of this material
growth - awesome, I got 20% so far and have just 80% left to go
mistakes are an essential part of the learning process
3. Have fun.
people learn best when they feel safe, that they feel they can make mistakes
no âcoding in angerâ! haha
stop if I find myself yelling at my computer, take a step back to remember that this stuff is fun, Iâm making awesome things
only when you are having fun is when you will learn as much as you possibly can
will not enter a state of flow unless you feel safe and competent in what you are doing
we want to set ourselves up for success
by playing, I will get myself there a lot faster
Reflect
1. Self-assess.
Look back at what the what was, that I said I was going to do, how did that go? did I do that?
celebrate if I achieved it,
be honest about what went well and what didn't
maybe I got distracted
try again next time
how did I do with the process? how did I do with making progress towards my objective?
research shows - what moves the needle the most, is when students are able to become their own teachers, when they can assess where they are, what they need help with, hereâs how far I still need to go, etc
2. Ask more questions.
creating good questions are essential about the learning process
forces me to identify what I donât know
write questions out for myself of things I want to learn, know, to find out
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
â Live Streamingâ Interactive Chatâ Private Showsâ HD Quality
Anya is LIVE right now
FREE
Free to watch ⢠No registration required ⢠HD streaming
Configuring Sublime Text to open files from the CLI
Person First Code Tip: How to configure Sublime Text to open files from within your CLI (terminal or command line).
Why?Â
The default installation of Sublime Text (a text editing program, used for writing code) gives the option to open files using Sublime Text by typing type a command into the CLI.*Â
However, it needs to be configured sightly. So itâs really more like 80% installed (for someone like me who is still learning to use the CLI), or 99% installed for experienced developers, or 5% installed for anyone not familiar with using the CLI. Not as useful as 100% installed and ready to go.
*CLI is short for command line interface, or Terminal, or Shell. Depending on what operating system you use, you might call it something different.
How?
Glance at the Sublime Text overview of configuring the CLI command. Donât worry if it doesnât make sense. Move on to the next step.
Read this stackoverflow Q&A about this topic and scroll down to the third answer, the one that includes:
âThere is a easy way to do this. It only takes a couple steps and you don't need to use the command line too much. If you are new to the command line this is the way to do it.
Step 1 : Finding the bin file to put the subl executable file in
Step 2: Finding the executable fileâ
Note: the answers in this stackoverflow Q&A may be shown in a different order if you read this blog post at a much later date. Iâve also outlined the steps here below, to use if the Q&A doesnât make sense to you.
For more help with âStep 1 : Finding the bin file to put the subl executable file inâ I searched on the internet for âhow to find mac bin fileâ and came up with these steps, for a Mac:
Check to make sure you have Sublime Text installed on your computer. Iâm assuming you already do, if you want to configure it to use the CLI command to open files. On Mac, open Spotlight and search for Sublime.
Open a Finder window
Open the âGoâ menu
Choose âGo to FolderâŚâ
This will bring up a new window in which you can type â/usr/local/binâ
That should take you to the folder location where bin lives
Now, open a second Finder window and open up your Applications folder. This is typically found at the same folder level as where your Desktop is locations. You can also use Spotlight to search for your âApplicationsâ folder.
Find the Sublime Text application. Right-click on it so you get a pulldown menu.
Click on âShow Package Contentsâ. Click into the âContentsâ folder.
Click into the âSharedSupportâ folder and then into the âbinâ folder.
Copy the file âsublâ from here and go to your other âbinâ folder that we searched for earlier, and paste it into there. You need to make sure to copy and paste it, not move it, and not make a shortcut or alias to it. You can right-click on files or folders to get the âcopyâ and âpasteâ options.
Open your terminal and test to see if it works by navigating to a folder with a file that you want to open with Sublime, type âsublâ and see if Sublime opens to the folder or file where you are. If it does, that means it is working.Â
Day 2 - 04.28.15 - Get comfortable with being uncomfortable
Day 2 at Galvanize started out by writing down characteristics of a good developer. I think the number one quality for a great developer to have is empathy. Iâd probably say the number one quality for most things in life, is to have empathy for other people - the people you work with, the people youâre working for, and the people you ride the bus with every morning.
I was also reminded of advice that makes me think of the venerable Jillian Michaels (because I heard her say it on tv once and it stuck with me) and also is something that I try to remind myself of from time to time: âget comfortable with being uncomfortable.âÂ
We all do things we believe will be good for us, even if theyâre painful, because weâre motivated by the results. I like to take this view towards personal growth, self-help, being a good person, whatever you want to call it, and use it as a constructive way to approach anything new, such as learning an entirely new topic in a few months.
I plan to learn at least one new thing every day for the next 6 months and to spend some of that time furrowing my eyebrows at my computer, being uncomfortable while I figure things out. Iâm very much looking forward to it. :) (Or should I say >:| hehe)
In addition to a few inspirational life lessons, today I also learned that people-who-are-not-programmers also use GitHub, and how to configure Sublime Text to open files from with the terminal.
Iâve been using GitHub for the past few years for work, and hadnât given much thought that it can be used outside of programming-land. Writers, musicians, artists, government organizations, and many others, use GitHub as a place to store, share, and track changes to information. GitHub holds quite a variety of file types. Version control is everywhere!
Day 1 - 04.27.15 - How to remember names for 25+ people in a short amount of time
TIL: first names and quirky details for 25+ people I just met, and will be spending the next 6 months with. For peeps unfamiliar with internet lingo (hi dad!) âTILâ is shorthand for âToday I Learnedâ (and âpeepsâ is slang for people).
How does one learn 25 peoplesâ names and life stories in just a few hours?Â
Well, one way is to have everyone stand in a big circle and go around the circle saying the name of each person who came before them, and then their own name, using an adjective to alliterate names. Radical Rebecca, Dynamic Dominic, and Logarithm Laura are just a few of the wonderful people who I met today.Â
The last person to go repeats everyoneâs name and adjective, and by that time, Iâve got most of them memorized. Iâm Lover of Animals Lindsay, in case you were wondering.
One of the ways we got to know each other a bit was to stand in two long lines, facing each other about two feet apart, and talk for 30 seconds. Like speed dating but much quicker and without the pressure. Speed friending, I guess? After 30 seconds, a moderator makes a loud noise, and the person at one end of one of the lines moves to the other end, and that entire line shifts down. This is how I learned that Iâm not the only person who dislikes loud noises and which favorite foods I could bribe my classmates with. Very useful information.
Our homework for the day included starting a blog (lucky you, reader!) and reading the first half of Zed Shawâs The Command Line Crash Course. If youâd like to pretend like youâre starring in the 1983 classic WarGames, I recommend giving the command line interface (CLI) a try. You can learn the basics in about an hour and compare it to moving around your computer using the GUI (graphical user interface, aka, windows or folders that most people click on to navigate their computers).
On a Mac, use the Spotlight search to open up âTerminalâ (native to all Macs) or download iTerm2 (free). If you use Windows, you can try something from this list. If you use Linux, then Iâm guessing you probably donât need me to tell you how to get to the command line. :)
Person First Code Tip:Â Personalize your learning.
Instead of using the folder names shown in The Command Line Crash Course, make up names that are interesting to you. For example, I made a top level folder for food, sublevel folders for fruits and veggies, and below that, folders with names like kiwis, peas, carrots, apples, tomatoes. Then when I practiced moving folders around in the CLI, I moved the tomatoes folder back and forth (itâs a fruit, right?). Personalizing exercises to something you like makes them more relevant and memorable. Putting computer lingo into terms you understand will help it stick, and probably make it easier for you to explain to other people too.
Iâmsoexcited to share that Iâm starting at Galvanize School in San Francisco tomorrow. Iâll be spending the next 6 months learning front end web development and working on projects for my portfolio. For those of you who might be unfamiliar with this term, Iâm learning skills in order to make amazing, interactive, beautiful, user-friendly websites in just a few monthsâ time.
Part of me canât believe Iâm actually doing this. Did I really just quit my job to go back to school? Part of me is wondering why I waited so long to do this. Itâs been something Iâve enjoyed tinkering with for quite a few years. All of me is excited to start this adventure and enthusiastic to be learning new things. Yaaaassssss.
