paper js noodles
This commit is contained in:
2
Gemfile
2
Gemfile
@ -12,4 +12,6 @@ gem "middleman-blog"
|
|||||||
|
|
||||||
gem "redcarpet"
|
gem "redcarpet"
|
||||||
|
|
||||||
|
gem "middleman-syntax"
|
||||||
|
|
||||||
gem 'middleman-deploy'
|
gem 'middleman-deploy'
|
||||||
|
@ -95,6 +95,9 @@ GEM
|
|||||||
sprockets (~> 2.12.1)
|
sprockets (~> 2.12.1)
|
||||||
sprockets-helpers (~> 1.1.0)
|
sprockets-helpers (~> 1.1.0)
|
||||||
sprockets-sass (~> 1.2.0)
|
sprockets-sass (~> 1.2.0)
|
||||||
|
middleman-syntax (2.0.0)
|
||||||
|
middleman-core (~> 3.2)
|
||||||
|
rouge (~> 1.0)
|
||||||
mini_portile (0.5.2)
|
mini_portile (0.5.2)
|
||||||
minitest (5.4.1)
|
minitest (5.4.1)
|
||||||
multi_json (1.10.1)
|
multi_json (1.10.1)
|
||||||
@ -119,6 +122,7 @@ GEM
|
|||||||
rb-inotify (0.9.5)
|
rb-inotify (0.9.5)
|
||||||
ffi (>= 0.5.0)
|
ffi (>= 0.5.0)
|
||||||
redcarpet (3.1.2)
|
redcarpet (3.1.2)
|
||||||
|
rouge (1.7.1)
|
||||||
sass (3.4.2)
|
sass (3.4.2)
|
||||||
sprockets (2.12.1)
|
sprockets (2.12.1)
|
||||||
hike (~> 1.2)
|
hike (~> 1.2)
|
||||||
@ -153,5 +157,6 @@ DEPENDENCIES
|
|||||||
middleman-deploy
|
middleman-deploy
|
||||||
middleman-favicon-maker
|
middleman-favicon-maker
|
||||||
middleman-livereload
|
middleman-livereload
|
||||||
|
middleman-syntax
|
||||||
nokogiri
|
nokogiri
|
||||||
redcarpet
|
redcarpet
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
"normalize-scss": "~2.1",
|
"normalize-scss": "~2.1",
|
||||||
"modernizr": "~2.6.2",
|
"modernizr": "~2.6.2",
|
||||||
"bootstrap": "~3.2.0",
|
"bootstrap": "~3.2.0",
|
||||||
"fontawesome": "~4.2.0"
|
"fontawesome": "~4.2.0",
|
||||||
|
"paper": "~0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,8 @@ end
|
|||||||
|
|
||||||
page "/feed.xml", :layout => false
|
page "/feed.xml", :layout => false
|
||||||
|
|
||||||
|
activate :syntax, :line_numbers => true
|
||||||
|
|
||||||
data.video.keys.each do |vdo|
|
data.video.keys.each do |vdo|
|
||||||
proxy "video/#{vdo}.html", 'video/template.html', locals: {video: data.video[vdo]}, ignore: true
|
proxy "video/#{vdo}.html", 'video/template.html', locals: {video: data.video[vdo]}, ignore: true
|
||||||
end
|
end
|
||||||
|
38
source/assets/js/vendor/paper-full.min.js
vendored
Normal file
38
source/assets/js/vendor/paper-full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
58
source/blog/coffee_paper.html.haml
Normal file
58
source/blog/coffee_paper.html.haml
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
title: Coffee Paper
|
||||||
|
date: 2014-09-23
|
||||||
|
tags: paper.js, coffeescript
|
||||||
|
---
|
||||||
|
.row
|
||||||
|
.col-sm-12
|
||||||
|
- if is_blog_article?
|
||||||
|
%h2 Coffee Paper
|
||||||
|
|
||||||
|
%p
|
||||||
|
I need to get more failure with coffee script, but don't personally write a lot of javascript, which is
|
||||||
|
why I never really took the time to learn coffeescript. I decided there would be no better way than to
|
||||||
|
explore some fun library, and found paper.js. This just might rekindle (replace) my povray noodles and
|
||||||
|
get me working in more js.
|
||||||
|
= link_to 'This gist', 'https://gist.github.com/mnmly/1164446#file-coffee-stained-paper-js'
|
||||||
|
helped me get a basic tutorial script working with coffeescript; off to a new thing.
|
||||||
|
|
||||||
|
|
||||||
|
- content_for :head do
|
||||||
|
= javascript_include_tag "vendor/paper-full.min"
|
||||||
|
.row
|
||||||
|
.col-sm-12
|
||||||
|
%canvas#myCanvas
|
||||||
|
:css
|
||||||
|
#myCanvas {
|
||||||
|
width: 530px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:coffee
|
||||||
|
window.stainedPaper = (func) ->
|
||||||
|
canvas = document.getElementById('myCanvas')
|
||||||
|
paper.setup canvas
|
||||||
|
func.call paper
|
||||||
|
return
|
||||||
|
|
||||||
|
stainedPaper ->
|
||||||
|
rect = new @Path.Rectangle([40, 75], [50, 50])
|
||||||
|
rect.strokeColor = '#000'
|
||||||
|
rect.fillColor = '#999'
|
||||||
|
|
||||||
|
path = new @Path()
|
||||||
|
path.strokeColor = '#000'
|
||||||
|
start = new @Point(65, 100)
|
||||||
|
path.moveTo(start)
|
||||||
|
path.lineTo start.add([ 400, 0])
|
||||||
|
|
||||||
|
rect2 = new @Path.Rectangle([440, 75], [50, 50])
|
||||||
|
rect2.strokeColor = '#000'
|
||||||
|
rect2.fillColor = '#999'
|
||||||
|
|
||||||
|
@view.draw()
|
||||||
|
@view.onFrame = (event) ->
|
||||||
|
rect.rotate(2)
|
||||||
|
rect2.rotate(2)
|
||||||
|
|
@ -15,7 +15,8 @@ title: ''
|
|||||||
|
|
||||||
- page_articles.each do |article|
|
- page_articles.each do |article|
|
||||||
%h2= link_to article.title.titleize, article
|
%h2= link_to article.title.titleize, article
|
||||||
= article.body
|
= article.summary
|
||||||
|
= link_to 'Read more…', article
|
||||||
.spacer-50
|
.spacer-50
|
||||||
|
|
||||||
- if paginate
|
- if paginate
|
||||||
|
Reference in New Issue
Block a user