i really enjoy your lessons. your way of teaching is awesome and i never get bored in any videos because of the silly things you do and the jokes you crack.. you are awesome man. thankx a lot for your videos.
"Perhaps in the future, we'll all have strange, robotic DOM element children" The Coding Train. LOL really made me laugh out loud at work, thank go no one noticed. I'm really digging this course, I've seen so many tutorials and stuff about javascript and callbacks, and promises, and async stuff, whenever I use JS I get sooo confused. Thank you for explaining with simple, and really broken down examples. It reeeaaally helps a lot!
I'm into competitive programming at the Same time I just started watching your videos p5js now I'm kindoff fully addicted to your videos this looks cool and fun
I notice that in Firefox 41.0.2 on Linux Mint 17 that I must add to the end of the 'canvasp' paragraph, just before the closing as follows: This paragraph should include the canvas.
Apparently it is because of the width of the window. If Dan expanded his, it would probably fall apart as well. However when the window is narrow, the browser adjusts the elements by placing them below each other.
This video starts with parent() and ends with parent(). Did I miss child()? 8.14 says "parent() and child()" again so I think I can simply move on. I do like the elegant solution of arranging the canvas using parent().
I have needed this lesson so many times and been searching so much. Now, I finally found it. I'll save the URL and a link the the reference for parent()!!
Hi Daniel, thank you for these tutorials - they are great. I'm trying to have my canvas inherit dimensions from it's parent something like createCanvas(windowWidth, windowHeight), the parent's dimensions are defined by it's CSS (actually I'm using bootstrap to have it responsive). So my element has width: 100% and height: 100vh. Essentially I would like to have something like: var canvas = createCanvas(divHeight, divWidth); but I have no idea how to do this.
Hello, great series! I'm struggling with my programme where I want to separate elements on the canvas. I have created a 'secondary canvas' with the createGraphics function and want to use that as a parent of a DOM element, with the main canvas being the 'grandparent' if you will. Both a video, and the secondary canvas show on the page, but I want to have a createCapture display output in the secondary canvas. Is there a way I can do this? Maybe I've not looped a segment of code properly. Thanks in advance. My code: //global variables var vid; var canvas; var p1; let extracanvas; let capture; function setup() { canvas = createCanvas(windowWidth, 1800); extracanvas = createGraphics(windowWidth, windowHeight); extracanvas.background(0); // specify multiple formats for different browsers p1 = createElement('p1', 'Video stylised in javascript. Click to play.'); // div = createDiv('div', 400, 600); p1.position(400, 600); dolphin = createVideo(['data/videogamefootage.mp4']); // by default video shows up in separate dom // element. hide it and draw it to the canvas // instead capture = createCapture(VIDEO); capture.size(320, 240); capture.position(50, 700); //capture.hide(); } function draw() { background(10, 10, 200); image(extracanvas, 50, 700, 1000, 500); image(dolphin, 10, 10); // draw the video frame to canvas image(dolphin, 150, 150); // draw a second copy to canvas tint(mouseX, mouseY); } { image(capture, 0, 0, 320, 240); filter('INVERT'); } function mousePressed() { dolphin.play(); // play }
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
Hi Daniel, Thanks again so much for your beautiful lessons. I love your happy way of explaining those things. I really had to smile when you pressed the random button and all those bacteria paragraphs came out. =) Greets form Berlin, Christian
hey Dan, I am completely stumped as to how to complete the challenge of programming the button to load an image on each click. Incredibly grateful for any help. Here's my sketch code: "function preload() { kitty = loadImage("images/kitty.jpg"); doggy = loadImage("images/doggy.jpg"); unicorn = loadImage("images/unicorn.jpg"); bacteria = loadImage("images/bacteria.jpg") } var images = ['kitty', 'doggy', 'unicorn', 'bacteria'] function setup() { noCanvas(); var button = select('#button'); button.mousePressed(addItem); } function addItem(){ var r = floor(random(0,images.length)); var img = createElement('img', images[r]); img.parent('imageslist'); }" *and here's the applicable part of my index.html:* " These are some living things Make a living thing "
Alex Wagner don't know if this is still relevant to you but in the images array you quoted your variables like 'kitty' where it should be kitty. Maybe I'm wrong though? Anyways hope this helped
+endofmysteries you can use .html() to return the current content. Then append your content and put it back in. Something like: var content = elt.html(); content += "new stuff"; elt.html(content);
depends on the case. jquery is good for making full websites, but it is a hell of a lot more learning. p5 is perfect for interactive objects and animating.
There is something I don't understand: when you do var canvas = createCanvas(400, 400); the canvas is immediately created and appended at the end of the page. But if you add canvas.parent('canvasp'); then the canvas is drawn where we actually want it. However if each line of code is executed one at a time, shouldn't the canvas be first drawn, at least for a split second, at the end of the page? Maybe that actually happens but it's so fast that we don't notice it?
If anyone is actually interested, I just ran a little experiment and that seems to be the case indeed. I tried the following code: let i = 0; let canvas; function setup() { canvas = createCanvas(400, 400); background(0); } function draw() { ellipse(random(width), random(height), 5, 5); i++; if (i > 1000) { noLoop(); canvas.parent('p1'); } } where 'p1' is the id of a in my index.html. The canvas starts to be drawn at the end of the page, and only when it gets to 1000 dots it is moved to right after the p1 paragraph.
An option here below for reference. C Mos var b; var alist; function setup() { noCanvas(); b=select('#but'); //A button alist=select('#olist'); //An ordered list b.mousePressed(addAction); } function draw() {} function addAction(){ var mtxt=" GOT " + str(frameCount); alist.html(""+mtxt+""+alist.html()); }
Hi sir, can you make a new app tutorial wherein you'll use the calendar component of framework7. An app proj something like a period tracker or a calendar with memo? It will be a big help for me since i just got started learning app development and im interested on integrating the calendar of f7 with cordova in my future projs. im just learning by myself with the help of tutorials like this one so thanks for your videos!
