i have just build a normal RoR 4.1 app, nothing added, to test some coffee script code.
This is the start of the coffee script code
->
canvas
ctx
code
point
style
drag = null
dPoint
# define initial points
Init (quadratic) ->
point =
p1:
x: 100
y: 250
p2:
x: 400
y: 250
if quadratic
point.cp1 =
x: 250
y: 100
else
point.cp1 =
x: 150
y: 100
point.cp2 =
x: 350
y: 100
when rendering in Javascript via the coffee script site it give me that, which seems right
(function() {
canvas;
ctx;
code;
var canvas, code, ctx, drag;
drag = null;
Init(function(quadratic) {
var point, style;
point = {
...
But when i watch the code generate by rails i see this (and nothing work)
(function() {
(function() {
canvas;
ctx;
code;
var canvas, code, ctx, drag;
drag = null;
dPoint;
Init(function(quadratic) {
.....
do you have any idea what's happened, why is it encapsulated in another function ?
do you need more code ?
best regards
Rails wraps any coffee script in an anonymous function when compiling it, so this is actually valid.
So even something as simple as:
x = 1
in coffeescript, gets compiled to:
(function() {
var x;
x = 1;
}).call(this);
In rails javascript. Hence why your sample is compiling to an anonymous function within an anonymous function. Here's the sprockets code that does it:
https://github.com/sstephenson/sprockets/blob/master/lib/sprockets/jst_processor.rb
You could use global variables to get around this, but I wouldn't recommend it, instead, look to create a module system.
Thanks for the answer,
i removed the '->' on top and it works now, it's javascript in an anonymous function.
i wonder what will appends if i write a 'jQuery ->' in top of the script when calling a Jquery plugin, but it seems it as changed since the introduction of turbo-links. but this is another question.
thanks you my current code work now
Related
I am using the Processing API to draw an image to my HTML canvas, which I can use later in the code. The JavaScript code that I have is:
var sketchProc = function(processingInstance) {
with (processingInstance) {
/* #pjs preload="images/hot-air.png" */
size(innerWidth, innerHeight);
var testImage = loadImage("images/hot-air.png");
draw = function() {
image(testImage, 0, 0, 500, 500);
}
}
}
var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);
The console says that the image has dimensions 0x0. I tried loading with Processing's directives, but I am still getting an image dimensions of 0x0. However, when I call loadImage() inside the draw loop, the program recognizes the image's dimensions of 512x512.
I do not want to continuously call loadImage() inside the draw loop. What should I do to make sure that the image loads properly outside the draw loop?
You can find a minimal working example here.
First off, thanks for posting an MCVE for us to play with.
I believe the problem is that, for some reason, the preload directive, and maybe the loadImage() function itself, doesn't work when you're writing JavaScript-only Processing.js code. I've tested this in various editors and versions of Processing.js.
So it appears that to use the loadImage() function, you should use pure Processing code. Here is a CodePen that shows how you'd do that:
<script type="application/processing">
/* #pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */
PImage testImage;
void setup(){
size(500, 500);
testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
println(testImage.height);
}
void draw() {
background(100);
image(testImage, 0, 0, 250, 250);
}
</script>
<canvas> </canvas>
Just for comparison, here is the same code using JavaScript-only syntax. This doesn't work.
But taking a step back: if you're comfortable using JavaScript, then why are you using Processing.js? Processing.js is designed for Processing (Java) developers who want to write Java syntax that's automagically converted to JavaScript. At this point Processing.js is pretty old and no longer maintained.
Instead, I'd recommend using P5.js. P5.js allows you to write JavaScript syntax to create web-first Processing sketches. P5.js is much newer and is still being actively developed.
Here is the same code in P5.js:
var testImage;
function preload(){
testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(100);
image(testImage, 0, 0, 250, 250);
}
Shameless self-promotion: I wrote a tutorial on the differences between Processing, Processing.js, and P5.js available here.
I've been playing around with p5.speech.js the past few days. I am able to record myself for short periods of time but it stops short. I later learned that there is a continuous bool that allows you to keep recording so I decided to implement it. I set it to true with the "let continuous = true". When I ran the code the p5.speechRec still said false within the console. When I tested the console.log at the bottom it the output was true as well so I'm a little confused as to if this is a bug, a problem with chrome, or just an error that I am missing. Thanks for your help.
var myRec = new p5.SpeechRec(); // new P5.SpeechRec object
function setup()
{
// graphics stuff:
createCanvas(800, 400);
background(255, 255, 255);
fill(0, 0, 0, 255);
// instructions:
textSize(32);
textAlign(CENTER);
text("say something", width/2, height/2);
let continuous = true;
let interimResults = false;
myRec.start(continuous, interimResults);
console.log(myRec);
function speechRec(){
if (speechRec.resultValue){
createP(speechRec.resultString);
}
}
console.log("cont bool: " + continuous);
}
Questions like these are best answered by looking at the documentation for the library in question. Start by looking at the P5.js libraries page, which leads to the p5.speech documentation page here.
That documentation page says that continuous is a property of the p5.SpeechRec object, and it even links to some example code here.
Basically, you can't just pass in a random value to the start() function and expect it to work. You have to set the continuous variable yourself:
var myRec = new p5.SpeechRec('en-US', parseResult); // new P5.SpeechRec object
myRec.continuous = true; // do continuous recognition
myRec.start(); // start engine
Also, I'm not sure what your speechRec() function inside your setup() function is meant to do since you never call it, but that's not directly related to your question.
I'm facing a problem where I'm trying to instantiate an object inside the setup function of p5, using a callback to do so:
This is the part of sketch.js relevant to the problem:
var g; //for graph instance
var dropzone; //for the file dropping area
function setup() {
createCanvas(640, 480);
dropzone = select('#dropzone'); //selects the <p> element I'm using as dropzone
dropzone.drop(process_file, unhighlight); //unhighlight is just a function to make the drop area not-highlighted
}
function draw() {
background(200);
if (g) {
g.show();
}else{
msg = "Please, load a file by dropping it in the box above";
text(msg, width/2, height/2);
}
}
// callback being used to process the text file content
function process_file(file){
data = file.data; //gets file data(content)
lines = data.split('\n'); // split the lines
digraph = lines[0] == 1 ? true : false; // is it a digraph?
v = int(lines[1]);
g = Graph(digraph, v); //the class I"m using to instantiate the graph
console.log(g); // <-- says undefined
g.init_graph(); // initialize all vertices
for (var i = 2; i < lines.length; i++) {
edge = lines[i].split(' ');
g.add_edge(edge[0], edge[1], edge[2]);
}
}
I already checked using console.log() and the content of the file is being correctly loaded, and the values are correct in what I was expecting. the Graph() class is in another file, but it is being imported as well as the sketch.js. I also tried to put the script importing at the end of the page, but got the same result, the g is still saying undefined.
What I didn't try is to put the whole code of my Graph class into the sketch.js file, but I will need to put more 15 algorithms on the class later, so the sketch file will grow in a unneeded size. I thought the by declaring g as a global variable I would have no problems with it.
I'm fairly inexperienced with JavaScript, so this is probably a rookie mistake about some kind of loading order, so please, if you answer this question, show me the why it is not working as it is. If there's need of any other piece of code, please let me know.
Thanks in advance.
Looking at this line:
g = Graph(digraph, v);
I think you meant to do this:
g = new Graph(digraph, v);
This creates a new instance and stores a reference to that instance in the g variable.
Stack Overflow! I wanted to store variables in another file so that I would load the variables in file 1, and draw the scene in file 2, ex.
closet.js
var message = "Hello there";
drawer.js
draw = function() { text(message, 100, 100); };
So I would do something like that, but instead of importing the files like this;
<canvas data-processing-sources="closet.js drawer.js"></canvas>
I wanted to be able to include them in file 2, sort of like this;
closet.js
var message = "Hello there";
drawer.js
import("closet.js");
draw = function() {
text(message, 100, 100);
};
Is there a way to do this without including them in the HTML file itself?
Thanks in advance :)
Check out this question, which yours might even be a duplicate of. It lists several ways to do this in JavaScript, including using JQuery or dynamically adding the <script> tags to the <head> of your page.
But if you're using the Processing editor, you have another option: use classes by creating a new tab in the Processing editor. For all your purposes, you can treat this as a separate file. So lets say you created a separate Closet tab with a message variable. Your main sketch code might look like this:
Closet c = new Closet();
draw = function() {
text(c.message, 100, 100);
};
I think this is probably the way to go. It seems like you're trying to over-engineer a solution: either include the files in the html (this is what 99% of all JavaScript code does) or use a class (this is what 99% of all Processing code does).
I have a problem that is driving me insane.
I have something that works perfectly fine in one javascript file, but completely fails when using it with requirejs.
(function(){
define([], function (){
var Sprite = function(){
return {
spritesheet: null,
canvas: null,
context: null,
init: function(src, ctx){
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.context.drawImage(src, 0, 0, 10, 20, 0, 0, 10, 20);
ctx.drawImage(this.canvas, 100, 100);
}
};
};
return Sprite;
});
}
)();
And in other file I have:
(function(){
define(["r", "sprite", "player"], function (Ra, Sprite, Player){
var Game = function()
{
return {
...SOME STUFF HERE...
canvas: null,
context: null,
something: function() {
this.canvas = document.getElementById("game");
this.canvas.width = 500;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
var sprite = new Sprite();
sprite.init("image.gif", this.context);
};
};
return Game;
});
}
)();
I tried to compact the code as much as I can, I hope I didn't cut out anything important, but that is basically the part that is not working. I am also fairy new to requirejs so if I am doing something incredibly wrong, please tell me.
No matter what I do, everything seems to be fine, both canvases are created, all have the right properties, but the second one I am putting on the first one is not displayed. If I put plain image instead of canvas it works just fine, but canvas on canvas does not.
This drives me nuts, I tried so many possibilities, the code works just fine without all the requirejs stuff, but fails when I structure it that way. Does it have something to do with global scopes? How to make this work? I need canvas inside canvas.
Thank you for your time!
EDIT:
I have only <script data-main="main" src="libs/require/require.js"></script> loaded in my html file and <canvas id="game"></canvas> in body.
Then in main.js I have:
require.config({
baseUrl: "./modules",
waitSeconds: 10,
packages: [
{
name: "something not used yet",
location: "something not used yet",
main: "something not used yet"
}
]
});
require(['game'], function (Game)
{
var game = new Game();
game.begin();
});
Rest I already showed in the beginning.
I have main.html and main.js together in the build folder and all the others in build/modules folder.
Problem was the most ridiculous thing ever and I wasted way to much time to figure out something this obvious...
For some reason I completely forgot to wait for the image to load and kept using it before it is even loaded, and the complicated (for me at least) structure when using requirejs made it hard to pinpoint that mistake.
Also without requirejs the code worked because image loaded so fast, it was ready before the next function started even without onload, however when I switched to requirejs I guess it either slowed down, or the asynchronous nature of it created the problem.
Anyway, solved by simple onload handler.