Understanding Codepen

[2sweedy]

Hoping you guys can help me understand use of CodePen website. I copied in my project in to the JS section, and I explained what I am trying to do. However, I have the code but things are not showing up as in a picture of object I created and I am completely lost. I need to have it correct in order to work on it, so does my project" Fearful Deer, "  belong in the pen section or in collections?  And what is needed for the picture of the doe to show up??

See the Pen jvByvv?editors=1010 by 2sweed (@2sweed) on CodePen

[Carl]

 

 

Definitely take the CodePen editor tour and watch the video here

https://blog.codepen.io/2016/02/01/learn-how-the-editor-works-the-editor-tour/

 

 

That should explain about 90% of what you need for making simple demos with CodePen.

 

Also, their documentation is great if you need to learn more about a specific task:

https://blog.codepen.io/documentation/

 

---

 

From your demo, my guess is that it is a bit incomplete as you don't have anything in the HTML tab and I'm not sure where the draw() function is supposed to be drawing the shapes you are using. Also not sure if the final output is SVG, canvas or if you need be loading an external library.

 

We really need to keep our support focused on the GSAP / GreenSock API. If you need help with GSAP, we're here to help. 

 

 

 

[2sweedy]

That goes to show how dumb I am. I thought that (codepen) was a part of this site. I watched the video's and followed the link to that website. So your GSAP is a different format,  is my new take on things. So maybe you could explain to me how I can arrive at your coding area, or is it a download to my computer?  Or ??

 

I was planning on just being here and getting answers as I go along, but got off the path of the GSAP,  somehow.  And your right it is incomplete.  I was just going to work on part of my coding involving the deer. I told you it was confusing me and I guess I was right. lol

[PointC]

Hi @2sweedy 

 

Welcome to the forum.

 

GSAP doesn't have a coding area on the website. For demos most people use CodePen, but there are other options like JSFiddle, Plunker and CodeSandbox. Those are just places online to write code. For local work you'll just download the GSAP files or link to the CDN and make all the animations you like in your local code editor. This is a great pen to show what's included:

 

 

See the Pen djXzyR by GreenSock (@GreenSock) on CodePen

When making demos for your GSAP questions on CodePen, it's often easiest to fork an existing pen that loads all the GSAP goodies. This is a good one to start with for your projects.

 

https://greensock.com/try-plugins

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

You can also create your own templates in CodePen for future questions and demos.

 

Hopefully that helps a bit. Happy tweening and welcome aboard.

 

[2sweedy]

Thanks for the information. Where I am studying we have only done Java Script so far, meaning I have no clue on using the html or  the css spaces for code at code pen. I guess I better study some more so that I will have better direction and then try code pen or one of the other formats for coding. It's okay, I just got a little ahead of myself in this learning curve.

 

I will play around on code pen and try to put together a template that shows the deer I created, which is sadly more like a drawing or cartoon without movement.  Not the first time to be in over my head and won't be the last.  You made my day a little brighter now that I know where I went wrong and how to try and fix the problem.  Just a matter of putting the sections of code in the right slots.  As you can see some lessons start off with a shape we have to modify into something else. This often creates more problems as we are working off a model that someone else created. The shape I started with looked like a snowman, which I converted into a deer.  But I am reading your forum posts and getting a bit more knowledge based everyday. Yep! Things are looking up.

 

https://www.khanacademy.org/computer-programming/spin-off-of-project-before-the-attack/6208392906178560

 

 

 

 

 

 

[Sahil]

In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method.

 

See the Pen YOZEmZ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js.

 

 

In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP.

 

See the Pen oPZpNY?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.

[Sahil]

Just came across a tweet, couple of days ago p5js launched their web editor. So you won't really have to mess with Codepen.

 

https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf

 

https://editor.p5js.org/

[2sweedy]

@Sahil,  Not sure what to say, I am so excited. I followed both links and signed up for medium and p5js. Yes it is a lot easier, not as many bells & whistles, but easier to handle and learn the different commands to put forth code.  Medium, is so interesting with video's and stories about everything that pulls apart and puts back together the aspects of coding and writing, and art, etc...amazing.  Then I followed a third link and found another learn to code for free site that will give me further instructions. 

Your input gives me more understanding of what I don't understand, thus switching gears and adopting p5js in place of Codepen for now, but planning on returning when my skill is much improved.  

 

Thanks so much for all your help.  Soon I will know what I am talking about.  lol  You are a Superhero today!! 

[OSUblake]

Hi @2sweedy

 

I think starting out with p5/processing is a great way to learn animation and programming, and the math won't be as hard as you may think. 

 

If you want to use GSAP with the p5 editor, just copy the url from the "Download GSAP" button on greensock.com, and insert it into the index.html page.

 

 

 

Here's the demo @Sahil made using that editor. Just press the play button.

https://editor.p5js.org/OSUblake/sketches/BJ4n6bqDX