Share your repls and programming experiences

← Back to all posts
A *very* soothing animation and 1k cycle special details
h
RohilPatel (1308)

Hey there, I just started using p5.js.

I'm going to make a game, which I have decided will be my 1k special. I will then kick off with a third generation of ClearCode.tk, which I'm sure you are all going to like (repl will have a competitor lol).

Ok, this project basically takes a drag click, and you see some yummy colors. Thought this was satisfying

Anyways, see you with the game!

Upvote if u liked

YOU NEED TO DRAG CLICK ON COMPUTER, TAP CLICK DRAG ON MOBILE FOR THIS TO WORK

Oh yeah:

Works like sketchbook lol

Commentshotnewtop
RohilPatel (1308)

@DynamicSquid can we get ur squid comment lol

DynamicSquid (3642)

@RohilPatel those are some yummy colours!

DynamicSquid (3642)

@RohilPatel those are some delicious colours!

RohilPatel (1308)

Its nice to get a squid's perspective on everything. They can see it all lol @DynamicSquid

Codemonkey51 (871)

COOL! gg on 1k cycles (maybe someday my non-posting/non-being active will get me there)
Here is what I made:

Vandesm14 (2416)

Hey, we've unlisted this for now because it looks fairly low-effort. If you edit the description to add more info and/or add more to the code, reply to this comment and I’m happy to relist it!

xxpertHacker (394)

The colors seem to change too quickly it should slowly transition between color.
Ex: red -> blue: it just "jumps" between them, instantly changing from one to another.
I suggest it fade into the next color, ex: red -> purple -> blue.

RohilPatel (1308)

I was too lazy to do the math lol to make it seamless @xxpertHacker

xxpertHacker (394)

@RohilPatel There's a difference between being too lazy to perfect it, and not trying at all. :/
If it were a poor transition, that would be better than no transition at all.

RohilPatel (1308)

@MemeManHimself i was working on this project. Lemme know what u think! Also, when can u code something

MemeManHimself (82)

Sorry am here now it's cool I love to make things like thsi and I'm ready 😎 @RohilPatel

MemeManHimself (82)

@RohilPatel Sorry I had more school ;-; how about Monday 3:45?

MemeManHimself (82)

@RohilPatel 14 days ago ripp wanna do it today?

RohilPatel (1308)

lol sure, i am in class till about.. 1:30 @MemeManHimself

MemeManHimself (82)

I'm in class until 3:25 CDT @RohilPatel

JosephSanthosh (1192)

I mean ur only 100 cycles late, lol, gg, didnt squid make something like this?

RohilPatel (1308)

This isn't my 1k cycle special lol. Idk if he did @JosephSanthosh

JosephSanthosh (1192)

well im not sure if u read ur own projects title properly. @RohilPatel

RohilPatel (1308)

First, I swear I put details there lol

Second, read the description!
@JosephSanthosh

RohilPatel (1308)

The first paragraph is for what's to come ;) @JosephSanthosh

LAMAQDAHODWALA (16)

Very very very nice! However, if you drag ur mouse/finger fast enough the circles start to seperate.

RohilPatel (1308)

Yeah I realize that. It is most likely due to ur refresh rate on ur computer/tablet/phone. You can't exceed that many, and I can't "bot" it for you. Nice question! @LAMAQDAHODWALA

Bookie0 (4044)

Bruh add a clear button lol!

also an option to choose your colors. and to change background color. and to maybe use other shapes than circles lol.

but anyways cool job!

RohilPatel (1308)

That's going to my 1k special! Also, upvote if u like this! @Bookie0

RahulChoubey1 (29)

A border surrounding the canvas element would help, along with some others.

RahulChoubey1 (29)

Not to sound like an expert

RohilPatel (1308)

Although there is no canvas element 🙄 lol @RahulChoubey1

RahulChoubey1 (29)

@RohilPatel there is a createCanvas in the JS

RohilPatel (1308)

No actual canvas element however. It might be there in the actual html, idk @RahulChoubey1

fuzzyastrocat (788)

@RohilPatel When you call createCanvas, p5js creates a canvas element and returns that. So you could say const canvas = createCanvas(windowWidth, windowHeight); canvas.elt.style.border = "blah"; etc.

PlaySoccer (40)

You should try using circles instead of squares. Circles would look more smooth

realTronsi (296)

suggestion, make the square's center the center of the mouse instead of having the offset (just do x+=width/2 and y+=height/2)

RohilPatel (1308)

Hmm, I'll consider that for my 1k special! @realTronsi

RohilPatel (1308)

Did u drag click with ur mouse? Or just like drag tap on mobile? @ZDev1

potatojs (804)

you can use the hue color mode insead of doing this incrementing thing
the hue color mode is what u want.. i think

plus some css could help like give the score p a position of fixed and give the canvas padding 0 margin 0
the window is massive because of all the padding/marging stuff

RohilPatel (1308)

Thanks for the feedback! I do agree, and although I won't be changing it for this project, it'll be in heavy consideration for my next project; a real game. Do you like this project? @potatojs

potatojs (804)

yeah it's cool :)!
but i think you should check the p5 docs
some functions in p5 are just lifesavers from p5.Vector to p5 sound to WEBGL / 3D and they deserve checking out ;)
good luck with your game!
(and by the way p5 has a p5 dom lib that simplify selecting elements creating them adding events listeners etc)
@RohilPatel

RohilPatel (1308)

Thanks! If you want, please upvote, it'll help others see and totally get hyped for this 1k special lol @potatojs

potatojs (804)

just a random question what does ts mean in your profile?
@RohilPatel

RohilPatel (1308)

It means typescript, similar to javascript but with types and nicer syntax. It'll take a few years to replace js, but I know it eventually will. Good question! @potatojs

Theboys619 (27)

Typescript can't replace js since it transpiles to it. @RohilPatel

RohilPatel (1308)

Oh. I didn't see ur comment; getting so many ;)

Anyways, ok, yeah I know that, but I must have meant Deno
@Theboys619

PlaySoccer (40)

this is really satisfying...

RohilPatel (1308)

Hee hee, if u like it, please upvote! Thank you! @PlaySoccer

Jeydin21 (38)

Wut when I clicked the Run button nothing happened, I opened the repl.co link into a new tab and still nothing happened, it's just a blank white screen.

achromaticaries (0)

@Jeydin21 Try clicking and dragging your mouse across the white screen

RohilPatel (1308)

Hopefully it works for you! If so, please upvote! @Jeydin21

EpicGamer007 (613)

I wish my school did not block repl.co sites :(

EpicGamer007 (613)

@RohilPatel , im on my home computer now, this is pretty cool :D

RohilPatel (1308)

oo! Hope ur hyped for the 1k special! @EpicGamer007

RohilPatel (1308)

Mine! I still haven't made it. Details in description of this post @EpicGamer007

EpicGamer007 (613)

@RohilPatel , oh yea, if u can, ping me when u post it plez.