Looking For P5.js Coding Buddies & Groups

[Roli]

Around 2.5 years ago I started to learn to code with much enthusiasm and little experience, however I soon fell out of it. I was learning, however I found that even though my online courses were(are) teaching me stuff, I couldn't seem to break out of what they were teaching me and applying that to my own stuff.

As usual, before long I began to feel like a coding fraud, a code-by-numbers guy who had zero creativity and hadn't really grasped the core concepts of coding, so I just drifted away . . . Cue the sad violin and tears on a rainy day.

But wait! I love coding, I love the logic of it all, I want to be great at it, after all, don't I secretly want to be a computer?

Bingo!!

I just yesterday discovered p5.js, why didn't I see this before?!?! (more evidence of my coding pretendership)

Anyways, it's fricking awesome! And it allows me to go off piste and just try stuff and see if it works, I'm already coding a simple app, and I didn't have to download 4 petaflops of libraries or read and pretend to understand a heap of instructions and protocols.

Just nip along to p5.js Web Editor and just start coding! wooHoo!!

So the point of this silly little post is to find some p5 coding buddies, and/or get an invite to the p5.js Slack channel - I can't do Facebook groups any more, there are just too many time-wasting, unfulfilling, temptations on that damn site.

So yeah, invite me to the Slack, or Discord or some other platform that's not facebook and let's buddy up!

-

Just to show you what I tried yesterday. I want to create a simple app, whereby there are 2 bowls on a table, and I drop little pebbles into them. The pebbles have to be 2 different colours, and I want a nice sound effect of stone hitting ceramic bowl.

So from messing about and checking out some youtube tutorials and mishing them together with a couple of p5.js official tutorials, I came up with this:

function setup() {
let canvas = createCanvas(600, 400); canvas.position(300, 50);
}

function draw() {
background(0, 128, 0);

fill (128, 128, 128);

ellipse(width/2, height/4, 100, 100);
ellipse(width/7, height/4, 100, 100);

if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}

ellipse(mouseX, mouseY, 25, 25);

}​

Which clearly doesn't work.


However this morning I've discovered a short object tutorial which will set me on my way, which looks like this by the way:

var pebble = {
x: 300,
y: 200,
display: function() {
stroke(255);
strokeWeight(4);
noFill();
ellipse(this.x, this.y, 24, 24)
}

}

So yeah, pretty basic stuff, I still have to work out how to move that object with a mouse press... So if someone else out there likes p5.js or has just heard of it this very second and wants to buddy up, let me know!

Peace! X

UPDATE: I've just seen an answer on the Processing forum I joined last night in relation to this (damn! I'm falling in love with this community fast!!) and what I need is to brush up on some collision detection.

I'll share the answers with you here, and please don't forget to hit me up! :-D

Answer 1.
you can delete background, then the points will stay permanently

you can use something like

if(dist(mouseX,mouseY, width/2, height/4) < 45) {
ellipse(mouseX, mouseY, 25, 25);
}​

to judge whether mouse was clicked in the right place. You only want to draw the ellipse in this case!

Answer 2.
CrHallberg.com/CollisionDetection/Website/point-circle.html

 

Dislike ads? Become a Fastlane member: Subscribe today and surround yourself with winners and millionaire mentors, not those broke friends who only want to drink beer and play video games. :-)