首页 发现 帮助
注册 登录
ajpo-amber
/
amber
派生自 amber/amber
2
0
派生 0
文件
浏览代码

Merge pull request #237 from StefanKrecher/master

Using processing.js with Amber
Nicolas Petton 13 年之前
父节点
8642859ca3 56b0f445ef
当前提交
b1cd261f0a
共有 5 个文件被更改，包括 1783 次插入 和 0 次删除
合并视图 显示文件统计
  1. 42 0
      examples/processing/index.html
  2. 78 0
      examples/processing/js/Processing-Examples.deploy.js
  3. 103 0
      examples/processing/js/Processing-Examples.js
  4. 1494 0
      examples/processing/processing-1.4.1.js
  5. 66 0
      examples/processing/st/Processing-Examples.st

+ 42 - 0
examples/processing/index.html
查看文件 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>using Processing.js with Amber Smalltalk</title> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
+    <meta name="author" content="Stefan Krecher" /> 
+    <link rel="stylesheet" type="text/css" href='css/style.css' /> 
+    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/> 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <script type='text/javascript' src='../../js/amber.js'></script> 
+    <script type='text/javascript' src='../../js/lib/showdown.js'></script> 
+	<script type="text/javascript" src="processing-1.4.1.js"></script>
 
+  </head> 
+  <body> 
+	A Clock made with <a href="http://processingjs.org">Processing.js</a> and Amber
 
+	<p>Examine the <button onClick="smalltalk.Browser._openOn_(smalltalk.ProcessingClock)"> ProcessingClock class</button></p> 
+	<p><canvas id="canvas1" width="200" height="200"></canvas></p>
 
+	<script id="script1" type="text/javascript">
 
+		// Simple way to attach js code to the canvas is by using a function
 
+		function sketchProc(processing) {
 
+			// Override draw function, by default it will be called 60 times per second
 
+			processing.draw = function() {};
 
+		}
 
+
 
+		var canvas = document.getElementById("canvas1");
 
+		// attaching the sketchProc function to the canvas
 
+		var p = new Processing(canvas, sketchProc);
 
+	</script>
 
+	   
+	<script type='text/javascript'> loadAmber(
 
+		{
 
+			files: ['Processing-Examples.js'],
 
+			prefix: 'examples/processing/js',
 
+			packages: [ 'Processing-Examples' ],
 
+			ready: function() {
 
+				smalltalk.ProcessingClock._init() 
+			}
 
+		}) 
+	</script> 
+	
+  </body> 
+</html>

+ 78 - 0
examples/processing/js/Processing-Examples.deploy.js
查看文件 

@@ -0,0 +1,78 @@
 
+smalltalk.addPackage('Processing-Examples', {});
 
+smalltalk.addClass('ProcessingClock', smalltalk.Object, ['processing', 'centerX', 'centerY', 'maxArmLength'], 'Processing-Examples');
 
+smalltalk.addMethod(
 
+"_draw",
 
+smalltalk.method({
 
+selector: "draw",
 
+fn: function () {
 
+    var self = this;
 
+    var drawBlock;
 
+    drawBlock = function () {var now;var hoursPosition;var minutesPosition;var secondsPosition;smalltalk.send(self['@processing'], "_background_", [224]);now = smalltalk.send(smalltalk.Date || Date, "_new", []);hoursPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_hours", []), "_\\\\", [12]), "__plus", [smalltalk.send(now, "_minutes", [])]), "__slash", [60]), "__slash", [12]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [hoursPosition, 0.5, 5]);minutesPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_minutes", []), "__plus", [smalltalk.send(now, "_seconds", [])]), "__slash", [60]), "__slash", [60]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [minutesPosition, 0.8, 3]);secondsPosition = smalltalk.send(smalltalk.send(now, "_seconds", []), "__slash", [60]);return smalltalk.send(self, "_drawArm_lengthScale_weight_", [secondsPosition, 0.9, 1]);};
 
+    return drawBlock;
 
