Name: 編碼挑戰131：彈跳的DVD標誌 (Coding Challenge #131: Bouncing DVD Logo)
Uploaded: 2021-01-14T10:17:57.000Z
Duration: 18 min 27 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

- Hello, it's (laughs) Throwback Wednesday.

現在進行式

I'm going to attempt to make the bouncing DVD video logo (DVD Screensaver),

and I'm going to attempt to do it in 10 minutes.

I'm sure this one's going to go horribly wrong.

Nothing ever, no good never comes from it,

If you're a beginner, if you have never programmed before,

I'm hoping that this is a coding challenge

and actually possibly create yourself, but,

I'm going to try to talk through all the concepts,

and I'm going to use very few, the basic beginner concepts

of programming in JavaScript using the P5 library.

I'm going to wait like 20 seconds just to see

Oh and I wanted to also do a quick shout out

and thank you to Mike Boyd who learned to code

from a lot of different resources including

Check out this video, he makes this really awesome game,

and also at some point tries to make a bouncing DVD logo

So I'm going to create something in HTML called a canvas,

and I'm going to use the p5 library which has a nice function

And I'm going to make my canvas 800 by 600

because this is four, has an aspect ratio of four by three,

And that's the aspect ratio of old timey television tubes.

And then, I need to draw an image of that DVD logo,

and I need to place it randomly somewhere in this canvas.

Its location is going to be defined by the corner,

that's going to be sorry, it's x,y location,

and then I need to determine when it hits the edge

And according to my research, I actually did some research,

into the science behind this DVD logo thing

which actually there's all sorts of formula

I'm going to include a link to that article

where its x-speed, and y-speed are equal.

Alright, so the first thing I want to do is,

This is editor.p5js.org, and you can see here

and I've drawn a background of zero, that means black.

So this draw function is looping over and over again,

Set up the canvas, draw that background over and over again.

So what I need is I need to keep track of that x,

So I need a variable, I need x to store the x-position,

all the way up to x equals 799, so it's 800 wide,

Check my other tutorials where I speak hopefully,

Alright, so I'm just going to set x equal to 400

and y equal to 300, and I'm actually just going to draw

字幕列表影片播放

編碼挑戰131：彈跳的DVD標誌 (Coding Challenge #131: Bouncing DVD Logo)

aspect

multiple

negative

attempt