+}
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_drawArm_lengthScale_weight_",
 
+smalltalk.method({
 
+selector: "drawArm:lengthScale:weight:",
 
+fn: function (aPosition, aLengthScale, aWeight) {
 
+    var self = this;
 
+    var myDX;
 
+    var myDY;
 
+    smalltalk.send(self['@processing'], "_strokeWeight_", [aWeight]);
 
+    myDX = smalltalk.send(self['@centerX'], "__plus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_sin_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
 
+    myDY = smalltalk.send(self['@centerY'], "__minus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_cos_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
 
+    smalltalk.send(self['@processing'], "_line_y_dX_dy_", [self['@centerX'], self['@centerY'], myDX, myDY]);
 
+    return self;
 
+}
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_initialize",
 
+smalltalk.method({
 
+selector: "initialize",
 
+fn: function () {
 
+    var self = this;
 
+    self['@processing'] = Processing.instances[0];
 
+    self['@centerX'] = smalltalk.send(smalltalk.send(self['@processing'], "_width", []), "__slash", [2]);
 
+    self['@centerY'] = smalltalk.send(smalltalk.send(self['@processing'], "_height", []), "__slash", [2]);
 
+    self['@maxArmLength'] = smalltalk.send(smalltalk.Math || Math, "_min_or_", [self['@centerX'], self['@centerY']]);
 
+    return self;
 
+}
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_processing",
 
+smalltalk.method({
 
+selector: "processing",
 
+fn: function () {
 
+    var self = this;
 
+    return self['@processing'];
 
+}
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+
 
+smalltalk.addMethod(
 
+"_init",
 
+smalltalk.method({
 
+selector: "init",
 
+fn: function () {
 
+    var self = this;
 
+    var clock;
 
+    var processing;
 
+    var block;
 
+    clock = smalltalk.send(smalltalk.ProcessingClock || ProcessingClock, "_new", []);
 
+    processing = smalltalk.send(clock, "_processing", []);
 
+    block = smalltalk.send(clock, "_draw", []);
 
+    processing.draw = block;
 
+    return self;
 
+}
 
+}),
 
+smalltalk.ProcessingClock.klass);
 
+
 
+

+ 103 - 0
examples/processing/js/Processing-Examples.js
查看文件 

@@ -0,0 +1,103 @@
 
+smalltalk.addPackage('Processing-Examples', {});
 
+smalltalk.addClass('ProcessingClock', smalltalk.Object, ['processing', 'centerX', 'centerY', 'maxArmLength'], 'Processing-Examples');
 
+smalltalk.addMethod(
 
+"_draw",
 
+smalltalk.method({
 
+selector: "draw",
 
+category: 'not yet classified',
 
+fn: function () {
 
+    var self = this;
 
+    var drawBlock;
 
+    drawBlock = function () {var now;var hoursPosition;var minutesPosition;var secondsPosition;smalltalk.send(self['@processing'], "_background_", [224]);now = smalltalk.send(smalltalk.Date || Date, "_new", []);hoursPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_hours", []), "_\\\\", [12]), "__plus", [smalltalk.send(now, "_minutes", [])]), "__slash", [60]), "__slash", [12]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [hoursPosition, 0.5, 5]);minutesPosition = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(now, "_minutes", []), "__plus", [smalltalk.send(now, "_seconds", [])]), "__slash", [60]), "__slash", [60]);smalltalk.send(self, "_drawArm_lengthScale_weight_", [minutesPosition, 0.8, 3]);secondsPosition = smalltalk.send(smalltalk.send(now, "_seconds", []), "__slash", [60]);return smalltalk.send(self, "_drawArm_lengthScale_weight_", [secondsPosition, 0.9, 1]);};
 
+    return drawBlock;
 
+},
 
+args: [],
 
+source: "draw\x0a| drawBlock |\x0a\x0adrawBlock := [\x0a  | now hoursPosition minutesPosition secondsPosition |  \x0a  processing background: 224.\x0a  \x0a  now := Date new.\x0a  \x0a  \x22Moving hours arm by small increments\x22\x0a   hoursPosition := now hours \x5c\x5c 12 + now minutes / 60 / 12.\x0a   self drawArm: hoursPosition lengthScale: 0.5 weight: 5.\x0a   \x0a   \x22Moving minutes arm by small increments\x22\x0a    minutesPosition := now minutes + now seconds / 60 / 60.\x0a    self drawArm: minutesPosition lengthScale: 0.80 weight: 3.\x0a\x0a    \x22Moving hour arm by second increments\x22\x0a    secondsPosition := now seconds / 60.\x0a    self drawArm: secondsPosition lengthScale: 0.90 weight: 1.\x0a  ].\x0a\x0a^drawBlock",
 
+messageSends: ["background:", "new", "/", "+", "minutes", "\x5c\x5c\x5c\x5c", "hours", "drawArm:lengthScale:weight:", "seconds"],
 
+referencedClasses: ["Date"]
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_drawArm_lengthScale_weight_",
 
+smalltalk.method({
 
+selector: "drawArm:lengthScale:weight:",
 
+category: 'not yet classified',
 
+fn: function (aPosition, aLengthScale, aWeight) {
 
+    var self = this;
 
+    var myDX;
 
+    var myDY;
 
+    smalltalk.send(self['@processing'], "_strokeWeight_", [aWeight]);
 
+    myDX = smalltalk.send(self['@centerX'], "__plus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_sin_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
 
+    myDY = smalltalk.send(self['@centerY'], "__minus", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.Math || Math, "_cos_", [smalltalk.send(smalltalk.send(aPosition, "__star", [2]), "__star", [smalltalk.send(smalltalk.Math || Math, "_PI", [])])]), "__star", [aLengthScale]), "__star", [self['@maxArmLength']])]);
 
+    smalltalk.send(self['@processing'], "_line_y_dX_dy_", [self['@centerX'], self['@centerY'], myDX, myDY]);
 
+    return self;
 
+},
 
+args: ["aPosition", "aLengthScale", "aWeight"],
 
+source: "drawArm: aPosition lengthScale: aLengthScale weight: aWeight\x0a| myDX myDY |\x0aprocessing strokeWeight: aWeight.\x0amyDX := centerX \x0a\x09\x09\x09+ ((Math sin: (aPosition * 2 * Math PI))\x0a\x09\x09\x09* aLengthScale * maxArmLength).\x0amyDY := centerY \x0a\x09\x09\x09- ((Math cos: (aPosition * 2 * Math PI))\x0a\x09\x09\x09* aLengthScale * maxArmLength).\x0a\x0aprocessing line: centerX y: centerY dX: myDX dy: myDY.",
 
+messageSends: ["strokeWeight:", "+", "*", "sin:", "PI", "-", "cos:", "line:y:dX:dy:"],
 
+referencedClasses: ["Math"]
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_initialize",
 
+smalltalk.method({
 
+selector: "initialize",
 
+category: 'not yet classified',
 
+fn: function () {
 
+    var self = this;
 
+    self['@processing'] = Processing.instances[0];
 
+    self['@centerX'] = smalltalk.send(smalltalk.send(self['@processing'], "_width", []), "__slash", [2]);
 
+    self['@centerY'] = smalltalk.send(smalltalk.send(self['@processing'], "_height", []), "__slash", [2]);
 
+    self['@maxArmLength'] = smalltalk.send(smalltalk.Math || Math, "_min_or_", [self['@centerX'], self['@centerY']]);
 
+    return self;
 
+},
 
+args: [],
 
+source: "initialize\x0aprocessing := <Processing.instances[0]>.\x0acenterX := processing width / 2.\x0acenterY := processing height / 2.\x0amaxArmLength := Math min: centerX or: centerY.",
 
+messageSends: ["/", "width", "height", "min:or:"],
 
+referencedClasses: ["Math"]
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+smalltalk.addMethod(
 
+"_processing",
 
+smalltalk.method({
 
+selector: "processing",
 
+category: 'not yet classified',
 
+fn: function () {
 
+    var self = this;
 
+    return self['@processing'];
 
+},
 
+args: [],
 
+source: "processing\x0a^processing",
 
+messageSends: [],
 
+referencedClasses: []
 
+}),
 
+smalltalk.ProcessingClock);
 
+
 
+
 
+smalltalk.addMethod(
 
+"_init",
 
+smalltalk.method({
 
+selector: "init",
 
+category: 'not yet classified',
 
+fn: function () {
 
+    var self = this;
 
+    var clock;
 
+    var processing;
 
+    var block;
 
+    clock = smalltalk.send(smalltalk.ProcessingClock || ProcessingClock, "_new", []);
 
+    processing = smalltalk.send(clock, "_processing", []);
 
+    block = smalltalk.send(clock, "_draw", []);
 
+    processing.draw = block;
 
+    return self;
 
+},
 
+args: [],
 
+source: "init\x0a| clock processing block |\x0aclock := ProcessingClock new .\x0aprocessing := clock processing.\x0ablock := clock draw.\x0a<processing.draw=block>\x0a ",
 
+messageSends: ["new", "processing", "draw"],
 
+referencedClasses: ["ProcessingClock"]
 
+}),
 
+smalltalk.ProcessingClock.klass);
 
+
 
+

文件差异内容过多而无法显示
+ 1494 - 0
examples/processing/processing-1.4.1.js


+ 66 - 0
examples/processing/st/Processing-Examples.st
查看文件 

@@ -0,0 +1,66 @@
 
+Smalltalk current createPackage: 'Processing-Examples' properties: #{}!
 
+Object subclass: #ProcessingClock
 
+	instanceVariableNames: 'processing centerX centerY maxArmLength'
 
+	package: 'Processing-Examples'!
 
+
 
+!ProcessingClock methodsFor: 'not yet classified'!
 
+
 
+draw
 
+| drawBlock |
 
+
 
+drawBlock := [
 
+  | now hoursPosition minutesPosition secondsPosition |  
+  processing background: 224.
 
+  
+  now := Date new.
 
+  
+  "Moving hours arm by small increments"
 
+   hoursPosition := now hours \\ 12 + now minutes / 60 / 12.
 
+   self drawArm: hoursPosition lengthScale: 0.5 weight: 5.
 
+   
+   "Moving minutes arm by small increments"
 
+    minutesPosition := now minutes + now seconds / 60 / 60.
 
+    self drawArm: minutesPosition lengthScale: 0.80 weight: 3.
 
+
 
+    "Moving hour arm by second increments"
 
+    secondsPosition := now seconds / 60.
 
+    self drawArm: secondsPosition lengthScale: 0.90 weight: 1.
 
+  ].
 
+
 
+^drawBlock
 
+!
 
+
 
+drawArm: aPosition lengthScale: aLengthScale weight: aWeight
 
+| myDX myDY |
 
+processing strokeWeight: aWeight.
 
+myDX := centerX 
+			+ ((Math sin: (aPosition * 2 * Math PI))
 
+			* aLengthScale * maxArmLength).
 
+myDY := centerY 
+			- ((Math cos: (aPosition * 2 * Math PI))
 
+			* aLengthScale * maxArmLength).
 
+
 
+processing line: centerX y: centerY dX: myDX dy: myDY.
 
+!
 
+
 
+initialize
 
+processing := <Processing.instances[0]>.
 
+centerX := processing width / 2.
 
+centerY := processing height / 2.
 
+maxArmLength := Math min: centerX or: centerY.
 
+!
 
+
 
+processing
 
+^processing
 
+! !
 
+
 
+!ProcessingClock class methodsFor: 'not yet classified'!
 
+
 
+init
 
+| clock processing block |
 
+clock := ProcessingClock new .
 
+processing := clock processing.
 
+block := clock draw.
 
+<processing.draw=block>
 
+! !
 
+

部分文件因为文件数量过多而无法显示